The Art of Web Design, 101
•
5 j'aime•956 vues
A design talk geared towards designers who are new to the world of web design. I’ll cover items such as: how web design is unique from other kinds of design (such as print), how to leverage research and analytics to create data informed designs, steps to become a proficient web designer and how to choose and work with developers. If there are folks in the room using Illustrator or PSD, I'll show you how to set up Illustrator files for web design and prep files for a developer.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à The Art of Web Design, 101
Similaire à The Art of Web Design, 101 (20)
Dernier
Dernier (20)
The Art of Web Design, 101
- 1. the art of web design fromscratchdesign.com slideshare.net/kellyhousholder @ kellyhousholder Girl designed by iconsmind.com from the thenounproject.com
- 2. Do what you’re good at. Computer designed by Philip Glenn from the thenounproject.com
- 3. 1) What makes web design unique? 2) File Setup / File Prep 3) Working with a developer
- 4. Every layout, font, color and graphic can should be a deliberate, data informed decision. Computer designed by Philip Glenn from the thenounproject.com
- 5. But where do you get this data?
- 7. “Overall we executed about 500 a/b tests on our web pages in a 20 month period which increased donation conversions by 49% and sign up conversions by 161%” Kyle Rush, Obama Digital Team. Currently head of Optimization at Optimizely. kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/
- 9. source: Optimizely Sony Customer Case Study “Testing helps you make decisions based on objective results, not subjective guesses.” EVELIEN GEERENS WEB MERCHANDISER, SONY
- 12. Google Analytics
- 13. OLD CLIENT WEBSITE EXAMPLE Carousels: slow load, bad conversions
- 14. Carousels: slow load, bad conversions ERIK RUNYON WEEDYGARDEN
- 15. Vimeo Stats
- 17. Computer designed by Nate Eul from the thenounproject.com Site strategy.
- 18. Pretend to be the user. What do you want a user to click first? How do things work? Think through every scenario. What is the most logical step to take next? How would your experience be different on a smartphone? Person Icon designed by Paulo Sá Ferreira from the Noun Project
- 19. Person Icon designed by Paulo Sá Ferreira from the Noun Project Watch and improve. Learn from your mistakes. Learn from other people’s mistakes.
- 20. Person Icon designed by Paulo Sá Ferreira from the Noun Project Design for the future. What kind of content will the client need to add a few months from now? Are they launching new products? Will they want to add new photos? New pages?
- 21. fast > fancy Designy things that can increase page load
- 22. big beautiful image: 123 KB
- 23. simple overlay: 45 KB
- 24. Buy our product, yo! BUY NOW example CTA
- 25. Using fonts loaded from multiple sources. (stick to one!)
- 26. more font weights and styles = more page load
- 29. typography.com
- 34. What fonts to choose? jessicahische.is/thinkingthoughts
- 36. blog.typekit.com
- 40. 1) What makes web design unique? 2) File Setup / File Prep 3) Working with a developer
- 41. designsprint.net Download their sample Illustrator CC template.
- 43. Design multiple screens at once.
- 45. Export a PDF the size of your testing device.
- 46. Practice using a grid. “...Uniformity and consistency are key to creating a website that your users will find easy to navigate...” All About Grid Systems (webdesign.tutsplus.com) by Rachel Shillcock
- 47. “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. ” Josef Müller-Brockmann www.thegridsystem.org
- 48. gridsetapp.com
- 49. gridsetapp.com
- 50. Create transparent overlays of screensizes.
- 51. 320 768 1024
- 52. 320768
- 53. 1) What makes web design unique? 2) File Setup / File Prep 3) Working with a developer
- 54. Kick ass WordPress developer who knows their shit ... and doesn’t bail halfway through the project ...makes me look good ...responds to emails ...delivers on time ...is willing to work with me to get the design right ...contributes to the WordPress community
- 55. Don’t ask for references, get in touch with the clients in their portfolio.
- 56. Search for recommended developers from WordPress sites you trust.
- 58. Talk about workflow. Ask how they like to recieve design files. (icon from thenounproject.com)
- 59. The end. fromscratchdesign.com slideshare.net/kellyhousholder @ kellyhousholder Girl designed by iconsmind.com from the thenounproject.com
- 61. Exporting tips: - larger file types and complex designs have trouble exporting. - simplify your file - put a single artboard in a new file and try exporting - images can bog it down - drop shadows can bog it down, try removing them PROTIP: Grouping items in .AI puts them in a group in PSD after exporting. This makes labeling hella easier.
- 62. Web design tips: Create a ‘style guide’ for text on a full width/blog post page with example mockup for block quote, ordered lists, numbered lists, italics, decimals, dashes, numbers, bullets, headings Use drop shadows sparingly. Drop shadows with only one side are very difficult. Drop shadows that are radial - (or on opposite sides of an element) are also difficult Don’t forget hover states! Button behavior, drop down behavior, hyperlinks, hover messages, etc!
- 63. PSD file tips: - lable everything really well! - Put groups of layers in sequences that make sense. Header, sidebar, footer, widgets, etc. PROTIP: Drop shadows, opacities, gradients and grouped illustrator symbols DO NOT export well to PS. Ask your developer what they need from you regarding these items.
- 64. Gradients: Since these do not export from .AI to .PSD, the dev will need: 1) start color and percentage 2) stop color and percentage 3) direction 4) 0-100 placement of the gradient - bgradients are harder with responsive layouts, be mindful of the container of your gradient