User Interface That Works

Понравилась презентация – покажи это...

Слайд 0

Слайд 1

Слайд 2

User Interface Design

Слайд 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.

Слайд 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.

Слайд 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)

Слайд 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.

Слайд 7


Слайд 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.

Слайд 9

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

Слайд 10

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

Слайд 11

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

Слайд 12

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

Слайд 13

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

Слайд 14


Слайд 15

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

Слайд 16

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

Слайд 17

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

Слайд 18

Principles REPETITION Helps create association and consistency.

Слайд 19

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

Слайд 20

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

Слайд 21

Visual weight and depth

Слайд 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.

Слайд 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.

Слайд 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.

Слайд 25


Слайд 26


Слайд 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.

Слайд 28

Typography Anatomy

Слайд 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.

Слайд 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.

Слайд 31

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

Слайд 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

Слайд 33


Слайд 34

Colors Lucrul cu culorile

Слайд 35

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

Слайд 36

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

Слайд 37

Colors Working with colors Sometimes color is function.

Слайд 38

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

Слайд 39

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

Слайд 40

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

Слайд 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.

Слайд 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.

Слайд 43


Слайд 44

Functional Layout Design

Слайд 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.

Слайд 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.

Слайд 47

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

Слайд 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.

Слайд 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.

Слайд 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.

Слайд 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.

Слайд 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.

Слайд 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.

Слайд 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.

Слайд 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.

Слайд 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.

Слайд 57

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

Слайд 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.

Слайд 59

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

Слайд 60

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

Слайд 61

Layout Call-to-action

Слайд 62

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

Слайд 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.

Слайд 64


Слайд 65

Layout Delete Cancel

Слайд 66

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

Слайд 67


Слайд 68

Слайд 69

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

Слайд 70

Workflow Design Workflow

Слайд 71

Workflow Sketches

Слайд 72

Workflow Wireframes

Слайд 73

Workflow Paper cutouts

Слайд 74

Workflow Stenciling

Слайд 75

Workflow Wireframing software

Слайд 76

Workflow Graphic Design Software

Слайд 77

Workflow Presentation Software

Слайд 78

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

Слайд 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.”

Слайд 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

Слайд 81

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

Слайд 82

Layout Atomic Design

Слайд 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.

Слайд 84


Слайд 85

Web User Interface Patterns

Слайд 86

http://ui-patterns. com/patterns

Слайд 87


Слайд 88

Слайд 89


Слайд 90


Слайд 91


Слайд 92


Слайд 93


Слайд 94


Слайд 95


Слайд 96


Слайд 97


Слайд 98


Слайд 99

Слайд 100

Слайд 101

Слайд 102

Слайд 103

Слайд 104

Слайд 105

Слайд 106

Слайд 107

Слайд 108

Слайд 109

UXPin Mobile UI Design Patterns

Слайд 110

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

Слайд 111

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

Слайд 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.

Слайд 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.

Слайд 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/

Слайд 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

Слайд 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/

Слайд 117