The Science of Subtraction: A Minimalist Guide to Web Design
8 likes1,200 views
The document is a guide to minimalist web design, emphasizing the importance of using minimal elements for usability and effective navigation. It outlines key steps in the design process, including project research, site purpose, structure, and technical considerations while highlighting potential pitfalls. The guide advocates for a focus on content and user needs, ensuring that design choices align with the overall objectives of the website.
The Science of Subtraction: A Minimalist Guide to Web Design
- 1. A Minimalist Guide to Web Design The Science of Subtraction November 2014 Mohamed Gabel | GlueTube Managing Director | gabel@gluetube.com | www.gluetube.com
- 3. Art movement result of / in response to other movements
- 4. Came form architects, modern sculptors
- 5. Used all over.. fashion, décor, architecture, automotive, etc.
- 6. Achieving desired effect using the minimum elements
- 7. Advantages
- 10. Easy Navigation
- 13. Pitfalls
- 16. Demanding on-going work load
- 17. Loosing focus of site/page purpose/objective
- 18. Before We Start
- 19. nor PSD/AI Doesn’t start with a sketch
- 20. Graphic Design CITY MIN MAX CONDITION Jeddah 24 17 Partly Cloudy Riyadh 18 9 Cloudy Dammam 14 6 Rain / Storm Information Design 24/17 18/9 14/6
- 21. Research, Analysis, & Logic (Role Playing)
- 22. Minimal Content: Must-have content – objectively
- 24. Designing a Minimalist Website
- 25. Steps to the minimalist approach 1. Project Research 2. Site Purpose 3. Site Structure 4. Page Function 5. Technical Minimalism 6. Layout Issues
- 27. ITEM FINDINGS Company Name Industry Owners Products/Services No. of Locations No. of Employees $ Worth Company Site Competitors Sites Benchmarks Company Information (industry, size, competitors, etc.)
- 28. Analyze Benchmarks (local & International) www.ge.com www.jpmorganchase.com www.exxonmobil.com www.kingdom.com.sa www.nesma.com
- 30. 1. Project Research • Company Information • Benchmarks (local & International) • Analysis of features & trends • Brand Identity Manual
- 31. 2. Site Purpose
- 32. Objective: Why are we developing this site?
- 33. Audience: Who will be using this site?
- 34. 2. Site Purpose • Objective: Why are we developing this site? • Audience: Who will be using this site?
- 36. Homepage Vs Content Structure
- 37. Keep it simple
- 38. Realized users needs offered at their convenience to achieve an objective
- 39. Realized users needs offered at their convenience to achieve an objective Writing Language Graphic Design Sound Motion Information Design Interface Design Interaction Design Programming
- 40. Consider the different scenarios
- 41. 3. Site Structure • Homepage Vs Content Structure • Keep it simple • Mapping the user’s journey • Consider different scenarios
- 42. 4. Page Function
- 43. The more detail, the easier the implementation PAGE OBJECTIVE TEMP. ELEMENT CONTENT DEST. Contact Information Easy access to contact details Location map (directions) Article Page Title 256 text field Quality Control Content Body Open text area Google Map Coordinates (map) Banner Simple banner Feedback Form Collect customer feedback Reduce phone complaints Form Name Text field FAQ E-mail Text field (Verified) Message 256 text field Submit Button Cancel Button FAQ Module Top 3 Questions Alert/Message Inform user of interaction result Thank You, Field Verification, Other Issues Message Title 256 text field Message Open text area Back (History) Button
- 44. 4. Page Function • Objective for each page • Template used • Elements – detailed list • Content (including fields) • Preferred next destination
- 46. Strictly follow usability guidelines Homepage Usability Task Orientation Forms & Data Entry Page Layout & Visual Designs Writing & Content Quality Trust & Credibility Interaction Design Programming Navigation & IA Search Usability Help, Feedback & Tolerance Interaction Design
- 47. Make use of the latest interface technologies
- 48. Follow SEO best practices
- 50. 5. Technical Minimalism • Usability Guidelines • Latest Interface Technologies • SEO (Best Practices) • Compression / Optimization
- 51. 6. Layout Issues
- 52. Don’t lose focus of the site/page objective Content Corporate Identity Web Page
- 53. Limited Variations (colors, fonts, grids, etc.)
- 54. Strictly follow a layout grid (pixel-perfect alignment)
- 55. Spend time experimenting with type
- 57. Use real content when designing
- 58. Consider docking elements (header / footer)
- 59. Try starting with inside pages to ensure focus on content
- 60. 6. Layout Issues • Don’t lose focus • Use limited variations • Respect the grid • Develop a hierarchy for type • Maximize the white space • Design with real content • Consider docking elements • Start with inside pages
- 61. Conclusion
- 62. Present content logically, laying it out following usability guidelines
- 63. Each has its beauty
- 64. Links UsableWeb.com UsabilityNet.org Google.com/design SmashingMagazine.com WebDesignerDepot.com Usability.gov WebMonkey.com SkilledUp.com
- 65. https://twitter.com/zeldman https://twitter.com/aarron https://twitter.com/andybudd https://twitter.com/jasongraphix https://twitter.com/jasonsantamaria https://twitter.com/simplebits Who to follow?
- 66. Thank You Mohamed Gabel GlueTube Managing Director Gabel@GlueTube.com www.GlueTube.com