User Interface That Works

If you like this presentation – show it...

Slide 0

Slide 1

Slide 2

User Interface Design

Slide 3

USER INTERFACE DESIGN What is design? Design is a method of problem solving. The main goal of design is offering the product functional, technical, aesthetic, ergonomic and economic qualities, in order to make it accepted by the consumer for a certain period of time. The essence of design is, in fact, creating efficient products.

Slide 4

USER INTERFACE DESIGN What is good design? DIETER RAMS Dieter Rams is a German industrial designer closely associated with the consumer products company Braun and functionalist industrial design.

Slide 5

USER INTERFACE DESIGN Types of design GRAPHIC DESIGN Graphic designers work with graphical images, whether they be illustrations, typography, or images, and on a variety of media including print and web. INTERACTION DESIGN Interaction design is heavily focused on satisfying the needs and desires of the people who will use the product. INDUSTRIAL DESIGN Industrial designers create physical products designated for mass-consumption by millions of people. USER INTERFACE DESIGN (UI) USER EXPERIENCE DESIGN (UX)

Slide 6

USER INTERFACE DESIGN User Interface User Interface (UI) design is the design of software or websites with the focus on the user's experience and interaction. The goal of user interface design is to make the user's interaction as simple and efficient as possible.

Slide 7


Slide 8

Elements of Design LINE The link between two points. Linear marks made with a pen or brush or the edge created when two shapes meet.

Slide 9

Elements of Design SHAPE • Self contained defined area of geometric, or organic form. • Regular surfaces have geometric shapes (circle, square, rectangle, triangle etc.)

Slide 10

Elements of Design DIRECTION Horizontal suggests calmness, stability and tranquility. Vertical gives a feeling of balance. Oblique - growth, descendance etc.

Slide 11

Elements of Design SIZE Relationship of the area occupied by one shape to that of another.

Slide 12

Elements of Design TEXTURE The surface quality of a shape - rought, smooth, soft, hard, glossy.

Slide 13

Elements of Design COLOR The light reflected off objects. • RGB • HEX • CMYK • HSB

Slide 14


Slide 15

Principles BALANCE Balance provides stability and structure to a design. • Symmetric balance (through reflection, translation, rotation) • Asymmetric balance • Optic balance (formal, informal)

Slide 16

Principles PROXIMITY Relationship between elements. It provides a focal point.

Slide 17

Principles ALIGNMENT Aligning elements allows them to create a visual connection with each other.

Slide 18

Principles REPETITION Helps create association and consistency.

Slide 19

Principles CONTRAST Juxtaposition of opposing elements. It allows us to emphasize or highlight key elements in your design.

Slide 20

Principles SPACE The distance or area between, around, above, below, or within elements.

Slide 21

Visual weight and depth

Slide 22

Visual Weight and Depth VISUAL WEIGHT • Some things looks ”heavier” than others in a layout. They draw your attention more easily. • Visual weight helps the user notice the important things. • Visual weight is relative.

Slide 23

Visual Weight and Depth CONTRAST • The difference between light things and dark things is called contrast. • Assign a bigger contrast to the essential elements.

Slide 24

Visual Weight and Depth DEPTH • We notice things that are close to use more than things that are far away. • Bigger elements are perceived to be closer. • Blur effects or shadows it just matkes the perception of depth more realistic. • More important object have to be bigger, in order to create a visual hierarchy the user will follow.

Slide 25


Slide 26


Slide 27

Typography Typography represents the art and the process of arranging text for different media environments. Typography is made up of characters, which create the font. Characters - letters, numbers, punctuation marks. By learning the history of typography, the anatomy of characters, as well as the classification of fonts - we become aware of even the slightest differences between fonts.

Slide 28

Typography Anatomy

Slide 29

