I was stoked to attend the SmashingConf in Toronto this year. The conference venue was at the perfect location, TIFF Bell Lightbox, right at the heart of downtown Toronto. The event was scheduled to start at 8:30 a.m, but my colleague, Blaine Hussey, and I were so excited that we reached TIFF around 8:00 a.m. and waited anxiously for the doors to open. You can see how happy we were when we got our name tags and all those SmashingConf swags.
For Day 1, seven speakers were allocated forty minutes each to deliver their presentation. The presentations had the right mix of hands-on code demos that covered front-end code architecture, VUE application, and animation, as well as talks on inclusive design, and digital policy and standards.
Speaker 1: Brad Frost — Let’s build a Design System
In this session, Brad Frost discussed and showed how to build a design system. In his demo, he used a static generator tool called patternlab.io and Story UI to develop a design system’s front-end component. He shared some great ideas about front-end code architecture, modular development, and component reuse.
- You should design systems through the lens of your software. In my recent experience re-designing Solace’s documentation site, it was critical to design and code through the lens of the software we use, which also included any third party software that we wanted to integrate.
- Having reusable components is paramount in the design system workflow.
- Create a common pattern/language/convention for all stakeholders to share.
- Create a consistent API code convention.
Speaker 2: Sarah Drasner — Let’s write a VUE App from scratch
In 40 minutes, Sarah Drasner showed us how to build a functional application with routing, server-side rendering, and animations using Nuxt.js and her VUE snippet extensions. I was quite intrigued by the way she used her custom VUE snippets and other tools such as CSS Grid generator, that she had developed herself, to speed up her workflow. Very cool!
- Use snippet generators to speed up your workflow.
- Use a flex grid generator as a shortcut.
- Nuxt version2.6 will polyfill
fetchfor you. No need to include
- Be mindful of what API data you want to store in Vuex.
Speaker 3: Phil Hawksworth — JAMStack: Silly Name. Serious Stuff
In this session, Phil Hawksworth demystified what the term JAMStack means, talked about the p̶e̶r̶f̶e̶c̶t project timeline, and stressed on the importance of simplifying the technology stack. In his demo, using Sarah’s newly created repo, he demonstrated how webhooks and APIs could be used to trigger events, generate notifications, and create an automated development environment.
- Simplify the technology stack.
- Static sites are meant to be portable. You can take them to different deployment services without too much modification.
- Webhooks can automate the deployment process by triggering an event when something happens.
- Automate as much as you can; set it and forget it! Every time an event is triggered, the build automatically kicks in.
- JAMStack does not need servers and runs on a continuous integration model. Architecture shouldn’t dictate the experience. Static sites can feel just as dynamic as a traditional site rendered from servers.
Speaker 4: Jenny Shen — Building Bridges, Not Walls; Design for users across cultures
How do cultural differences affect product design? Jenny Shen shared her experience designing products for users in Europe, the Americas, and Asia. As she truly said, it is no longer enough to have language translation for international users and expect it to be inclusive. We must be aware of, recognize, and understand the full range of human diversity and requirements concerning language, culture, religion, habits, and other forms of social differences. Understanding different cultures mean personalizing to their preferences to increase trust and engagement; this can mean adding/modifying/removing details as necessary.
- Design patterns that are familiar to us may not exist in other cultures. For example, some cultures may not understand or commonly recognize the hamburger menu.
- Be sensitive to what might be taboo in other cultures.
- Diversity within the team increases cultural awareness of the organization.
- Conduct research in the local language.
- It is no longer enough to only have language translation; the product must be designed in such a way, so that meets and recognizes cultural differences.
- Books: The Culture Map by Erin Meyer, International User Interfaces by Elisa del Galdo & Jakob Nielsen
Speaker 5: Chris Gannon — Make it move! Create a Web Animation from scratch
- Use “classes” instead of “ids” to avoid the need to make unique names
- When using Illustrator:
— Export SVG from Illustrator using asset export, NOT save as. Alt + click exports all layers together as a group.
— Remove unnecessary groups and tags.
- If you have a number of elements in a group that have the same fill or stroke attribute, you can remove it from the individual elements & apply it on the group instead.
- Creating a loop animation requires two elements: one coming in and one going out
- Use different easing options, easeIn or easeOut, to make the animations feel more dynamic & natural.
Speaker 6: Kristina Podnar — Help! I’m your ailing website. The Digital Policy & Standards Rehab Hour
Often ignored and overlooked by designers and developers, being compliant to digital policy and standards plays a vital role in creating a functional, usable website. In this session, Kristina Podnar talked about some common issues and challenges that a website faces, and how one can leverage policies and standards to enhance the overall website health.
— Digital Policy Steward: Person often organizing documentation, making sure others know where to find this information
— Digital Policy Author: Often, a developer or designer. Actively creating and contributing.
- Make the steward a role, not a person — a person will eventually leave.
- You can’t manage what you don’t measure. Having metrics allow you to track how website compliance with policies and standards.
- Balance accessibility and budget — for example, WCAG 2.1AA is much more affordable to implement than 3A.
Book — The Power of Digital Policy
Speaker 7: Steven Hoober — Authentic Digital Design, By The Numbers
Steven Hoober discussed in length some of the usability issues and challenges when designing for mobile devices. With all the new design trends, we often miss the fundamental principles of how people look, see, touch, and expect their mobile devices to work. It is essential to understand how the variety of mobile devices are used and in what situations; where on the screen should the information display and the type of information — for example, primary, secondary, and tertiary information. The information can be designed and architected based on the type of content, relevance, and importance.
- On mobile devices, people don’t start at the top and read down. They often begin at the center of the screen then work their way outward.
- Think about tap targets in terms of probability, there will be some misses, and accuracy is highest in the middle of the screen.
— Primary info: in the center
— Secondary info: actions along the edge
— Tertiary info: behind menus
- Menus are okay if you use them right!
- Centring list items are always wrong.
I am looking forward to Day 2 today. Watch this space!