Ui Design Fundamental

When you design UI for an app or a website, the first thing that the designer needs to determine the purpose of the product and the target audience. You should plan and calculate for your UI design.

Creativity does not exceed the limits of design goals.

Differentiate between customer and user: Put more on the role of the user than the customer

Identify the user who will use your app, identify the behavior, user characteristics.

So we need research:

What they need
Their behaviors
Their Preferences

What users perceive from UI

USER INTERFACE: (has 3 main elements)

Asthetics

You should reply this questions: Where/Why do you think that they are beautiful? You will see that each person has a different opinion. Aesthetics is only relative and bases on standards: layout, typography, color. So, a beautiful design is a design that …?

Aesthetics changes over time, mostly comes from trends, If you can’t create trends, just follow them. Some current trends:

Futuristic ornamentalism; Simplicity & Comfort; Extra Depth (with Semi-Flat Design); Custom Illustrations; Animations, Gifts & Cinemagraphs; Micro Interactions; Integrated Animations; Obnoxious Bright Gradients; Semi Realistic 3D; One Color 3D Design; 80s-90s Color Palettes & Patterns; Big Bold Typography; Creative Typography; Particle Background; Modular Blank; Split Page Design; Vibrant & Saturated Color Page; Mondrianism.

Content

When you design a website or an app, you have to reply the question: What is this site about? Because the user not only look at your website but also read content. One of the parts the user look most is landing page, the content should follow the items below:

Relevant & Useful
Accurate & Structure
Credible & Finable
Scannable & Simple.

Interaction

Interaction design is specifically a discipline which examines the interaction (via an interface) between a system and its user. It may also incorporate design focused on how information should be presented within such a system to enable the user to best understand that information though this is often considered to be the separate discipline of “information design” too.

Visibility & Simplicity

Visual hierarchy is the order in which a user processes information on a page; its function in user interface (UI) design is to allow users to understand information easily. By assigning different visual characteristics to sections of information (e.g., larger fonts for headings), a designer can influence what users will perceive as being further up in the hierarchy.

The visual characteristics that a designer can use to influence users’ perception of the information are:

Size: the larger the element, the more attention it will attract
Color: bright colors are more likely to draw attention over muted ones
Contrast: dramatically contrasted colors will catch the eye easily
Alignment: an element that breaks away from the alignment of others will attract more attention
Repetition: repeating styles can give the impression that content is related
Proximity: closely placed elements will also appear related
Whitespace: more space around elements will attract the eye toward them
Texture and style: richer textures will attract more attention than flat ones

When information design does not have a strong visual hierarchy, a user’s eye follows a predictable reading path. This path is culturally influenced, as it is connected to the standard reading direction of written text. In the Western world, two main left-to-right paths exist, which can be described as a Z and an F pattern.

A designer has the opportunity to use visual hierarchy to reinforce these natural paths, or deliberately use visual characteristics to break such patterns so as to draw the viewer’s attention to a focal point. Thus, the successful manipulation of this hierarchy empowers designers to lead users, quite literally, along a cleverly devised visual journey to a goal.

Readability is whether an extended amount of text—such as an article, book, web page - is easy to read

Legibility is whether a small burst of text such as a sign or a headline is instantly recognizable.

Differentiate dissimilar things

Communicate in user language

Predictability

Affordance Affordance describes all actions that are made physically possible by the properties of an object or an environment. A bottle screw cap affords twisting. A hinged door affords pushing or pulling. A staircase affords ascending or descending.

Don Norman introduced the term perceived affordance** **in his book named Psychology of Everyday Things to refer to the actions a user perceives to be possible, distinct from those which are actually possible.

Here is an underlined text. At first, you might perceive it as a hyperlink but when you actually try to click it; it does not act like one. In this very case, it does not work like a hyperlink. It’s an example of how perceived and actual affordances could be distinct.

Both actual and perceived affordances must be considered in design.

Desired actions cannot be carried out if the object does not afford it, and afforded actions might not be carried out if the user does not perceive they are possible.

A user’s perception and understanding of affordances might vary according to their ability, goals, beliefs, context and past experiences. A bottle screw cap may be a mystery to a person who has not encountered one before. A staircase may afford an able-bodied person to ascend to a higher floor, but a person with poor mobility can not afford the same action.

Affordances can be deliberately constrained to enable only the correct or desired actions. A bottle screw cap cannot be tightened further when the bottle is sealed. A door with a plate instead of a handle cannot be pulled. A car steering wheel won’t turn any further when the wheels themselves are at the limit of their movement.

In the physical world, the ridges or dots of a bottle cap provides a high-grip surface, suggesting some friction should be applied. A flat plate on a door suggests the door can be pushed in that place. The steering wheel connected to the top of steering column suggests it will turn around that point.

Mapping The following example will show how the individual bricks of the content type “event” can be mapped to different shapes of a “teaser” UI component in the target system (here: a website with desktop-like presentation). The teaser in the example is simplified and consists of four different text bricks, an image and metadata. (It’s the same for any other target UI component as with the teaser example.)

Same content and different presentation: The three teaser variants extracted and isolated from the website with the individual UI bricks (except the image all exemplary available information is outputted textually).

The generic teaser variants schematized without content with the individual content bricks. The small teaser shows most information in this case and uses all exemplary content bricks of the content type “events”.

Summarized: One content type can be displayed in various shapes when the generic structure basically fits to the the generic UI structure. The UI components have just to be able to display or output the relevant bricks of the content type. The other way round it’s the same. Different content types can be displayed similarly (see following example).

Different content and same presentation: The basically different content types “event” and “article” are structurally different, but generically identical. Thus the bricks of both content types can be mapped to a generic teaser component that can display these bricks. In short: Different content types can be displayed identically. Which also means that different UI types can be served by content bricks from the same content type (see above).

Conclusion:

Intentional Design: Interface without User is not User Interface

3 pillars of UI Design:

Aesthetics
Content
Interaction.