Upload
yopeso
View
2.894
Download
0
Embed Size (px)
Citation preview
User Interface Design
USER INTERFACE DESIGN
Design is a method of problem solving.
What is design?
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.
Types of designUSER INTERFACE DESIGN
INTERACTION DESIGN
Interaction design is heavily focused on satisfying the needs and desires of the people who will use the product.
USER INTERFACE DESIGN (UI)
USER EXPERIENCE DESIGN (UX)
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.
INDUSTRIAL DESIGN
Industrial designers create physical products designated for mass-consumption by millions of people.
USER INTERFACE DESIGN
User InterfaceUser 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 DesignLINE / 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.
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
Elements of Design
Design PrinciplesBALANCE / 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)
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.
Principles
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.
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.
Visual Weight and Depth
Questions?
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
Typography
Anatomy
Typography
Anatomybaseline - 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 textSometimes we need to emphasize some words or some paragraphs in a text. How do we do that?
Typography
Combining fonts
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
• Goal
• How many fonts should I use?
• What is my content like?
• How can I make a good combination?
• Accordance
• Contrast
• Conflict
Colors
Colors
Lucrul cu culorile
Colors
Working with colorsColors can be “loud” or “quiet”.
Colors
Working with colorsWireframes in black-and-white. Focus on the function.
Colors
Working with colorsSometimes color is function.
Colors
Working with colorUse colors when and where they are relevant.
Colors
Color psychology• Choose one color
• Use color to create significance.
• Use the same shade everywhere.
Repetition & PatternsWhenever something in nature happens over and over, we will quickly notice.
Repetition & Patterns
We don’t see 6 individual cats, we see a group of cats. Typically, we analyse them from right to left.
Repetition & Patterns
If one of them stands out, it immediately draws attention.
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.
ProximityRepetition & Patterns
Questions?
Functional Layout Design
Layout
Composition basicsThere 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 ratioThe 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 RatioThe Golden Section can be found everywhere: in nature, mathematics, architecture, body proportions, arts, design.
Layout
Rule of thirdsUsed 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
BalanceGood 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 spaceWhite 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
HierarchySome 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
DepthThe 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 foldSome 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
ImagesImages 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
ImagesAccording to a study, people have the tendency to look where they’re guided by the gaze of somebody else.
Layout
TitleOur 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 attention-drawing method.
Layout
Call-to-actionCTA is a short text, usually located on a button - and requesting an action from the user.
Layout
Call-to-actionThe general formula for a good CTA:
Verb + Benefit + Urgency or Place
Layout
Call-to-action
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 buttonsIn 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
Layout
Delete Cancel
Layout
LabelsUse the most common, easy and simple versions for tags and labels.
Questions?
Tools & Workflow
What is your primary tool for interface design?
Workflow
Design Workflow
SketchesWorkflow
WireframesWorkflow
Paper cutoutsWorkflow
StencilingWorkflow
Wireframing softwareWorkflow
Graphic Design SoftwareWorkflow
Presentation SoftwareWorkflow
Fidelity LevelsWorkflow
Block Diagrams
Grey Boxes
HF Text
HF Color
HF Media
HF Interactions
MockupsWorkflow
Mockups are the models of web design and one of the most effective mediums for communicating visual design.
“Wireframes are skeleton. Mockups are skin.”
PrototypesWorkflow
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
Prototype ToolsWorkflow
Presentation Software
Coded (HTML)
UXPinInvision MockFlow JustInMind Axure OmnigraffleJustProto Flinto MarvelPixate
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.
Questions?
Web User InterfacePatterns
http://ui-patterns.com/patterns
menu
carousel
forms
promo
content
images
features
price
contacts
tabs
typography
UXPin Mobile UI Design Patterns
https://www.google.com/design/spec/patterns/
Android Patterns
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
iOS Patterns
It’s Not UX vs. 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.
It’s UX & UI
Tips & Techniques1. 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
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/
USER INTERFACE BASICS
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
Typography
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
Tools and Workflow
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
Colors
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/
Layout