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

Transcript

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

   View 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 Slide

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

   View Slide

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

   View Slide

5. Design and UI/UX
   

   View Slide

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

   View 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 Slide

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

   View 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 Slide

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

    View 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 Slide

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

    View Slide

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

    View 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 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 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 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 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 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 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 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 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 Slide

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

    View Slide

24. The Part Which Have No Answer
    

    View 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 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 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 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 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 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 Slide

31. Conclusion
    

    View Slide

32. 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 Slide

33. Thank you!
    

    View Slide