Sameer Rana
mohammed.imtiaz-ahmed@student.uni-halle.de

1. Introduction

UI and UX Design is an important part of creating applications, especially on the web. A well-designed website or app presents the user with the necessary functionality in a clear and easy to understand manner and helps improve their experience.

People are attracted to visually appealing and pleasing things, and this should be kept in mind while designing applications.

It is essential knowledge for any developer to know at least the fundamental concepts of designing user-friendly, responsive and satisfactory experiences, since anything they build is ultimately meant for the user and has to meet their expectations of quality.

There are several resources and guides which outline the key elements involved in UI/UX design, but first we must understand the difference between subjectivity and objectivity.

1.1. Subjectivity vs Objectivity

Subjectivity is based on or influenced by the personal feelings, tastes and opinions of people.

Objectivity on the other hand is not influenced by personal feelings and is more about the consideration, evaluation and representation of facts.

Good design involves both subjectivity and objectivity. However, it is good to start with the core objective design principles first and implement them, as that lays a solid foundation for us to then develop our own subjective preferences and styles later on.

1.2. Design Roles

User Researcher: Understands user behaviours & needs, gathers and analyses user data, conducts surveys, interviews and takes part in usability testing. Guide to learning the user

UX Designer: Responsible for the overall feel of the product, focuses on how the users will interact with the product, uses wireframing and prototyping tools to create roadmaps for other designers and developers.

UI Designer: Focuses on designing the user interface. This includes all the visual elements like the layout, typography, colours etc. Takes the requirements and learnings from User Researchers and UX Designers and turns them into detailed, interactive mockups for developers to implement.

Testers: Tests the websites and apps for usability and effectiveness after they’re created. This includes finding out what grabs users’ attention, where they spend their time, and what they actually do on the website/app. There are several other parameters involved in this process such as A/B testing, heatmaps and behaviour analytics. Tools they use include: Optimizely (A/B Testing) and Hotjar (Heatmap analytics).

2. Resources

2.1. Books & Websites for reference and knowledge

Core aspects of graphic design theory

Web styles

Book on design

Google’s design philosophy

Apple’s design guidelines

Usability heuristics

2.2. Courses, Tutorials and Guides

UI/UX

Figma

UX Design Roadmap

Design System Roadmap

2.3. Some Cool Tools

Colour Palettes

Colour Wheel

Daily Design Challenges

UI Design Exercises

Contrast & Font tester

3. UI Fundamentals

3.1. Whitespace

Also referred to as „negative space“, it is the empty space between the elements in the user interface. Affects visibility and cleanliness. The primary properties used to define whitespace in HTML & CSS are padding and margin for the space between the elements on the page and line height for space between lines text.

Abbildung 1: Adding whitespace can make a design a lot more clear and effective — **Abbildung 1:** Adding whitespace can make a design a lot more clear and effective

3.2. Colour

Colour is usually the first thing a user notices because eyes tend to be instantly drawn to colour. It is thus extremely important to choose and use the right ones in a design.

Colour Psychology and Colour Theory deals with how each colour expresses a certain meaning to a certain group of people.

Abbildung 2: An example of some meanings associated with each colour — **Abbildung 2:** An example of some meanings associated with each colour

Why is this important? Depending on the company the UI is for and the target audience, choosing the right colours can make a major difference in communicating the purpose and idea of the application or website.

We want to elicit the right emotions in the target demographic and project the right images, tell the right stories and convey the right messages.

Abbildung 3: Simply flipping the colours used between these two designs instantly expresses the type of activity better and fits its mood and aesthetic more — **Abbildung 3:** Simply flipping the colours used between these two designs instantly expresses the type of activity better and fits its mood and aesthetic more

Choosing the right colour palette must involve a careful consideration of this fact, what values and emotions do we want to express and which colours work best for that.

We should also consider complementary and analogous colours to see which colours go together and which don’t and which create good or bad contrast.

Abbildung 4: Analagous colours: Two colours that are right next to one another on the colour wheel. Designs using these colours look harmonious and are good for nav bars etc — **Abbildung 4:** Analagous colours: Two colours that are right next to one another on the colour wheel. Designs using these colours look harmonious and are good for nav bars etc

Abbildung 5: Complementary colours: Choosing colours from the opposite ends of the wheel. These designs stand out much more and provide great contrast and pop. Works good for logos — **Abbildung 5:** Complementary colours: Choosing colours from the opposite ends of the wheel. These designs stand out much more and provide great contrast and pop. Works good for logos

