Design4Drupal - Boston 2013
Design Matters
{:class="img-polaroid"}
Day 1
Designing for a Moving Target
RichardBanfield
How do we make design future proof?
Great Product Lovely Biz Model Awesome UX
Our brains are designed to focus our attention one thing at a time.
Focus makes us seem smarter? We cannot see the forest because we see the only the tree.
"The things I'm going to be working on have not been invited."
60% of apples profit come from devices that haven't been around for even a decade.
Our biology is the answer for these problems.
Our evolutionary changes have not changed very quickly, fairly static in a human generation. If biology is the answer, then what about our biology do we need to design for. Our brains are the key to understanding how we need to design. Moving is the key for why we have a brain in the first place. Looking at simple organism, sea squart for example will digest it's brain when it is settled on a reef, no longer needed. Think about how we move.
Until now we have been design around technology.
Lovely as how beautiful our technology has become, it isn't natural.
Desktop request modification of our behavior.
Mobile is not a technology, mobile is a state.
More People will experience the web on their phones than on their PC. Of course this is not news to anyone.
We are seeing technology being designed for our body, for fitting in Google glass, Siri and other changing technology.
We now design around our body and behavior.
Get to know their hearts and mind.
When we know about our users, we should look beyond sex, age, nationality to see that people face the challenges low self-esteem, seeks direction, anxious about body image.
Humans are way more complex than their demographics...
Design for a lazy and irrational brain.
Why do we get headaches? Often because of low glucose, the brain is designed for a world of scarcity. Secondly, we are irrational, the economic choices we make are often irrational my Macbook Pro is an irrational choice.
We are emotional first and logical second.
Happiness make memories and learning.
The flow that happens when you're focused can greatly contribute to happiness. How can we really engage our users.
Why do designers need to be brain experts?
Strong emotional conclusion lead to trust and engagement.
Humans are unique in their recognition of facial emotions.
We need to include this in our designs -> 37Signals
Design tricks and persuades the mind.
The right content at the right time can evoke emotion.
We are not seeing a substitutional effect.
Triggers, motivations and ease of use.
Ease of use we have.
Tech change is inevitable but human remain somewhat the same. Understand the human so tech stops dictating the direction.
This is not just for scientists, it's just common sense. The greatest designer is biology.
Design Smarter Not Harder
Ken Woodsworth
Now creating a design for each page, then creating a design for each device becomes impossible.
Designing for interactions is a moving and impossible target.
Flat vs. Skeuomorphism
Why are we moving towards flat design? Maybe RWD.
"Times change and dropping qualifies is a good way to measure the changes."
Inception Principle
Design Process Process
- Establish Goals
- Large
- Many Smaller
- Communication
- Make sure that everyone knows the project goals.
- Include the client in the process.
- The steps, the goals and the deliverables.
- Make sure the client understands the goals.
- Tools
- Sketching without commiting to the design, then choose a heavier line weight for cmmiting.
- Paper is super helpful!
- Graphic software
- Photoshop, Fireworks.
- Sketch
- Interaction
- Prototyping sofatware.
- framerjs.com
Iterating, remove major changes.
Design kick off meeting
Excellent opporunity to bring people together and educate the client and learn from them.
Design Exploration
Style tiles or maybe Mood Boards.
Content Lists
Design Concept
Creating one version that allows for iterations.
Style Guide / Pattern Library
Creating a great resources for frontend
More Sketching
Start using this as a way to understand the layout of the components, find patterns to reuse for the front-end.
Day 2
Drapper Drupal
John Ferris & Garrett Dawson
Why make your own starter theme?
Case studies.
Front-end Developer
HTML+CSS+JS + everything drupal specific.
Typical Approach includes contributed modules, base themes, and starter themes.
What base theme do you use? We use theme as a guide the building proccess. At a point they no longer fit our workflow, but that also might assume that you end up using a particular nameing convention, CSS preproccessor or structure. Then the code might no longer be readable.
Contrib is still really rad, but we might end up with Fron-end tooling.
Make your own tools. There will be less unneeded cruff.
What about contrib? Well we need to contribute back to D.O.
Measuring Up.
- What markup problem?
- Who maintains the project?
- What's in the toolkit?
- What are the tools you want to use from toolkit.
- What do I want to fiddle with?
Case Studies
OpenFramework by Standford University
James Panton - Death of a Themer
Code Enigma
Aten Design Group
Centre + Prototype. Centre is used as the scaffolding. Prototype is used actually to style.
- inc
- hook bae themplate called in template.php
- sass
- base, components, layours, etc
- Js
- main.js, modularized Javascripts
- layouts
- templates and templates overrides
Nothing will be a one-size-fits-all solution
Get your measurements.
Continous imporvement.
Push your craft forward.
Interface Face-to-face
Throughout history, sci-fi shows that we are rethinking how humans will interface with technlogy. Google is using even the vission of the future will drive their design process.
We are starting to see that we are entering interfaces, that disappear. Eg. a prosthetic limb that responds to muscular signals.
Errors in science fiction. Errors of analogs (looking at something that exists now, and extrapolating it into a future use). Error of utility. Error of scale (looking at scaling a iOS interface to a wall), error of sterility (serving the minimal design of homogeniety), error of integrity (looking at needing so many devices for different functions) and the error of context (looking at cultural context in the future is hard).
What is an interface? Speaking is an interface. Pidgin, two linguistically incompatible cultures come into contact. When a pigin stays, it becomes a creole. Old English + Old Norse + Old French = Middle English.
Human-Machine Creole. Mechanization of humans, and the humanization of machine. This interface is a translations layer.
The death of skeumorphic. Look at iOS 7 and the change lead by Johnny Ives. Flat vs. Skeumorphic.
We are learning the creol of how to interact with machines, a child might expect to be able to zoom on a TV such as if it were an iPad.
Without these sensory outputs the machine couldn't be empathtic.
Empathetic Machine must be Beautiful. Diverse. Accessible. Adaptive.
Future of UI Designers Screen designers, Aural (auditory), Gestrure, Brain UI