Typography Anatomy baseline - the line on which the letter is based, namely the corresponding horizontal serifs. meanline - the imaginary line above the minuscules. This height is extended from the baseline until the meanline and is marked with X. ascender - the height of the superior extension of small letters, i.e. the part above the meanline of the upper and lower case letters. descender - the height of the inferior extension of small letters, i.e. the part below the baseline of the lower case letters. ligatures - 2 or more characters connected in a single one. A typographic subtlety compensating for the unaesthetic arrangement of some letter combination, such as: fi ff,fi, fl, ffi, ffl. stress - the axis of the rounded letters.

Slide 30

Typography Hierarchy Take a good look at the size of the font you’re using. Have a break before deciding which one to use. Plan, keep the consistency, make sure it blends well with the other sizes.

Slide 31

Typography Emphasizing text Sometimes we need to emphasize some words or some paragraphs in a text. How do we do that?

Slide 32

Typography Combining fonts • Goal • How many fonts should I use? • What is my content like? • How can I make a good combination? • Accordance • Contrast • Conflict http://fontpair.co/ https://www.google.com/fonts http://100daysoffonts.com/ http://femmebot.github.io/google-type/ http://designmodo.com/great-font-combinations/ http://webtypography.net/toc

Slide 33


Slide 34

Colors Lucrul cu culorile

Slide 35

Colors Working with colors Colors can be “loud” or “quiet”.

Slide 36

Colors Working with colors Wireframes in black-and-white. Focus on the function.

Slide 37

Colors Working with colors Sometimes color is function.

Slide 38

Colors Working with color Use colors when and where they are relevant.

Slide 39

Colors Color psychology • Choose one color • Use color to create significance. • Use the same shade everywhere.

Slide 40

Repetition & Patterns Whenever something in nature happens over and over, we will quickly notice.

Slide 41

Repetition & Patterns Repetition & Patterns We don’t see 6 individual cats, we see a group of cats. Typically, we analyse them from right to left. If one of them stands out, it immediately draws attention.

Slide 42

Repetition & Patterns Proximity We see a lot of relationships, because of the way they are aligned. The closeness or distance between two objects creates a feeling of those objects being related or unrelated. The cats from each group seem “together” like a team or a family.

Slide 43


Slide 44

Functional Layout Design

Slide 45

Layout Composition basics There has been noticed a close relationship between art and mathematics. But what would be the formulas for beauty? Philosophers, mathematicians, architects and artists have tried to answer this question for a long time.

Slide 46

Layout Golden ratio The Golden Section (sectio aurea in latin), notată cu litera greacă Φ (uppercase phi) sau și cu φ (lowercase phi), is the first irrational number discovered and defined in history. It’s approximately 1,618033 and can be found in the most surprising situations.

Slide 47

Layout Golden Ratio The Golden Section can be found everywhere: in nature, mathematics, architecture, body proportions, arts, design.

Slide 48

Layout Rule of thirds Used mostly in photography, has been imported to web design. It’s simpler and more widely used: you just divide the work space in 9 equal parts (3x3). The eye will be drawn to the intersection of the lines.

Slide 49

Layout Balance Good websites arrange graphical elements in such a way that the page is balanced. This doesn’t mean that the sides mirror each other - but that they have the same visual weight. A page looks symmetrical when graphical elements look similar. A page is asymmetrical when the elements are of different sizes, but they have the same visual weight.

Slide 50

Layout White space White space is the area not covered by text or images, even if it’s not white. Covering every inch of the page is a mistake. White space calms and directs the eye towards the content, increasing its value.

Slide 51

Layout Hierarchy Some links, text or images on the web page will be more important than others, and a good design highlights them. The elements that require more attention should be noticed first and guide the eye on the page. A bigger text can draw attention in the first place to a particular image or text.

Slide 52

Layout Color • You don’t need more than 2 or 3 core colors for a good design. • Choose colors that work well together in creating the required atmosphere for the website. • Some colors are more flashy than others.

Slide 53

