ArabNet Riyadh 2014, Design + Code Day, November 11 Title: The Science of Subtraction: A Minimalist Guide to Web Design Speaker: Mohamed Gabel, Managing Director, GlueTube, @mogabel This workshop will teach participants how to use a minimalist approach to designing & enhancing websites

1. A Minimalist Guide to Web Design
The Science of Subtraction
November 2014
Mohamed Gabel | GlueTube Managing Director | gabel@gluetube.com | www.gluetube.com

2. History of Minimalism

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

8. Usability Guidelines

9. Focus on content

10. Easy Navigation

11. Less complex code

12. Smaller file size

13. Pitfalls

14. Extensive Planning

15. Content-driven Design

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

23. Pixel-precession implementation

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

26. 1. Project Research

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

29. Brand Identity Manual

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?

35. 3. Site Structure

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

45. 5. Technical Minimalism

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

49. Compression / Optimization

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

56. Embrace white space

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