UI Concepts Framework · CHAPTER 4 OF 8
Screen selection and moodboards
Step 3 Choose the Screens for the UI Concept
Start With The Key Screens
You do not need to design every screen. Select 2–4 key screens that represent the software’s main workflows and interface patterns.
Each screen should show a different part of the concept: Navigation, hierarchy, data, forms, actions, states, and content.
Start With The Key Screens
You do not need to design every screen. Select 2–4 key screens that represent the software’s main workflows and interface patterns.
Each screen should show a different part of the concept: Navigation, hierarchy, data, forms, actions, states, and content.
Example
Example
Choose Screens From the Main Product Flow
The Dossier’s core workflow involved creating and managing documents.
For the Dossier UI concept, we selected key screens from workflow: Dashboard, AI Chatbot, Document Writing, Empty State
Together, they represented the product’s main workflow and important interface patterns.
Choose Screens From the Main Product Flow
The Dossier’s core workflow involved creating and managing documents. For the Dossier UI concept, we selected key screens from workflow: Dashboard, AI Chatbot, Document Writing, Empty State
Together, they represented the product’s main workflow and important interface patterns.
Empty States Must Be Included
Every UI Concept Should Show an Empty State
No matter which screens are selected, design at least one empty-state screen for each concept.
Empty states reveal how the interface behaves before data, content, or activity is available.
Empty States Must Be Included
Every UI Concept Should Show an Empty State
No matter which screens are selected, design at least one empty-state screen for each concept.
Empty states reveal how the interface behaves before data, content, or activity is available.
Choose Based On The Software
The Same Screens Will Not Work for Every Product
Screen Selection Depends on the Nature of the Software. Do not use the same dashboard, table, and form combination for every UI concept.
The screens should reflect how the particular product is actually used.
The Same Screens Will Not Work for Every Product
Screen Selection Depends on the Nature of the Software. Do not use the same dashboard, table, and form combination for every UI concept.
The screens should reflect how the particular product is actually used.
Screen Selection Checklist
The Final Check Before moving to next process
Have you understood:
Have two to four screens been selected?
Does at least one screen represent the core workflow?
Is the most common layout included?
Is at least one complex screen included?
Do the screens test different UI patterns?
Are the major components represented?
The Final Check Before moving to next process
Step 3 Takeaway
Select screens that represent the software , not just the presentation
Choose two to four screens that collectively demonstrate the software’s major workflows, layouts, components, information patterns, and states.
Step 3 Takeaway
Select screens that represent the software , not just the presentation
Choose two to four screens that collectively demonstrate the software’s major workflows, layouts, components, information patterns, and states.
Step 4 Create the Moodboards
Visualise the UI Direction
Now that the selected screens and intended brand personality are clear, the next step is to create a moodboard.
It helps visualise how the UI concept could look and feel before designing the screens.
Visualise the UI Direction
Now that the selected screens and intended brand personality are clear, the next step is to create a moodboard.
It helps visualise how the UI concept could look and feel before designing the screens.
What Is a Moodboard?
A mood board is a visual collage that communicates the intended look and feel of the software.
It brings together references for:
Colours,Typography, Images, Icons, Illustrations, Layouts, Other visual elements
What Is a Moodboard?
A mood board is a visual collage that communicates the intended look and feel of the software.
It brings together references for:
Colours,Typography, Images, Icons, Illustrations, Layouts, Other visual elements
Keep Every Reference Aligned With the Brand
The references selected for the moodboard should reflect the brand persona defined earlier.
For example, a professional and trustworthy product will require a different visual direction from a playful and approachable product.
Keep Every Reference Aligned With the Brand
The references selected for the moodboard should reflect the brand persona defined earlier.
For example, a professional and trustworthy product will require a different visual direction from a playful and approachable product.
Find Relevant Inspiration
Find Relevant Inspiration
Do Not Look Only at SaaS Products
Do Not Look Only at SaaS Products
Search Based on the Selected Screens
Search Based on the Selected Screens
Study Competitors
Study Competitors
Create a Recognisable Product Identity
The visual direction should feel distinct enough for users to associate the interface with the company.
For example, Swiggy is strongly associated with orange and its illustration style, while Zomato is recognised through its red visual identity.
Create a Recognisable Product Identity
The visual direction should feel distinct enough for users to associate the interface with the company.
For example, Swiggy is strongly associated with orange and its illustration style, while Zomato is recognised through its red visual identity.
Two Concepts Need Two Moodboards
Since we create two distinct UI concepts, we also create two different moodboards—one for each direction.
The two moodboards should explore different visual possibilities while remaining connected to the same brand.
Two Concepts Need Two Moodboards
Since we create two distinct UI concepts, we also create two different moodboards—one for each direction.
The two moodboards should explore different visual possibilities while remaining connected to the same brand.
Align With Stakeholders
Moodboards help designers and stakeholders understand the proposed visual directions before UI design begins.
They make it easier to confirm whether everyone is aligned on the intended look and feel.
Align With Stakeholders
Moodboards help designers and stakeholders understand the proposed visual directions before UI design begins.
They make it easier to confirm whether everyone is aligned on the intended look and feel.
Use the Approved Moodboard as a Reference
Once the visual direction is approved, use the moodboard as a reference while designing the UI concept.
It should guide the colours, typography, layouts, icons, illustrations, and overall visual style.
Use the Approved Moodboard as a Reference
Once the visual direction is approved, use the moodboard as a reference while designing the UI concept.
It should guide the colours, typography, layouts, icons, illustrations, and overall visual style.
Step-4 Takeaway
Brand
Persona
Step-4 Takeaway
Brand
Persona