Layout Depth The typical web page looks like a single, bi-dimensional surface, but it doesn’t always have to be like that. Adding a 3rd dimension grants a bigger importance to the graphical units, depending on the proximity to the user or the overlapping over other elements.

Slide 54

Layout Simplicity • If you continue adding elements just because they look good, you will overload the design. • A complex design, or too many animations distract and bother the user if there is not enough white space to offset them. • Use flashy elements only if they have a specific goal, not just because you can.

Slide 55

Layout The fold Some of the most popular (but wrong) old school concepts is “the fold”, which represents the top part of the website, seen when opening the web page. The idea of this theory is placing all the important information in this area. Still, recent studies show that if the user will be interested by what he sees when opening the website, he will scroll down in order to find out more.

Slide 56

Layout Images Images can direct the gaze of the viewer. Especially images with people get a lot of attention and create empathy, if they’re well used. The gaze of person in the picture will direct the gaze of the user as well. The more emotion will be in the picture, the more interested will the viewer be.

Slide 57

Layout Images According to a study, people have the tendency to look where they’re guided by the gaze of somebody else.

Slide 58

Layout Title Our eyes are attracted by text contrasting with the rest of the background. That’s why titles will capture the attention of the viewers. However, don’t overuse with the use of large text. If the title has no connection with the text that follows, it’s better to use other attentiondrawing method.

Slide 59

Layout Call-to-action CTA is a short text, usually located on a button - and requesting an action from the user.

Slide 60

Layout Call-to-action The general formula for a good CTA: Verb + Benefit + Urgency or Place

Slide 61

Layout Call-to-action

Slide 62

Layout Instructions • Instructions have to be short and direct • Tell the user exactly what he has to do • Express yourself clearly

Slide 63

Layout Primary and secondary buttons In general, there are only two styles of buttons used - because the majority of them are from this two basic categories: • Primary actions accomplishing the primary goal of the website or application. • Secondary actions not performing on the primary goals.

Slide 64


Slide 65

Layout Delete Cancel

Slide 66

Layout Labels Use the most common, easy and simple versions for tags and labels.

Slide 67


Slide 68

Slide 69

Tools & Workflow What is your primary tool for interface design?

Slide 70

Workflow Design Workflow

Slide 71

Workflow Sketches

Slide 72

Workflow Wireframes

Slide 73

Workflow Paper cutouts

Slide 74

Workflow Stenciling

Slide 75

Workflow Wireframing software

Slide 76

Workflow Graphic Design Software

Slide 77

Workflow Presentation Software

Slide 78

Workflow Fidelity Levels Block Diagrams Grey Boxes HF Text HF Color HF Media HF Interactions

Slide 79

Workflow Mockups Mockups are the models of web design and one of the most effective mediums for communicating visual design. “Wireframes are skeleton. Mockups are skin.”

Slide 80

Workflow Prototypes In addition to the information structure and visualizations of the previous two phases, the prototype introduces more depth to the UI, allowing users to: • experience the actual content • interact with the UI in a way similar to the final product • predict and solve usability problems before further development PROTOTYPES HELPS YOU • work through a design • communicate concepts • sell an idea • gauge technical feasibility • test usability

Slide 81

Workflow Prototype Tools Presentation Software Coded (HTML) UXPin Invision MockFlow JustInMind Axure Omnigraffle JustProto Flinto Marvel Pixate

Slide 82

Layout Atomic Design

Slide 83

Layout Summary SKETCHING – Quick brainstorming on paper. WIREFRAMING – Establishing the skeleton with rectangles and rough shapes. MOCKUPS – Injecting details in wireframes, such as colors, typography, photos and visual design elements. PROTOTYPING – Adding interaction to mockups, by linking pages and page elements, adding animation or interaction for advanced prototyping. DEVELOPMENT – Converting the prototype into the final product via programming.

Slide 84


Slide 85

Web User Interface Patterns

Slide 86

http://ui-patterns. com/patterns

