Get your screen together - design skills for frontend people
- 1. Get your screen together Design Skills for Frontend People
- 2. Sílvia Otto Sequeira Head of UX/UI Practice | OutSystems silvia.sequeira@outsystems.com linkedin.com/in/sottosequeira Sílvia Otto Sequeira | Design Skills 4 FE People
- 3. Why should you learn about Design? Well, maybe you shouldn’t. Sílvia Otto Sequeira | Design Skills 4 FE People
- 4. I suck at creating screens. I don’t wanna do it. Where’s the freakin’ designer when I need him? This is impossible to implement. How do they get these crazy ideas? Sílvia Otto Sequeira | Design Skills 4 FE People
- 5. Design is everyone’s job. Sílvia Otto Sequeira | Design Skills 4 FE People
- 6. Non-Realistic, Non-Performant icon You’ve gotta know what works and what doesn’t Near Enough Complex Near enough is okay for most stakeholders iconicon Winging It Moments The features that come after Design icon Backend Mindset Does it work? Then it’s done icon Sílvia Otto Sequeira | Design Skills 4 FE People
- 7. Everytime you face something like this, you’re forced to make design decisions. Sílvia Otto Sequeira | Design Skills 4 FE People
- 8. Sílvia Otto Sequeira | Design Skills 4 FE People Also, understand & discuss what designers are doing doesn’t make you a designer.
- 9. About those Design decisions
- 10. You’re in the end of the line Sílvia Otto Sequeira | Design Skills 4 FE People
- 11. But someone had to deal with this Sílvia Otto Sequeira | Design Skills 4 FE People
- 12. User Experience User Interface Development Sílvia Otto Sequeira | Design Skills 4 FE People What lies beneath
- 13. This is Design Sílvia Otto Sequeira | Design Skills 4 FE People
- 14. And this is Design Sílvia Otto Sequeira | Design Skills 4 FE People
- 15. User Experience User Interface Development Ideation Creation Delivery Sílvia Otto Sequeira | Design Skills 4 FE People Design decisions are made throughout the cycle
- 16. ON an’ OFF Screen User Experience
- 17. Business Analysis identifies crucial business goals and metrics, and informs design decisions. Illustration: https://jamieclouting.co.uk Sílvia Otto Sequeira | Design Skills 4 FE People And to really deal with the empty screen, you just have to forget about it
- 18. • Define clear goals • Understand the business • Interview main stakeholders • Review current application • Get analytics • Figure out the different personas • Identify what to ask the users Photo: http://www.uxlady.com Sílvia Otto Sequeira | Design Skills 4 FE People Design doesn’t start at the desk
- 19. User Research identifies pain points and user needs. From interviews to observation, multiple methods can be applied. Illustration: https://uxplanet.org Sílvia Otto Sequeira | Design Skills 4 FE People Meet the users
- 20. Sílvia Otto Sequeira | Design Skills 4 FE People • Go where users are & take the team • Perform interviews • Observe • Understand the context • Capture the findings • Meet and share afterwards Don’t listen to what they say
- 21. Mockups communicate the structure and layout through varying levels of fidelity. Make it fast and sketchy to start with. Cancel Send It Again Send Text Done Insert the code received by text - - - - Sílvia Otto Sequeira | Design Skills 4 FE People Now to the blank screen
- 22. •Capture ideas •Information Architecture comes in handy •Keep sketching and getting feedback •Learn your heuristics Sílvia Otto Sequeira | Design Skills 4 FE People Fire your first shot
- 23. From Jakob Nielsen’s Heuristics Uploading 3 of 3 files Image1.png Image2.png Image3.png Uploading Image1.png Image2.png Image3.png Sílvia Otto Sequeira | Design Skills 4 FE People #1 Visibility of system status
- 24. Back to homepage Sílvia Otto Sequeira | Design Skills 4 FE People From Jakob Nielsen’s Heuristics #2 Match between system and real world
- 25. Cancel Send Proceed Done System will send a message to you, please wait. Sílvia Otto Sequeira | Design Skills 4 FE People From Jakob Nielsen’s Heuristics #3 User control and freedom
- 26. Add to Cart Add to Mall Sílvia Otto Sequeira | Design Skills 4 FE People From Jakob Nielsen’s Heuristics #4 Consistency and standards
- 27. Cancel Del. You’re about to delete file lastsummer.pdf Done You have just deleted lastsummer.pdf Sílvia Otto Sequeira | Design Skills 4 FE People From Jakob Nielsen’s Heuristics #5 Error prevention
- 28. Step 1 Step 2 Step 3 Previous Next Step Sílvia Otto Sequeira | Design Skills 4 FE People From Jakob Nielsen’s Heuristics #6 Recognition rather than recall
- 29. From Jakob Nielsen’s Heuristics #7 Flexibillity and efficiency of use Charlie Foster UX Designer Nelle Manning Developer Luella Schwartz Designer See full team Charlie Foster UX Designer Nelle Manning Developer Luella Schwartz Designer Load more 100 users… Sílvia Otto Sequeira | Design Skills 4 FE People
- 30. Search by Name or Role Search First Name Last Name Role Search Sílvia Otto Sequeira | Design Skills 4 FE People From Jakob Nielsen’s Heuristics #8 Aesthetic and minimalist design
- 31. Your file was deleted! UNDO Your file was deleted! Have a nice day! Sílvia Otto Sequeira | Design Skills 4 FE People From Jakob Nielsen’s Heuristics #9 Help users recognize, diagnose and recover from errors
- 32. Username Role I work as a... Search A username is... Username Role Search Sílvia Otto Sequeira | Design Skills 4 FE People From Jakob Nielsen’s Heuristics #10 Help and documentation
- 33. Usability Tests validate the proposed path with direct feedback from the users. Sílvia Otto Sequeira | Design Skills 4 FE People Get better at it 5 users?
- 34. • Prepare the scenarios to be tested • Ask users to complete the main tasks • Hallway testing if nothing else Sílvia Otto Sequeira | Design Skills 4 FE People Get better every time
- 36. Sílvia Otto Sequeira | Design Skills 4 FE People Design is form and function
- 37. Time to implement the experience in high-fidelity, using images, colors, fonts and other visual elements. Sílvia Otto Sequeira | Design Skills 4 FE People
- 38. C Color Tone/Value Orientation/ PositionSize/Shape Title The modern world is in a continuous movement and people everywhere are looking for quick, safe means of accessing accurate information. Prompt information is vital for people who want to keep the pace with a constantly evolving society, and many people are turning to the Internet for help in their quest for knowledge. The Internet is not only the best means to quickly access information, it also has the merit of bringing people all over the world together, allowing them to interact in a safe, exciting environment. Desiclassifieds web site Sílvia Otto Sequeira | Design Skills 4 FE People stands for contrast
- 39. Color Size Shape Texture Sílvia Otto Sequeira | Design Skills 4 FE People R stands for repetition
- 40. Emphasizes Left, Center or Right Grid/Structure Sílvia Otto Sequeira | Design Skills 4 FE People A is for alignment
- 41. Spacing Shape TextureColor Sílvia Otto Sequeira | Design Skills 4 FE People P proximity is key
- 42. Variations We don’t need to import all the weights, example Exo 2 has 9 weights, but we need to have enough contrast between headings, that usually is H1 32px, H2 24px and H3 18px; and paragraph style, that usually is 16px or 14px minimum. So we will probably need a Regular, Semibold and Bold. This is a example of a H1 This is a example of a H2 This is a example of a H3 This is a example of a paragraph Bold 32px Bold 24px Bold 18px Regular 14px This is a example of a legend/note text Regular 12px Sílvia Otto Sequeira | Design Skills 4 FE People Key points for good use Typography
- 43. Numbers We deal with a lot of numbers and data, and for good number legibility all the numbers should be sitting on the baseline and aligned with the cap height, instead of going up and down (which is called “oldstyle”). Can you imagine a big data table or a excel spreadsheet with the numbers going up and down? 1234567890 1234567890 Do this: Avoid this: Sílvia Otto Sequeira | Design Skills 4 FE People Key points for good use Typography
- 44. Legibility How easy is to distinguish between individual letterforms. This is determinated by letter spacing and font design. Bad letter spacing or small line height is not good for your eyes, it makes the text hard to read and you get tired when reading too fast. And we don’t want our users needing glasses because of our text. AgentlemanfromNewYorkdiscoveredwhathecallsan “oversight”onthepartof99.9%ofallmarketersthatallowshim togetotherwisepaid-foradvertisingatGoogleaswellasall othersearchenginesthatallowsponsoredads. Andno,nothingabouthis“secret”isillegal–nordoesitrequire thatyouknowsomeoneonthe“inside”atGoogle,Yahoo, MSN,Overtureandothers. Instead,theNewYorkerboastsproudly“…thisissomething thatIcaughtontojustbefore2000whentherewassomuch searchenginecrazerunningaround,andstarteddoingsmalljust totestthingsatfirst…butwhichIlaterexpandedonafter gettingthehangofit." Sílvia Otto Sequeira | Design Skills 4 FE People Key points for good use Typography
- 45. Readability How easy it is to read. It’s determinated by size, spacing and color. Like legibility, readability can make our users life very hard if they need to almost close their eyes to focus the text and provoke eye strain. A gentleman from New York discovered what he calls an “oversight” on the part of 99.9% of all marketers that allows him to get otherwise paid-for advertising at Google as well as all other search engines that allow sponsored ads. And no, nothing about his “secret” is illegal – nor does it require that you know someone on the “inside” at Google, Yahoo, MSN, Overture and others. Sílvia Otto Sequeira | Design Skills 4 FE People Key points for good use Typography
- 46. Performance Styled fonts can have an affect on your loading time, make sure you are only importing the weights in use and one or two font family maximum. Watch the file size. WOFF2 has the lighter file size, but WOFF is compatible with the majority of the browsers. Consider system fonts for mobile devices using 3G connections, they also provide a better native feeling. Sílvia Otto Sequeira | Design Skills 4 FE People Key points for good use Typography
- 47. E72B37 2E3E53 PRIMARY COLORS White ECEFF1 CFD8DC 77909C B0BEC5 455A64 263238 Sílvia Otto Sequeira | Design Skills 4 FE People GREY SCALE Get into the brand universe
- 48. Prepare future work 1 2 >< 3 4 Pagination Inputs and Selects Color Blue DoneMake Admin User? Secondary Color Blue Details John Carter Streat 123 N12 2nd Floor Email Phone Number Form Color Blue * Name Alejandra Camino * Address * Secondary Color Argentina City Lisbon DoneMake Admin User? Details Sílvia Otto Sequeira | Design Skills 4 FE People
- 49. Get your screen together
- 50. And they’re really about “being able to research what’s out there, analyze opportunities, run structured experiments, fail, learn, and iterate until you devise something of value that people truly want.” - Jaime Levy, UX Strategy Sílvia Otto Sequeira | Design Skills 4 FE People Design decisions are made throughout the cycle
- 51. User Experience User Interface Development Ideation Creation Delivery Sílvia Otto Sequeira | Design Skills 4 FE People And the designer is not going to be the only one making those decisons
- 52. Sílvia Otto Sequeira | Design Skills 4 FE People So fight back Non-Realistic, Non-Performant icon You’ve gotta know what works and what doesn’t Near Enough Complex Near enough is okay for most stakeholders iconicon Winging It Moments The features that come after Design icon Backend Mindset Does it work? Then it’s done icon
- 53. There are many plugins/apps that you can install in your computer and see which colors and font they use, or export assets. This way you can “copy” your favorite websites. https://csspeeper.com http://sipapp.io https://fontface.ninja Sílvia Otto Sequeira | Design Skills 4 FE People #1 Find fonts and colors
- 54. With CSS Peeper we can see some useful information about this medium page, such as: - Heading Text Styles - Body Text Styles - Background Color - Colors in Use - Assets in Use Sílvia Otto Sequeira | Design Skills 4 FE People #1 Find fonts and colors
- 55. After you find your favorite colors, it’s time to create a pallete that can breathe and speak the same language together. You can simply add your main color and generate automatically palletes. Then pick your favorite. http://colorhunt.co https://coolors.co Sílvia Otto Sequeira | Design Skills 4 FE People #2 Create your pallete
- 56. You can’t do nothing without inspiration… That’s why one of the most important tasks when you’re designing something is to search and see examples of other’s work, patterns, trends, or even check what your competition is doing. http://www.calltoidea.com http://www.dribbble.com https://www.pttrns.com https://uimovement.com https://www.uplabs.com http://uiohmy.com Sílvia Otto Sequeira | Design Skills 4 FE People #3 Get inspired
- 57. #4 Find what you need Here are some links to find stuff like Icons, Images, Profile Pictures, Names and Demographic data. https://thenounproject.com http://iconstore.co http://uifaces.com https://www.diverseui.com https://uinames.com http://thestocks.im https://uigradients.com Sílvia Otto Sequeira | Design Skills 4 FE People
- 58. You already know the importance of having the right font, right? So, it’s time to get it and use it wisely. https://fonts.google.com https://typekit.com https://www.myfonts.com Sílvia Otto Sequeira | Design Skills 4 FE People #5 Discover the right font
- 59. To have the best performance with lightweight icons and to avoid the blured icons in the retina screens (common problem with png images) we recommend to use the icons as an iconfont. To do that you can use the Fontawesome pack, or you can create your own in Icomoon. To create an iconfont in Icomoon you just need to have the icons in SVG format and import them to this tool. When you generate the font you will get a CSS File with all the icons you choose. http://fontawesome.io https://www.icomoon.io Sílvia Otto Sequeira | Design Skills 4 FE People #6 Using Icon Fonts
- 60. Do you have a Sketch file or are you collaborating with a design team? Cool! They can add the design in one of the following softwares and you can extract the code and assets from there. https://zeplin.io https://avocode.com https://www.invisionapp.com/trial/enterprise/inspect https://icons8.com/lunacy Sílvia Otto Sequeira | Design Skills 4 FE People #7 Inspect the code
- 61. Your job is done and it’s awesome, but now you feel that you need something to pump what you have done. I know that feeling, check these animations and use some ideas. http://codepen.io http://littlesnippets.net https://codemyui.com http://cssdeck.com Sílvia Otto Sequeira | Design Skills 4 FE People #8 Move like Jagger
- 62. ++ Sílvia Otto Sequeira | Design Skills 4 FE People #9 And connect the dots