Select Page

So… what do I make? by Dan Mall – Notes from An Event Apart Talk

Feb 16, 2015 | An Event Apart 2015, Design, Musings

In the web industry, we are typically categorized by titles, tools, and output.
Titles
Designer
Developer
Content Strategist
Information Architechts
Tools
Photoshop
Sketch
Codepen
Omnigraffel
Microsoft Word & Excel
Output
Comps
Code
Copy
Wireframes
We silo ourselves into buckets, but the problems tend to occur in between the silos where there are gaps. So how do we get rid of those gaps?
Goals for new tools and output:
  1. Highest fidelity output in the shortest amount of time
  2. Remove abstractions wherever possible – sometimes we present things that our bosses/clients don’t understand but they approve it anyway and then we run into an issue down the road
  3. All deliverables come with conversation – a lot of times we just let our deliverable stand on its own, but there is a lot that is unsaid. Relieve the deliverable from the pressure of selling itself
This lead him to the idea of Frameworks instead of processes. Within a process, there are no surprises and no variations. Within a framework, we know where the boundaries are but we can have a different situation within the framework each time and have surprises! He thinks design should happen more in frameworks to allow for surprises.

Designers should PLAN more.
Interviewing
Dan loves interviewing because it helps him as a designer. He was working on a redesign for a magazine whose readers were primarily women. They interviewed a bunch of readers and took their findings to the kick-off meeting. They found that the readers searched and browsed a lot, and rarely used the navigation. So, for the design, the choices on navigation may not matter much.
Also, readers wanted to be told what products to buy. The magazine didn’t do that intentionally because they didn’t want to be too pushy, but by asking questions they figured out that’s what readers wanted an they could completely change the magazine’s business model for the website!
Manifestos
Dan likes to write Manifestos.
Before he designs anything he writes. When he gets stuck, he writes.
Manifestos need to contain creative direction. He feels like the web is lacking in strong creative direction, and without direction everything just feels vanilla.
Creative direction contains a point of view, a perspective.
You want to have a site that ONLY you / your company could own.
Jared Spool has a great article on writing “The Magical Short-Form Creative Brief”. This is incredible helpful as a designer to start you on the right foot for your framework.
Designers should INVENTORY more.
Interface Inventory
For example inventory all the different types of button on your site, and make sure they are in line with your creative vision / direction.
Performance Budget Inventory
He worked on Radio Free Europe’s site, and performance for this site was literally a life or death situation because people were jailed or killed for accessing the site. (The site reports news for countries that don’t have established news or where news is banned)
So how do you create a performance budget? 
They ran the site through webpagetest.org
  • Start Render time
  • Visually complete time
  • Fully loaded time
Then they ran the same test for some of their competitors, and identified the fastest site of the bunch.
They could have stopped there, but there is a great piece of data that says people perceive tasks as faster or slower when there’s at least a 20% time difference. So, they just lobbed off 20% from the fastest site’s metrics, and made that their performance budget / target times.
Some conversions need to happen now. They were working with 3G speed which is based on 768 kilobits per second.
8 bits = 1 byte
768 kbsp / 8 bits/byte = 96 kbs/sec
Start Render Target: 3.354s render time * 96 kb/s = 321.98 kb
So everything that goes down the pipe needs to be under 321.98 kilobytes.
You can take these metrics and figure out what constraints you have to design within. This way your design process is informed and can meet performance goals.
Visual Inventory
Color
Concept
Tone
By taking a visual inventory of a bunch of websites with different approaches to color, different concepts behind the design, and different tones can be really helpful and a great way to start a project!
This may take 2-3 hours instead of the 2-3 weeks it would take to make that many comps!
He has a Keynote template for a Visual Inventory is.gd/visualinventory
Designers should SKETCH
Element Collage
Turn powerful phrases into visual hooks
Designers do their best work when they do the stuff they are excited about.
Make a collage of the elements you have designed (just put the elements straight down the page in no particular order)
Element collages are like giving your client a peek at all those hidden layers. You’re not showing them the magical one true solution, you’re showing them the rough ideas and variations and having a conversation about them.
Why not just skip Photoshop and design in the browser?
It’s often the same as SKIPPING DESIGN, and that’s not a good thing. Design is a process that can’t be skipped.
Saying designers should learn to code is like saying designers should just become developers, which also isn’t cool.
Sites that are designed in the browser kind of look like they’re designed in the browser. Nobody sets out to do that, but we just don’t have the tools to design in the browser well.
Creators need an immediate connection to what they create. You need to see the effect of a decision immediately. So working blindly in code violates this principle.
So much of creation is about discovery, and you can’t discover anything if you can’t see what you’re doing. Many of our tools don’t allow us to see what we’re doing. Photoshop doesn’t allow us to see how something will look in the browser, and coding doesn’t let us see what it will look like either.
Change “designing in the browser” to “deciding in the browser”.
Prototyping
Prototype ugly. A prototype should be something anyone can do.
Each prototype should solve one problem and one problem only, and should have notes / a trail that someone could follow.
After the 200-500 prototypes each solving one problem, you just have to assemble the pieces together, you already have a site!
Designers should ASSEMBLE
Mise en place – Means everything in its place. You get all your ingredients prepared and chopped and in its place and ready, and then cooking is easy.
This is how we should be working on website and web apps!
Use Libraries
Adobe Libraries – design
Pattern Lab – code
http://is.gd/mjbeatit – Michael Jackson recording / prototyping beat it even though he didn’t play those instruments, he did it with his voice.
EMPATHY
We need empathy to work better. It’s not reinvention, your job is not over, but our jobs are evolving.
——-
Tools:
ommwriter.com
Automatically defaults to full-screen, to eliminate all distractions
OmniGraffer – good for information architecture
TypeCast – it basically gives you a ton of type choices in the browser that it aggregates from different web servers

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

how-to-choose-a-wordpress-theme-thumbnail

How To Choose A WordPress Theme For Your Website

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier. This is a 5 page guide with an approximately 4 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

where-to-host-thumbnail

Where To Host Your WordPress Website and Why It Matters

In this guide we discuss what makes 'good hosting' including security, speed, and support. We tell you who we use and why, and give you a coupon! YAY COUPONS! This is a 45 page guide with an approximately 3 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

8-next-level-plugins-cover

8 WordPress Plugins That Can Take Your Website To The Next Level

For our business clients, we install some specialized WordPress plugins. Get our list of the 8 next level plugins we love and the use case for each. 

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm

5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.