Key Screen

1. Pick the Most Important Screen

Use it to rapidly create the visual language and design system. This typically isn't the first screen.

Balint's Tip: A Screen with the most UI components and probably the most complexity in it should be your main screen. Starting with this will help you create most of the UI elements and pretty much the whole "look & feel" of the product. This often isn't the landing page or screen of the application.

2. Decide the Visual Inspiration

Pick two to three applications from the Miro research section. If necessary, find more applications or find sections of the application that fit the most important screen.

3. Decide Design Basics — Typography

Having this upfront limits friction to decide later. As the design develops you can change it.

Choose a typeface that can be easily used on the web — e.g. Google Fonts. I tend to stick to "SF Pro Display" as a generic application font I can quickly use. If the client has a specified font or uses a particular style on their previous work make sure you use that.

4. Decide Design Basics — Colour

As you've done with typography, decide the colours you're going to use throughout the prototype design. We recommend using an existing pallet.

Helpful resources: How to choose colours, Colours

5. Pick Grids and Layouts

• Make sure you're designing for the right application and size for the client - e.g. mobile, desktop, big screens, small screens, etc.

• Select a standardised grid system for mobile or desktop design and stick to it. It's important that you use a grid so a front-end developer can easily implement your designs.

• We typically use Bootstrap 4's Grid setup - You can use Charlie's Sketch Grids Template

• This ebook, Refactoring UI, includes over a dozen complete colour pallets, typography ideas and clean minimalistic iconography.

• Using its resources will speed up prototyping and allow fast decisions at the beginning of the process

• This costs $149 USD. If you are a Deep Work Expert, contact Charlie to buy you a license.

If you use any icons, make sure you provide the license agreement to the client.

Make sure all the above is into one Sketch or Figma file and instantly accessible. This will avoid time switching between applications. My set up generally looks something like this. It's rough, and that's great. With inspiration, colour pallets and anything else I need ready to go:

6. Rough First Draft

Duration: 2–4 hours (depending on the complexity)

You can start anywhere you like. It might help to have some visual framework in place — e.g. a header or box component to represent the main part of the interface.

Focus on this one part in detail as it will help you make quick decisions on the visual direction.

After focusing on one section for visual style. Create a rough version of the rest of the screen. This will confirm your design approach and sets a template to iterate on.

This is a rough first version of the ETH 2 launchpad landing page. I focused most of my energy in the first hour designing the graph as the key feature. This confirmed my colour pallet, typography and visual style. I then put a rough version of the rest of the page together.

Balint's Tip: If there's a predetermined style the client wants to aim for, it's easy-going. Copy the shit out of everything you can find and adapt it accordingly.

7. Iterate

Iterate on the design until you're happy with the visual fidelity in the time available. For example, see the iterations on the landing page below:

Balint's Recommendation: "Design" can be challenging. You have to focus on the features and usability first to not spend too much time on minor visual details. A timer can be useful to give yourself a maximum of a few hours for visual design iteration. From that point, it's all about the functionality / UX.