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

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

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

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

Design and UI/UX

Design and UI/UX DESIGN & UI/UX Design UI UX

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

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

♥ 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

ref. PIXEL PERFECT PRECISION (PPP) Universal Answers

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

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

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

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

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

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

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!

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

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

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

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

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

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

The Part Which Have No Answer

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

% 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

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

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?

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

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

Conclusion

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

Thank you!