If you like this presentation – show it...
User Interface Design
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.
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.
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)
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.
Elements of Design LINE / SHAPE / DIRECTION / SIZE / TEXTURE / COLOR
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.
Elements of Design SHAPE • Self contained defined area of geometric, or organic form. • Regular surfaces have geometric shapes (circle, square, rectangle, triangle etc.)
Elements of Design DIRECTION Horizontal suggests calmness, stability and tranquility. Vertical gives a feeling of balance. Oblique - growth, descendance etc.
Elements of Design SIZE Relationship of the area occupied by one shape to that of another.
Elements of Design TEXTURE The surface quality of a shape - rought, smooth, soft, hard, glossy.
Elements of Design COLOR The light reflected off objects. • RGB • HEX • CMYK • HSB
Design Principles BALANCE / PROXIMITY / ALIGNMENT / REPETITION / CONTRAST / SPACE
Principles BALANCE Balance provides stability and structure to a design. • Symmetric balance (through reflection, translation, rotation) • Asymmetric balance • Optic balance (formal, informal)
Principles PROXIMITY Relationship between elements. It provides a focal point.
Principles ALIGNMENT Aligning elements allows them to create a visual connection with each other.
Principles REPETITION Helps create association and consistency.
Principles CONTRAST Juxtaposition of opposing elements. It allows us to emphasize or highlight key elements in your design.
Principles SPACE The distance or area between, around, above, below, or within elements.
Visual weight and depth
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.
Visual Weight and Depth CONTRAST • The difference between light things and dark things is called contrast. • Assign a bigger contrast to the essential elements.
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.
Typography WHY IS IT IMPORTANT?
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.
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.
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.
Typography Emphasizing text Sometimes we need to emphasize some words or some paragraphs in a text. How do we do that?
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
Colors Lucrul cu culorile
Colors Working with colors Colors can be “loud” or “quiet”.
Colors Working with colors Wireframes in black-and-white. Focus on the function.
Colors Working with colors Sometimes color is function.
Colors Working with color Use colors when and where they are relevant.
Colors Color psychology • Choose one color • Use color to create significance. • Use the same shade everywhere.
Repetition & Patterns Whenever something in nature happens over and over, we will quickly notice.
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.
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.
Functional Layout Design
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.
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.
Layout Golden Ratio The Golden Section can be found everywhere: in nature, mathematics, architecture, body proportions, arts, design.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Layout Images According to a study, people have the tendency to look where they’re guided by the gaze of somebody else.
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.
Layout Call-to-action CTA is a short text, usually located on a button - and requesting an action from the user.
Layout Call-to-action The general formula for a good CTA: Verb + Benefit + Urgency or Place
Layout Instructions • Instructions have to be short and direct • Tell the user exactly what he has to do • Express yourself clearly
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.
Layout Delete Cancel
Layout Labels Use the most common, easy and simple versions for tags and labels.
Tools & Workflow What is your primary tool for interface design?
Workflow Design Workflow
Workflow Paper cutouts
Workflow Wireframing software
Workflow Graphic Design Software
Workflow Presentation Software
Workflow Fidelity Levels Block Diagrams Grey Boxes HF Text HF Color HF Media HF Interactions
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.”
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
Workflow Prototype Tools Presentation Software Coded (HTML) UXPin Invision MockFlow JustInMind Axure Omnigraffle JustProto Flinto Marvel Pixate
Layout Atomic Design
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.
Web User Interface Patterns
UXPin Mobile UI Design Patterns
Android Patterns https://www.google. com/design/spec/patterns/
iOS Patterns https://developer.apple. com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
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.
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.
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/
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
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/