Jack Beckwith’s Post

Good design isn’t magic. It’s methodical. After we’ve going through the ideation process (more on that here: https://lnkd.in/giHViZUn), it’s time to dive into design. Here’s the process that The DataFace team uses to get a website, data story, or analytics tool designed and ready for dev. 𝗦𝘁𝗲𝗽 #𝟭: 𝗪𝗶𝗿𝗲𝗳𝗿𝗮𝗺𝗲 𝗙𝗶𝗿𝘀𝘁 We map out the basic structure, content hierarchy, and navigation before perfecting the details. Think of it as the blueprint for everything that follows. 𝗦𝘁𝗲𝗽 #𝟮: 𝗛𝗶𝗴𝗵-𝗙𝗶𝗱𝗲𝗹𝗶𝘁𝘆 𝗠𝗼𝗰𝗸𝘂𝗽𝘀 This is where the design comes to life. Mockups give stakeholders a pixel-perfect representation of what the end result will look like. 𝗦𝘁𝗲𝗽 #𝟯: 𝗧𝘄𝗼 𝗥𝗼𝘂𝗻𝗱𝘀 𝗼𝗳 𝗙𝗲𝗲𝗱𝗯𝗮𝗰𝗸 We’ll port the mockups into FigJam and ask for feedback. Every design gets sharpened through input from users and stakeholders. 𝗦𝘁𝗲𝗽 #𝟰: 𝗗𝗲𝘀𝗶𝗴𝗻 → 𝗗𝗲𝘃 𝗛𝗮𝗻𝗱𝗼𝗳𝗳 We’ve learned that even mockups can get lost in translation. So our design team gives them: ➡️ Walkthroughs of key flows ➡️ A shared component library of UI elements in Figma ➡️ Detailed annotations in Figma Dev Mode where designers leave instructions in Figma on how interactions, animations, and functionality should work. The goal: fewer surprises and fast delivery of final products that actually match the vision. How do you approach the design process? Always looking to steal a good idea. 👇

To view or add a comment, sign in

Explore content categories