3.3. Contrast

Contrast is the difference in visual properties like brightness and colour between different elements like a button and a background, or between the text on a page and its background. Bad contrast makes things hard to see and causes irritation for the users.

Contrast of elements on the web is guided by the WCAG (Web Content Accessibility Guidelines). They set out clear contrast ratios that have to be achieved by a design. This is also to make sure that those with visual impairments are able to clearly make out the different elements on a page.

There are several tools one can use to make sure the elements they are designing achieve these ratios. Browser extensions, plugins in design apps, websites etc. (https://colourcontrast.cc/)

Abbildung 6: Having good contrast makes elements easily visible and creates good separation between the foreground and the background — **Abbildung 6:** Having good contrast makes elements easily visible and creates good separation between the foreground and the background

3.4. Scale

The size, how big or small something is, of every UI element has to be carefully considered. Bad scale can cause elements to be hard to see, or might assign incorrect level of importance to elements (by either highlighting or undermining them)

Abbildung 7: Example of bad scaling: The cards are not taking up all the space on the page and there is not much difference between the headings and the descriptions of the colours — **Abbildung 7:** Example of bad scaling: The cards are not taking up all the space on the page and there is not much difference between the headings and the descriptions of the colours

Abbildung 8: Good scaling: The cards now are more suitably sized according to the layout, and the headings are more emphasized and stand out much more, giving an overall better look to the page — **Abbildung 8:** Good scaling: The cards now are more suitably sized according to the layout, and the headings are more emphasized and stand out much more, giving an overall better look to the page

Another aspect of scale which relates to text and user interface design is how wide or narrow written text is on a page. Having the right size allows better reading comprehension for the user.

Abbildung 9: Breaking text over multiple lines when one starts to get too wide helps maintain readability — **Abbildung 9:** Breaking text over multiple lines when one starts to get too wide helps maintain readability

3.5. Alignment

Alignment is the process of ensuring that every element is positioned correctly in relation to other elements.

Abbildung 10: Position of elements in relation to their neighbours — **Abbildung 10:** Position of elements in relation to their neighbours

Abbildung 11: Good, conscious alignment can make the design look a lot more organised and structured — **Abbildung 11:** Good, conscious alignment can make the design look a lot more organised and structured

Alignment is usually achieved with the help of an invisible grid. If we imagine all elements on a page to have their own x and y-axis, placing elements on a common axis can improve structure.

Abbildung 12: Elements with misaligned axes — **Abbildung 12:** Elements with misaligned axes

We could either centre align all elements or align all other elements to the left most axis (of the first element) in order to achieve a common alignment for all.

Abbildung 13: Aligned to a common left axis — **Abbildung 13:** Aligned to a common left axis

Abbildung 14: Simply changing the alignment and making it more consistent can do wonders for design — **Abbildung 14:** Simply changing the alignment and making it more consistent can do wonders for design

3.6. Typography

One of the most important and wide-ranging elements of UI design. Good typography requires a good understanding of other design fundamentals and some typography specific considerations.

These include: Font choices, font sizes (scale), letter spacing & line height, font styles (weight, italics etc.), colour & contrast, visual hierarchy and alignment.

This is a very large field in itself, and there are several things one can focus on. A good starting tip for example is to not use more than two font families in a design.

Abbildung 15: Prevent clutter and chaos by using only a limited number of fonts (ideally 2) — **Abbildung 15:** Prevent clutter and chaos by using only a limited number of fonts (ideally 2)

Tools exist which allow pairing and comparing different fonts to see how they work together (https://www.pairandcompare.net/). Fonts express the style and feel of the page and are a very important part of the design concept of any app. (No Comic Sans on a bank website!)

Abbildung 16: There is a right place and time for every font… except Comic Sans, never use Comic Sans — **Abbildung 16:** There is a right place and time for every font… except Comic Sans, never use Comic Sans

More fonts

Two big font families are Serif and Sans-Serif with subfamilies within them like Old Style, Transitional, Modern and Slab-Serif for Serif and Grotesque, Neo-grotesque, Humanist and Geometric for Sans-Serif.

Abbildung 17: Bad typography: Too many different fonts, font sizes all over the place causing bad visual hierarchy (more below) — **Abbildung 17:** Bad typography: Too many different fonts, font sizes all over the place causing bad visual hierarchy (more below)

Abbildung 18: Some fixes applied: All elements using the same font (Montserrat), better font sizes to highlight the important sections first and using colour and contrast to make the author names of the testimonials visible but not too attention grabbing — **Abbildung 18:** Some fixes applied: All elements using the same font (Montserrat), better font sizes to highlight the important sections first and using colour and contrast to make the author names of the testimonials visible but not too attention grabbing

3.7. Visual Hierarchy

Every element on a user interface has a level of importance. Some are more important than the others. Visual hierarchy is the definition of how this importance is established.

Abbildung 19: Effectively managing and directing user ATTENTION — **Abbildung 19:** Effectively managing and directing user ATTENTION

This done by using all the other design fundamentals we learnt about above.

Abbildung 20: All elements have equal importance, no sense of visual hierarchy — **Abbildung 20:** All elements have equal importance, no sense of visual hierarchy

Abbildung 21: Using whitespace and alignment to create visual hierarchy. The eye goes to the leftmost square first — **Abbildung 21:** Using whitespace and alignment to create visual hierarchy. The eye goes to the leftmost square first

Abbildung 22: Using contrast to establish visual hierarchy. The eye goes to the highlighted square first — **Abbildung 22:** Using contrast to establish visual hierarchy. The eye goes to the highlighted square first

Abbildung 23: Using colour to create visual hierarchy. We assign some degree of higher importance to the yellow square — **Abbildung 23:** Using colour to create visual hierarchy. We assign some degree of higher importance to the yellow square

Abbildung 24: Using scale to establish visual hierarchy — **Abbildung 24:** Using scale to establish visual hierarchy

Abbildung 25: This submit form has good design fundamentals like whitespace, contrast and colour, but it is lacking in visual hierarchy — **Abbildung 25:** This submit form has good design fundamentals like whitespace, contrast and colour, but it is lacking in visual hierarchy

Abbildung 26: Using all the design fundamentals to really create a strong visual hierarchy for the elements based on what is important, what is the user supposed to look at and pay attention to first, highlighting the call to action for the submit button and creating a clear separation of sections — **Abbildung 26:** Using all the design fundamentals to really create a strong visual hierarchy for the elements based on what is important, what is the user supposed to look at and pay attention to first, highlighting the call to action for the submit button and creating a clear separation of sections

4. A note on User Experience (UX) Design

Design sometimes can come down to what we establish as looking good and what we want the user to like and accept. However, the way a user actually uses a website or app or tool is oftentimes completely different to the pre laid down design.

Abbildung 27: The difference between actual usage and design conceptions — **Abbildung 27:** The difference between actual usage and design conceptions

Good user experience is meant to be invisible. It is meant to be unobtrusive, simple, and make the user feel like they have the freedom and the ability to just do what they wish to do and achieve their goals.

4.1. Simplicity

Keeping things simple is more often than not the better approach and prevents overwhelming the user. There are interesting approaches to how different cultures and countries approach this. Look at these two examples:

Japanese web design

Swiss web design

(Bonus: German web design)

4.2. Consistency

Keep designs consistent between pages. Having inconsistent elements like different styles or layouts for nav bars can confuse the user and cause frustration when they go from one part of the website to another.

4.3. Reading Patterns

There have been studies done that track users eyes as they read pages. Aligning and laying out text in the right way can increase the amount of information the user actually takes in from the website.

Abbildung 28: The F pattern. Eye starts in the top left corner and tracks to the right and goes down the left border — **Abbildung 28:** The F pattern. Eye starts in the top left corner and tracks to the right and goes down the left border

Abbildung 30: An alternative is the Z pattern. The eye goes from the left to right and zigzags all the way down to the left side. Websites with video content or more sparse elements can benefit from this layout — **Abbildung 30:** An alternative is the Z pattern. The eye goes from the left to right and zigzags all the way down to the left side. Websites with video content or more sparse elements can benefit from this layout

Abbildung 31: Perhaps the most popular implementation of this layout. The Facebook sign-in page — **Abbildung 31:** Perhaps the most popular implementation of this layout. The Facebook sign-in page

4.4. All Platform Design (Mobile First)

It is very important to start the design with a focus on users on mobile devices. Improperly scaled and unresponsive websites provide an unusable experience for users

Abbildung 32: Mashing a wide desktop layout into a smaller mobile screen — **Abbildung 32:** Mashing a wide desktop layout into a smaller mobile screen

On the other hand, websites which were designed purely for mobile should not look the same on desktops. This is also an example of bad design and makes for a horrible user experience.

Abbildung 33: Facebook is this time in the bad example category as their redesign brings the mobile layout to the desktop, and it simply does not work for wide screens — **Abbildung 33:** Facebook is this time in the bad example category as their redesign brings the mobile layout to the desktop, and it simply does not work for wide screens

4.5. Don’t employ Dark Patterns

Dark patterns are when designers use these UI fundamentals to direct users to click on ads or perform other actions that they don’t want.

Like switching the position “Cancel” or “Close” buttons with the “OK” or “Next” buttons instead of the standard, usual positions, or using visual hierarchy to make the cancel button more prominent.

This is done to make the user accidentally cancel an action that they wanted to do if the action is not in the company’s best interests and profits. Like cancelling subscriptions.

Abbildung 34: Ryanair hides the option to not buy extra travel insurance by putting it inside a long list of country names sorted alphabetically. This is intentional bad design taking advantage of users’ lack of attention and patience — **Abbildung 34:** Ryanair hides the option to not buy extra travel insurance by putting it inside a long list of country names sorted alphabetically. This is intentional bad design taking advantage of users’ lack of attention and patience

5. Designing a Frontend: Wireframes, Mockups & Prototypes

5.1. What Do They Mean?

5.1.1. Wireframe

Wireframes are the blueprints (Skeletons) of the design. They involve rough sketches of where everything will go on the page.

There are no colours or fancy designs yet and instead, just boxes and lines to say where everything is to be positioned. This could mean simply a box for the logo, a rectangle for the navigation bar, squares for images, lines for text etc.

It is usually the first step towards figuring out the overall layout and structure of the application.

Abbildung 35: Simple wireframe structure — **Abbildung 35:** Simple wireframe structure

5.1.2. Mockup

Mockups are when we fill in the wireframes from before with graphics assets. They are a detailed visualisation of what the app or site will look like when all components like the branding, colours, logos, fonts, images and spacing have been added.

Mockups are still static, they don’t have any interactivity yet.

Abbildung 36: Mockups for a music player app — **Abbildung 36:** Mockups for a music player app

5.1.3. Prototype

Prototypes are clickable versions of the mockups, where buttons work, and you can click from page to page to see how things feel and should work.

They are used for testing the interactions, flows and user experiences before actually implementing it in code and programming the app.

This is a simulation of how the app or website will behave created by connecting together different layouts or mockups with triggers, animations and transitions.

Abbildung 37: Chaining views together to create a navigable flow — **Abbildung 37:** Chaining views together to create a navigable flow

5.2. How To Make Them?

Penpot, Lunacy, Figma, Adobe XD, Sketch, Balsamiq

Inkscape, Adobe Illustrator, Adobe Photoshop, Canva

5.3. What Does The Workflow Look Like?

Wireframe ➡ Mockup ➡ Prototype ➡ Code implementation (HTML markup + CSS styles + JS functionality or using Frontend frameworks like React, Angular, Vue etc.)

5.4. Some Examples Of Good And Bad Designs

Before

After

Spotify Redesign

6. Accessibility

Web Content Accessibility Guidelines (WCAG)

Accessibility checklist

Microsoft Inclusive Design

Design Justice Network Principles

Abbildung 38: AFA Accessibility Review Google Lighthouse — **Abbildung 38:** AFA Accessibility Review Google Lighthouse

Abbildung 39: Uni-Halle Accessibility Score Google Lighthouse — **Abbildung 39:** Uni-Halle Accessibility Score Google Lighthouse

Abbildung 40: W3.org Accessibility Review Google Lighthouse — **Abbildung 40:** W3.org Accessibility Review Google Lighthouse

7. Applying it all to our Projektseminar

The steps we have to take in order to achieve a successful design implementation for our app are as follows:

Research our contractors ⇾ AfA, Uni Halle, Stadt Zeitz, Stadtarchiv and their design philosophies, brand colours etc. (+ vibes)

Understand our target demographic and the mood we wish to convey with our application such as for example: friendly, approachable, kid-friendly, straightforward, easy to use etc.

Check if we must abide by any set guidelines like barrier-free accessibility requirements, sign language support etc.

Choose the right colour palette and the right fonts.

Make and gather graphic assets that work with the chosen design.

Create a prototype of the UI, and test it with the target demographic / contract providers.

Implement the design ideas and choices to our application during development and review it for usability and effectiveness throughout the process. We can automate some level of this testing using tools like google lighthouse

Conduct user surveys and interviews to see if our design communicates our intentions as wish and meets the expectations of our users.

UI/UX Design Guide