Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's Think about Right Answers of Design and UI/UX

Kite
March 25, 2017

Let's Think about Right Answers of Design and UI/UX

Kite

March 25, 2017
Tweet

More Decks by Kite

Other Decks in Design

Transcript

  1. Osaka Web Designers and Developers Meetup
    Kite @ixkaito
    Let’s Think about
    The Right Answer of Design and UI/UX

    View full-size slide

  2. WHO AM I?
    WordPress core contributor
    Web & graphic designer
    Programmer
    Ruby on Rails contributor
    React contributor
    Wocker developer
    Bathe developer
    Frasco developer
    Kite
    KITERETZ inc. CEO & Founder
    ! kite.koga " ixkaito # ixkaito

    View full-size slide

  3. CONTENTS
    Design and UI/UX
    Universal Answers
    The Part Which Have No Answer
    Conclusion

    View full-size slide

  4. How many people think
    there are correct answers to design and UI/UX?

    View full-size slide

  5. Design and UI/UX

    View full-size slide

  6. Design and UI/UX
    DESIGN & UI/UX
    Design
    UI UX

    View full-size slide

  7. Design
    UI UX
    Design (in a Narrow Sense)
    It is always said that there is no correct answer to this part.
    Design in a Narrow Sense
    DESIGN & UI/UX

    View full-size slide

  8. UI/UX
    There are (almost) correct or universal answers to this part.
    Design
    UI UX
    UI/UX
    DESIGN & UI/UX

    View full-size slide


  9. Design (in a Narrow Sense)
    Face, figure, hairstyle, makeup,
    fashion, accessory, etc.
    UI/UX
    Character, manner, behavior, care, kindness,
    hospitality, OMOTENASHI, etc.
    Compare Design and UI/UX to a Human
    DESIGN & UI/UX

    View full-size slide

  10. ref. PIXEL PERFECT PRECISION (PPP)
    Universal Answers

    View full-size slide

  11. Certain colors and shapes have become synonymous with specific meanings in digital
    design. Be mindful of these norms, as mixing them up can cause confusion for the user.
    !
    i
    !
    i
    Bad Good
    UNIVERSAL ANSWERS Color and Shape

    View full-size slide

  12. Straight edges should be on-pixel and sharp
    — blurred edges are a no-no!
    Bad Good
    Sharp Edges
    UNIVERSAL ANSWERS

    View full-size slide

  13. Mak sure the alignment and spacing are right.
    Bad Good
    Alignment and Spacing
    UNIVERSAL ANSWERS

    View full-size slide

  14. Your designs should maintain consistency across a number of levels, including color, style,
    margin, position, navigation, typography, and use of language.
    About Us
    Home Contact Us
    About Us
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Maxime saepe ducimus voluptatem hic modi inventore
    odio voluptatibus harum, illum quisquam possimus rem
    dolorem quasi exercitationem repellendus ipsam aperiam
    deserunt, voluptates blanditiis qui placeat vitae similique.
    Contact Us
    About Us
    Home Contacts
    Company
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Maxime saepe ducimus voluptatem hic modi inventore
    odio voluptatibus harum, illum quisquam possimus rem
    dolorem quasi exercitationem repellendus ipsam aperiam
    deserunt, voluptates blanditiis qui placeat vitae similique.
    Contact Us
    Bad Good
    Consistency
    UNIVERSAL ANSWERS

    View full-size slide

  15. Layout, colors and typography have a huge influence on what the eye is drawn to, and
    consequently how information is consumed. Think about what you want the user to look at
    on the page and in what order, then design around that hierarchy.
    About Us
    Home Contact Us
    About Us
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Labore nobis unde fugit tempora, debitis! Officiis, quasi.
    Nam sunt explicabo sit iste natus magni minima maiores
    eaque, atque hic, odio enim.
    About Us
    Home About Us
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Labore nobis unde fugit tempora, debitis! Officiis,
    quasi. Nam sunt explicabo sit iste natus magni minima
    maiores eaque, atque hic, odio enim.
    Heading 2
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Cupiditate ullam eum inventore?
    Heading 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Cupiditate ullam eum inventore?
    Contact Us
    UNIVERSAL ANSWERS
    Bad Good
    Visual Hierarchy

    View full-size slide

  16. Affordance is an object’s ability to convey its function through sensory means. Commonly
    used affordances include buttons which are given depth to emulate the real world, and
    text which flows off the page to show that it scrolls.
    Button Scrollable
    About Us
    Home Contact Us
    About Us
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Deleniti, adipisci vero necessitatibus voluptates esse odio
    fuga vitae dolorem quisquam cupiditate magni
    repellendus odit animi a. Voluptates id optio recusandae
    fugit.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Similique minima maiores modi laborum, repellendus
    excepturi quidem perferendis reprehenderit totam deleniti
    culpa quos velit quas fuga qui nulla eveniet ut
    Contact Us
    UNIVERSAL ANSWERS Affordance

    View full-size slide

  17. Scrolling is easier than clicking for your users. Clicking is a decision; scrolling is a
    continuation.
    About Us
    Home Contact Us
    About Us
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Consequuntur sapiente fuga iure dolorum error ipsum
    laboriosam similique dolorem nihil, optio in nam id dolore
    recusandae ea officiis, magni cumque praesentium. Rem
    est culpa aut possimus sed, deserunt ullam nisi
    repellendus, velit temporibus magni?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Facilis in, quia atque doloremque sunt est! Ab enim, optio,
    About Us
    Home Contact Us
    About Us
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Consequuntur sapiente fuga iure dolorum error ipsum
    laboriosam similique dolorem nihil, optio in nam id dolore
    recusandae ea officiis, magni cumque praesentium. Rem
    est culpa aut possimus sed, deserunt ullam nisi
    repellendus, velit temporibus magni?
    1 2 3
    UNIVERSAL ANSWERS
    Bad Good
    Scrolling is Better than Clicking
    ex, laudantium repellendus neque, tempore magnam
    maiores alias asperiores voluptatem distinctio officia!

    View full-size slide

  18. Good typography is vital in digital design, and has a great effect on your product’s
    accessibility.
    Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Modi pariatur doloribus delectus reprehenderit vero vitae
    asperiores voluptates, facilis neque architecto?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Ipsum culpa enim ipsam, impedit asperiores, recusandae.
    Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Pariatur sequi officia blanditiis aut ipsum facere a quam
    dolor, commodi tenetur.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi pariatur doloribus delectus reprehenderit vero vitae asperiores
    voluptates, facilis neque architecto? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum culpa enim ipsam, impedit
    asperiores, recusandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sequi officia blanditiis aut ipsum facere a
    quam dolor, commodi tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla ullam blanditiis atque assumenda ex
    sequi molestiae voluptates itaque minus possimus?
    UNIVERSAL ANSWERS
    Bad Good
    Typography

    View full-size slide

  19. Do not fix the sizes of content areas.
    Lorem ipsum dolor
    sit amet, consectetur.
    Lorem ipsum dolor
    sit amet, consectetur
    adipisicing elit.
    Quod.
    Lorem ipsum dolor
    sit amet, consectetur.
    Bad Good
    Content Area
    Lorem ipsum dolor
    sit amet, consectetur.
    Lorem ipsum dolor
    sit amet, consectetur.
    Lorem ipsum dolor
    sit amet, consectetur.
    Lorem ipsum dolor
    sit amet, consectetur.
    Lorem ipsum dolor
    sit amet, consectetur
    adipisicing elit.
    Quod.
    Lorem ipsum dolor
    sit amet, consectetur.
    Lorem ipsum dolor
    sit amet, consectetur.
    Lorem ipsum dolor
    sit amet, consectetur.
    Lorem ipsum dolor
    sit amet, consectetur.
    UNIVERSAL ANSWERS

    View full-size slide

  20. Shown above are three ways to vertically align text on buttons. Which method is best
    depends on a few variables, such as the choice of typeface and whether you’re using
    uppercase, lowercase, numbers, icons or a mixture of all. Make sure that once you pick a
    rule you stick to it throughout the interface.
    Capital
    Capital Capital
    Capital
    Capital Capital
    UPPERCASE
    UPPERCASE UPPERCASE
    Cap Height and Descender x-height Cap Height and x-height
    Aligning Text
    UNIVERSAL ANSWERS

    View full-size slide

  21. Digital tools use height or width to center objects. However, the center should not be the
    center of height or width but the center of gravity.
    Bad Good
    Center of Gravity
    UNIVERSAL ANSWERS

    View full-size slide

  22. Make sure that you have the proper resolution of your images. Do not scale images up
    too much and change the aspect ratio.
    Bad Good
    Images
    UNIVERSAL ANSWERS

    View full-size slide

  23. PIXEL PERFECT PRECISION
    https://ustwo.com/blog/the-ustwo-pixel-perfect-precision-handbook-3/
    UNIVERSAL ANSWERS

    View full-size slide

  24. The Part Which Have No Answer

    View full-size slide

  25. Design
    UI UX
    Design (in a Narrow Sense)
    It is always said that there is no correct answer to this part.
    NO ANSWER Design in a Narrow Sense

    View full-size slide

  26. % This is definitely better than some websites which I have no idea where I can click.
    % I prefer the simpleness of this website.
    % Hiroshi Abe’s website is the ideal one.
    User Feedback
    NO ANSWER Hiroshi Abe’s Website

    View full-size slide

  27. It’s not true that all websites should have
    the same design of Hiroshi Abe’s Website.
    NO ANSWER The Role of Designer

    View full-size slide

  28. Everybody has his likes and dislikes. It is impossible to create a design which everyone likes.
    Likes and Dislikes
    It is hard to evaluate design. Page views or conversion rate depend on not many other variables,
    such as contents, speed, promotion, etc.
    Hard to Evaluate
    NO ANSWER Why It Is Said That There’s No Answer to Design?

    View full-size slide

  29. To Have a Definite Aim
    From the User’s Perspective
    For example: page views, conversion rate, design awards, self-satisfaction, etc.
    Alway think about your users and provide the appropriate design. For example: men and women
    have different color preferences. Flat design works well for the youth, but skeuomorphic design
    may be better for older people.
    NO ANSWER What to Do

    View full-size slide

  30. To Have Reasons
    It’s true that design finally depends on your preferences, so you have to have reasons to
    persuade your clients.
    Golden ratio, silver ratio, 960px grid system, fashionable colors, etc. Do not persist these. If you
    feel strange with your design, it is necessary to leave these concepts.
    Some Ideas
    NO ANSWER What to Do

    View full-size slide

  31. There’s no perfection of design. Improve your design from user feedback. Growth hacking and
    lean UX are spotlighted.
    Continual Improvement
    Make your contents nice and rich before pursuing great design.
    Content-First
    CONCLUSION

    View full-size slide