the science of subtraction: a minimalist guide to web design

A Minimalist Guide to Web DesignThe Science of Subtraction

November 2014

Mohamed Gabel | GlueTube Managing Director | [email protected] | www.gluetube.com

History of Minimalism

Art movement result of / in response to other movements

Came form architects, modern sculptors

Used all over.. fashion, décor, architecture, automotive, etc.

Achieving desired effect using the minimum elements

Advantages

Usability Guidelines

Focus on content

Easy Navigation

Less complex code

Smaller file size

Pitfalls

Extensive Planning

Content-driven Design

Demanding on-going work load

Loosing focus of site/page purpose/objective

Before We Start

nor PSD/AIDoesn’t start with a sketch

Graphic Design

CITY MIN MAX CONDITION

Jeddah 24 17 Partly Cloudy

Riyadh 18 9 Cloudy

Dammam 14 6 Rain / Storm

Information Design

24/1718/9

14/6

Research, Analysis, & Logic (Role Playing)

Minimal Content: Must-have content – objectively

Pixel-precession implementation

Designing a Minimalist Website

Steps to the minimalist approach

1. Project Research2. Site Purpose3. Site Structure 4. Page Function5. Technical Minimalism 6. Layout Issues

1. Project Research

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.)

Analyze Benchmarks (local & International)

www.ge.com www.jpmorganchase.comwww.exxonmobil.com

www.kingdom.com.sa www.nesma.com

Brand Identity Manual

1. Project Research

• Company Information • Benchmarks (local & International) • Analysis of features & trends• Brand Identity Manual

2. Site Purpose

Objective: Why are we developing this site?

Audience: Who will be using this site?

2. Site Purpose

• Objective: Why are we developing this site?

• Audience: Who will be using this site?

3. Site Structure

Homepage Vs Content Structure

Keep it simple

Realized users needs offered at their convenience to achieve an objective

Realized users needs offered at their convenience to achieve an objective

Writing Language Graphic Design

Sound Motion

Information Design Interface Design

Interaction Design Programming

Consider the different scenarios

3. Site Structure

• Homepage Vs Content Structure• Keep it simple• Mapping the user’s journey • Consider different scenarios

4. Page Function

The more detail, the easier the implementation

PAGE OBJECTIVE TEMP. ELEMENT CONTENT DEST.

Contact Information

Easy access to contact detailsLocation 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 feedbackReduce 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 resultThank You, Field Verification, Other Issues

Message Title 256 text field

Message Open text area

Back (History) Button

4. Page Function

• Objective for each page• Template used• Elements – detailed list• Content (including fields)• Preferred next destination

5. Technical Minimalism

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

Make use of the latest interface technologies

Follow SEO best practices

Compression / Optimization

5. Technical Minimalism

• Usability Guidelines • Latest Interface Technologies• SEO (Best Practices)• Compression / Optimization

6. Layout Issues

Don’t lose focus of the site/page objective

Content

Corporate Identity

Web Page

Limited Variations (colors, fonts, grids, etc.)

Strictly follow a layout grid (pixel-perfect alignment)

Spend time experimenting with type

Embrace white space

Use real content when designing

Consider docking elements (header / footer)

Try starting with inside pages to ensure focus on content

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

Conclusion

Present content logically, laying it out following usability guidelines

Each has its beauty

Links

UsableWeb.com

UsabilityNet.org

Google.com/design

SmashingMagazine.com WebDesignerDepot.com

Usability.gov

WebMonkey.com

SkilledUp.com

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?

Thank You

Mohamed GabelGlueTube Managing Director

[email protected]