There’s no need to reinvent the wheel if the wheel is doing a great job.&nbsp; For example:<ul><li> If you're unsure if an icon accurately represents a word, use the word in its place. </li><li>Stick to common colour patterns, such as a shade of red to warn/alert a user, or green to mark something complete. </li><li>When it comes to reading blocks of content, use the F-Shaped reading pattern. It means the most important content is placed at the top left corner.</li></ul>

Principle #4: When in doubt, use established design patterns.

<ol><li>Strategy: Here, different research methods help to grasp the user's needs and how your product fits within a business context.</li><li>Scope: Defining functional specifications and content requirements.</li><li>Structure: Ideas should start to form a structure. Information architecture focuses on how the information is organised. User flows map out how users will move through the app.</li><li>The skeleton plane tries to achieve the structure of an interface design and information design.</li><li>Surface: This plane strives for a great sensory experience and visual design. This is where UI designers do the bulk of their work.</li></ol>

UX can be understood in five primary planes

Good typography makes it easier to read. It consists of the following qualities:<ul><li>Legibility: Each letterform is distinguishable from one another.</li><li>Readability: It is dependent on how you manipulate a particular typeface.</li><li>Line length. If the line is too short, the reader's eye jumps from line to line, making it difficult to absorb information. The same is true if the line length is too long.</li><li>Never centre large blocks of copy. It is much easier to read text that is left-aligned.</li></ul>

I. Typography

White space helps with readability and comprehension. A study (LIN, 2004), found that good use of white space between paragraphs and in the left and right margin increases comprehension by almost 20%.&nbsp; A lot of people believe white space depends on 'taste' but we can use it intentionally to create a strong hierarchy.

II. White space (Negative Space)

Designers should always ask themselves:&nbsp;<ul><li>Why is this here?&nbsp;</li><li>Does this make sense?&nbsp;</li><li>What other possibilities can I explore?&nbsp;</li></ul>Great designers know how to explore the variety of possibilities of an interface layout and the potential tradeoffs.

UI Principle #1: Clarity comes first.

Visual hierarchy is the arrangement of elements in a way that implies relative importance. It’s the designer’s effort to guide the order in which the eyes perceive the information presented.&nbsp;The way we perceive the importance of information is affected by several factors:<ol><li>Typography</li><li>White space (negative space)</li><li>Colour</li></ol>

Principle #5: Use visual hierarchy.

Consistency and structure will make your users feel at home. Consistency is where the interface elements or the language is placed throughout the product. As a designer, consider how you maintain consistency throughout your app. You can design your app using a consistent grid system such as the 8-point grid system or maintain a consistent colour scheme and navigational elements across screens.

Principle #3: Consistency matters.

Warm colours come towards you, while cool colours fade into the background. For example, a warm red can be used to bring the call-to-action forward, while a cooler blue can be used to recede the navigation further into the background. The more colours there are, the less impact each individual colour will have.&nbsp;&nbsp;

III. Color

We've all used a website or app where we try to click a button and wonder if the system registered the click. Or put otherwise: every action needs a reaction. If you’re a web developer, for example, changing the: hover state of a button is a common form of feedback.&nbsp;

UI Principle #2: Provide clear, meaningful feedback.

<ul><li>At the most basic forms, UX design is what makes an interface useful.</li><li>UI design is what makes an interface beautiful, including a blend of visual hierarchy and interface elements.</li></ul>To help understand what makes a great interface, one should understand that the UI design is just one layer of the entire design process.

UI and UX

If you’ve done any kind of research about software design, you’ve probably heard of the terms “UI” and “UX”. But what separates UI from UX? At their most simple forms, UX design is what makes an…

UI and UX

Similar ideas to UI and UX

Digital (UI, UX, Sketch)

Motion Usability is not UI Animation

How to become a full stack developer?