UI design guide

UI design guideline


This 6-step design guideline was made to help creating engaging interface and to manage a large scale product design project. The sessions are focused on recognising and applying the principles during the UI design process, and discussing the most frequent cases you might meet when crafting a product interface intended to engage users.

UI Design Process - Practical Design Guideline Preview


For the practices, we'll be using a poorly designed sample UI (a visually still good looking one, to make it clear that engagement is not in the overall visual but in the detailed element design). I'll explain what is wrong with the discussed elements and correct the design. The UI design principles applied along the way come from the field of behavioral psychology and material design (referral links provided in the transcripts), intentionally avoiding industry-specific alterations.

By the end of 6th session, there will be clarity around how to engineer an interface that communicates the functions clearly and navigates the users intuitively.

6 design sessions
Visual examples
Reference links
Audio transcript


I’ve made the sample UI downloadable below, and encourage everyone to repeat the corrections using their own design decisions and develop their own design process.

I’ve made the sample UI downloadable below, and encourage readers to repeat the corrections using their own design decisions in order to practice systematic approach and develop their own design process.

~ 20 min. per session 

+ 90 min. recreating the sample UI with own thinking process 

+ lifelong mastering of details 


Sample UI for the UI Design Process mini-class


UI Design Process Preview | The Elements and Principles of Design


As a design lead, I’ve been working on applications and web platforms, mentoring the design work for quite some time now. I’ve often made a note for myself along the way when I noticed certain areas causing difficulties. From this list, an interesting pattern emerged. The pattern showed me that the reason behind most of the confusion, both on the user’s side and on the designer’s side, is that the UI design principles weren't recognised and was offen misinterpreted during the interface design process.

I’ve created this UI design guideline to pull together the elements and principles of product design that are crucial to apply to create an engaging interface. Also, to describe how to manage a large-scale product design project without losing the coherence between the elements of the design system.


If you need to start from scratch, I can recommend CareerFoundry's dual mentorship model, that ensures that you get all the support you need. You’ll have both a tutor and a mentor (like myself)—a UI industry expert who gives detailed written, video, and on-call feedback on your portfolio pieces. The program offers job guarantee in the metropolitan areas. 


Should you look for a course with an academic level syllabus and weekly 1on1 mentorship, I can confidently recommend Sprigboard's guided learning experience. Besides the theoretical background, you also complete 4 experimental projects and you'll be matched with a real company to complete a 40-hour industry design project


For those who prefer bit sized knowledge intake, the Interaction Design Foundation offers very high quality materials, I myself refer to a lot during my mentoring. Their membership program gives access to a huge pool of theoretical and practical knowledge from the psychology of design to reusable templates. 


All rights reserved © 2022 Julianna Sudi