We are Digital Architects

We are Digital Architects:

Evolving Our Design Language For the Web
by @Mustafa_x London Web Meetup, 15th May 2014

We are Digital Architects:

Evolving our design language
Language of the Digital Architect
Responsibility of the Digital Architect

Evolving our design language

We think in language, so the quality of our thoughts can only be as good as the quality of our language

George Carlin

Skeuomorphic Vs Flat

They are not antithetical

skjuːə(ʊ)mɔːf :
an object or feature which imitates the design of a similar artefact made from another material that was necessary in the original.

Image: Jackson Boyle

Flat design

Image: The internet

The graphic designer has an image in their head... like this page is going to look blue and wobbly... and will make it look blue and wobbly with what ever means it takes

Erik Spiekermann

Language of the Digital Architect

it’s important, you see, that you honor the material that you use…

Louis Kahn

Salk Institute for Biological Studies

Image: Wikipedia

Image: Jason Taellious

Language of the Digital Architect

Architecture is the thoughtful making of spaces
Every building must have... its own soul.
Honoring our materials

Materials of the Digital Architect

<a> <abbr> <address> <article> <aside>
			<b> <bdi> <bdo> <blockquote> <br> <button>
			<cite> <code> <datalist> <del>
			<details> <dfn> <div> <dl> <em> <fieldset>

			<figure> <footer> <form> <h1> <h2> <h3> <h4> …

Full page list

Golden Ratio: 1.6180

Root font size 16px * 1.6180 = 26px (Rounded)
Desired line-height & the next scale in the sequence
Keeping going.... 10px, 16px, 26px, 42px
Font / Base = EM conversion

Image: Wikipedia

Responsive Web Design

Columns widths are always changing
Font sizes need to change 'responsively'

gitlab.com/mustafa/responsive-type

Font dependant units - CH & EX

<p style="max-width: 75ch;">...</p>
<p style="line-height: 1ex;">...</p>

ch: The width of '0' glyph found in the font used to render it.
ex: The x-height of the first available font.
Both are equivalent to 0.5em (approx)

Responsibility of the Digital Architect

I saw the monuments, the great ancient remains. From every ruin I learned, from every building I absorbed something.

Mimar Sinan

Sulemaniye

Image: Dan

Interior Lamp

Image: Wikipedia

Image: Nermin Taylan

Vents

Image: Nermin Taylan

Upper room

Responsibility of the Digital Architect

Sinan was trying to understand the problem
Prototyping in increments... a bit like Agile
Testing his designs

Prototype

Image: Axure

Testing

Interviews & Prototypes
Surveys - qualtrics.com
A/B Testing - optimizely.com

Image: Biblioteca de la Facultad de Derecho y Ciencias del Trabajo

Summary

Ignore superficial language
Have conversations with our tools
Test and validate our ideas

Uncertainty, discovery and the creative process

Thank you
Questions?

@Mustafa_x
designtoday.info
Presentation made with: Shower

We are Digital Architects:

We are Digital Architects:

Evolving our design language

Skeuomorphic Vs Flat

They are not antithetical

Flat design

Language of the Digital Architect

Salk Institute for Biological Studies

Language of the Digital Architect

Materials of the Digital Architect

Golden Ratio: 1.6180

Responsive Web Design

gitlab.com/mustafa/responsive-type

Font dependant units - CH & EX

Responsibility of the Digital Architect

Sulemaniye

Interior Lamp

Vents

Upper room

Responsibility of the Digital Architect

Prototype

Testing

Summary

Uncertainty, discovery and the creative process

Thank you Questions?

Thank you
Questions?