Slide 87


Slide 88

Slide 89


Slide 90


Slide 91


Slide 92


Slide 93


Slide 94


Slide 95


Slide 96


Slide 97


Slide 98


Slide 99

Slide 100

Slide 101

Slide 102

Slide 103

Slide 104

Slide 105

Slide 106

Slide 107

Slide 108

Slide 109

UXPin Mobile UI Design Patterns

Slide 110

Android Patterns https://www.google. com/design/spec/patterns/

Slide 111

iOS Patterns https://developer.apple. com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

Slide 112

It’s Not UX vs. UI It’s UX & UI In the web context, let’s say that the designer decided to use the drag-and-drop option for organising songs in a list. This is UI. Now, let’s say that the users are choosing this website over the competitor ones, because they like how easy and fast is to organize their favourite music. This is UX.

Slide 113

Tips & Techniques 1. Keep the interface as simple as possible. 2. Create coherence and use well-established patterns and elements. 3. Follow a goal when creating a page interface.   4. Use color and texture strategically. 5. Use the rules of typography for creating hierarchy and readability. 6. Make sure that the system notifies the user about what happens. 7. Think about implicit values.

Slide 114

Sources USER INTERFACE BASICS 1. http://www.telegraph.co.uk/technology/apple/8555503/Dieter-Rams-Apple-has-achieved-something-I-never-did.html 2. https://www.vitsoe.com/gb/about/good-design 3. http://gizmodo.com/343641/1960s-braun-products-hold-the-secrets-to-apples-future 4. https://en.wikipedia.org/wiki/Interaction_design 5. https://en.wikipedia.org/wiki/User_interface_design 6. https://en.wikipedia.org/wiki/User_experience_design 7. http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/

Slide 115

Typography 1. http://designmodo.com/web-typography/ 2. http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706 3. http://freelancefolder.com/typography-essentials-a-getting-started-guide/ 4. http://www.creativebloq.com/typography/better-web-typography-few-simple-steps-5132803 5. https://ia.net/know-how/the-web-is-all-about-typography-period 6. http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web--webdesign-15 7. http://www.merttol.com/articles/web/checklist-for-better-web-typography.html 8. http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-preface Tools and Workflow 1. http://studio.uxpin.com/ebooks/guide-to-mockups/?_ga=1.244361089.58065319.1445246311 2. http://studio.uxpin.com/ebooks/guide-to-prototyping/?_ga=1.46579747.58065319.1445246311 3. http://studio.uxpin.com/ebooks/web-ui-design-best-practices/?_ga=1.46579747.58065319.1445246311 4. http://studio.uxpin.com/ebooks/mobile-design-patterns/?_ga=1.46579747.58065319.1445246311 5. http://studio.uxpin.com/ebooks/guide-to-wireframing/?_ga=1.46579747.58065319.1445246311 6. http://tools.subtraction.com/interface-design.html

Slide 116

Colors 1. http://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/ 2. http://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/ 3. http://thenextweb.com/dd/2011/12/30/9-places-to-get-inspiration-for-your-websites-color/ 4. “Five Simple Steps - A Practical Guide to Designing For the Web” Book Layout 1. http://ui-patterns.com/patterns 2. http://smallbusiness.chron.com/rules-composition-design-art-graphics-30554.html 3. https://mockupstogo.mybalsamiq.com/projects/web/grid 4. https://docs.google.com/file/d/0Bx1232tOvCsfUGdXYmZiTGxHT0U/edit 5. https://en.wikipedia.org/wiki/Golden_ratio 6. https://en.wikipedia.org/wiki/Rule_of_thirds 7. https://boagworld.com/design/why-whitespace-matters/ 8. http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it 9. http://uxmyths.com/post/2059998441/myth-28-white-space-is-wasted-space 10. http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84 11. http://www.awwwards.com/understanding-web-ui-visual-hierarchy.html 12. http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/

Slide 117