📝Penn Week 10b – Designing an Interface Work Session
Design Library
A design library is a shared set of these assets that can be accessed by multiple people. This helps synthesize the design process across different machines, and helps make sure that the design is always respected. Since we’re going to be working on a product that already exists(are.na) we’re going to create a design library to work with.
👉 Task
To complete the activity, you’ll want to match the are.na design as closely as possible. To help you have a flexible way of working and experimenting, create a design library in Figma. Normally, we would create one library that everyone could use, but I think there’s value in recreating an existing system and observing the nuances of the design independently.
You should include:
Type hierarchy(headings, body copy, captions etc.)
Link and Button styles
Icons
Content types(Blocks: default, hover, text, text with comment, type blocks, image blocks, video blocks…)
UI elements – drop downs(closed, expanded, hover), text-input areas(short field, long format text)
Other reused items between pages(breadcrumbs, navigation) Â
How to get started:
First observe`, making notes of some of the bits of content. Use the web inspector and/or the What Font plugin to take note of some of the CSS. You can also use digital color meter to identify specific colors.
Â
Â
Â
Â
Using a mobile preset, recreate some of the elements in Figma. You might want to put everything together on a larger page to see how everything is working together. For icons – you can download them directly off the website by inspecting the element, copying the SVG code, and saving it in sublime text, and then dragging it into Figma.
Â
Â
Â
Â
Once you have a clear indication of hierarchy, you can begin saving these as components. Components are reusable symbols that can be applied across your design, they’re incredibly useful. To do so, group together items that go together(command + g) and rename them. You’ll want to name them as you would code them. Use slashes to indicate hierarchy shifts and avoid using specific details about the design and instead opt to name them based on their functionality.(button/active instead of button/light-grey). Right click and select“Create component” when ready.
Â
Â
Â
Â
You’ll know if items are components or not because the icon on the left will change, and they will turn purple.
Â
Â
Â
Â
Components can be viewed and edited by clicking into“Assets.” If you ever need to change a component, you can do so in this one instance, and it will update globally. There are individual changes you can make that won’t ruin your button style, for example, you can override the text by double clicking on it. The text will change, but it will maintain the symbol style.Â
Â
Â
Â
Â
đź•“ Â Work on developing the library until 3:20
Next, let’s brainstorm additional features.
Rapid brainstorming is a way to generate a lot of ideas quickly, without judgement. There’s an old writing adage:“Write hot, edit cold” that translates over to product design, too. The idea is that you’ll write design freely and quickly without censoring yourself, letting all of your ideas pour out, without stopping yourself to evaluate if they’re good or bad.
Within product design spaces, rapid brainstorming can be used to think through a few ideas with a group of people, and think of ideas you wouldn’t have landed upon initially.
Some tips:
Think about needs rather than solutions.
Design a new sandal vs. Design a way to protect your feet from hot sand and pavement.
Don’t judge your ideas
Work independently first, then as a group.
Draw your ideas as soon as you can, don’t worry about the quality of the drawing, focus on clarity.
Share early and share often.
If you find it daunting to just jump in you could try:
The pomodro method – A time management technique where you set a timer and work through short bursts, and take short breaks after each one.
8 ideas in 8 minutes
Make adjustments to existing ideas instead of starting from scratch.
Design Library
👉 Task
đź•“ Â Work on developing the library until 3:20
Next, let’s brainstorm additional features.
writedesign freely and quickly without censoring yourself, letting all of your ideas pour out, without stopping yourself to evaluate if they’re good or bad.