First Day of Conference
Please note: I’m still correcting misspellings and adding links to the article.
Clip: same material, different design
Pencil: well designed o e (life is too short to use an ugly pencil)
Innovation vs Iteraction: amazing discoveries/graphics with 0.1 difference between them (from squares to circle!)
The accidental news explorer: made for himself, new feature just used by 2% of users (but two weeks of work)
Electronic brick without soldering. Box of digital things.
“Data by itself is not enough, data needs poetry”
Be naive: the egg cup example (old fashion way or wait four hours to print one)
“Own what it is that makes you different” Aimee Mullin
To take home: build for yourself! It spark your creativity, it makes you the critic and the nice client…
Paul Boag presentation – Client-centric design
(boagworld.com/books/clientcentric)
He loves to work with client. He e mentions that sometimes people that are used to user-centric design hate to work with clients.
Five Keys of Success
Respect: between client and designer most of the time the client knows their user better than us (the designer), they might have more expertise in other areas than us, and could be beneficial to us too. Be confident, not arrogant. More a peer-to-peer relationship than a customer-supplier relationship. Expert by association Willing to change, Show your work, what you have done before. Clearly defined roles (the designer will get the solutions, the client will give the problem. So, don’t tell me to change blue to pink, tell me instead that you are concern with your female audience that might not like the corporate blue).
Good communication: avoid mistakes, or avoid surprises (Oh, that’s news to me! Oh! I didn’t know that…). Constant communication they will know what is going on and they will be confident with you and that will stop them micromanaging. Maybe have a better relationship with them. Don’t rely on electronic communication only.
Education: why bother to educate ourselves? Take time to review, stakeholder interviews give broader perspective, you will have different perspectives (if different stakeholders). TAKE TIME TO TAKE IT THROUGH WITH THEM, even if the suggestion is stupid, take time to explain to them and also explain why you refuse a suggestion. Try not to be the “No person”.. Swallow your pride if the client has a better idea than yours… just acknowledge it and involve them and get them mock-up with them with paper wireframes, show reference of previous work, justify changes (if different from moodboards or wireframes). Don’t end the presentation with the question “so what do you think?” because that is personal question, personal questions will get personal answers like “I don’t like the green”. Instead ask “Do you agree what…” (the design appeals with the target audience? that the homepage is
Collaborations
Jquery rocks my world
by Matt Gifford
@coldfumonkey
do you like your job?
frustration on initial javascript use docs.jquery.com
His request: customise, don’t use the theme roll only, make it your own!!!
Again phoneGap… time to use it!!!!
xui.js (streamlined version of jQuery)
Another recommendation: read the Hardboiled design book! (that I already bought!!!!)
“Sizzle” – standalone javascript classes (but already included on jQuery)
Animations: think about the requirement, is it really necessary to have carrousel? do you believe on the ‘fold’? think about what your user might want and don’t make things harder than they need to be. You could use javascript to load a specific css IF the user has javascript enabled, so, first you load the simple html/css as if the user didn’t have javascript enabled, then you can add the css class IF javascript is enabled.
Cache variables for example…
$(‘£item’).css(‘color’,’£fff00′);
var item = $(‘hashitem’);
item.css(‘color’,’fff000′);
.colour
.border
Make an effort to make things smaller (js compressor for example)
Beautiful Code – Style guides
idiomatic.js
We’re all ‘Inspioneers’
Today is just another day
Inform to Inspire
Stephanie Treivertth
@sniffles
really crowded session, assuming is quite popular (or people really didn’t want to learn about accessibility)
Creativity, when an idea came up in your head? Feel that ‘aha’ moment
Book: The Myths of Innovation by Scott Berkun
Note that we can get too attached to ideas… it is dangerous to do that….
Give your mind a rest!
“the frog at the bottom of a well” (narrow-minded person). When generating ideas, are you a frog at the bottom of the well? how wide is your perspective? Expand our world (crawl out of our well)!!!
Check: Open Ideo online (huge collection of ideas from inspiration to conception – applause (review) – implementation)
by the @standardistas “Good Ideas Grow on Paper”
Problem framing – what problem are we solving and who are we solving for? why? impact? how to measure the success?
Tools: The Business Model Canvas and User modelling with user matrices (uncover your underlying assumptions, on behaviour, needs and motivation, etc), validate your research
Research (and conquer): ask questions!!!! and look for some answers. Wonder if….? Would it….? etc… and form hypothesis.
Common user research methods: analytics, surveys, card sorting, scenario testing, personas, ‘listening labs’, interviews,
Try it for size, sketch, prototype! (Leah Buley’s six-up – check online).
Sketching multiple times allows you to not cling much into one specific idea/solution.
Check “Web Standard SHERPA” website. – test a small part of the design/idea and prototype, don’t need to prototype big things or everything to test/validate idea…. if the idea is not good, scrap it!!!
A Monday to Friday schedule
Morning: Problem framing > Incubate > Inspiration & research > Prototype > Incubate
Afternoon: Incubate > Incubate > Incubate > Incubate > Prototype
“Your creative process is not an assembly line”!!!
Inspiration is not magic. Inspiration is in your hands.
Web typography, the good bits
Jon Tan (@jontangerine)
http://jontangerine.com
Working mostly on Impact (to impinge on, grab attention) and Immersion (absorbing involvement)
How to set type and why it matters?
Book: What is reading for? by Robert Bringhurst
“You give people some simple, abstract marks… and they supply the pictures for themselves.” quoting What is reading for? book by Robert Bringhurst – Jon Tan talk at FOWD
Environments are different, different text/type display. Some have standard smoothing (XP), some has GDI and clearType (XP/Vista), some have directWrite and clearType (Win7), OS X have core text and core graphics, others have freeType
Fonts:
– BellCentenial type for yellowpages, for example
– Abril Text Regular
– Siri Core + Schoolbook
– Sentinel test of non-sense agh!iIl1 (test for legibility in each font)
Choosing type for utility
some are optimised for web, check licence for websites,
Devilish details…
Detail in Typography by Jost Hochuli BOOK
he tests agh!iIl1 on typeface or others to get the difference between typefaces.
Not all ligatures help, they are good for decoration and heading but not for current text
The five “stupendous extracts” o sweet ACME’s fjorns
&&£160; (hash) google it!
Use opentype features, for example in CSS: -moz-font-feature-settings:”liga=1″
.swash{font-faily: @TrilogFatfactExperSubseRegula@, Georgia, serif;}
Eric Tan
Ampersand web typography conference @ampersandconf
Pilimco font, check!
Check scanpath with photo taken from mobile.
Greg Perkins website – grainandgram.com
I love typography: the origins of abc
Don’t ask people to ping-pong around the interface
Grids (Analog)
Hierarchy : Hue & lumosity, Size
Scan paths, saccades, fixations,
“There are no rules, just good decisions”
The form communicates something very quickly despite the word meaning (love/hate example with typefaces)
Wall-e picture of him holding a bra
(gesture without words, but meaning already can be understood with the gestures)
Fonts are wayfinding apps for emotions.
Book: Branding with Type (Stefan Rogener)
Mother & Child logo
Brooklyn Beta conference (and type?)
lostwolrd fairs/atlantis
kittchensinkstudios.com
goodcorps.com
“”Details in typefaces are
“Don’t think. Feel.
SmashingMagazine
1) why redesign? if design doesn’t reflect structure, was slow, bloated codebase, difficult navigation
2) goals and requirements: content/type-focused design, consistent navigation,, lean semantic code base (css/html5 + wordpress), fully accessible without js, responsible, support IE*+ with adds only for bigger screens than 1028px
they created the design persona…. document that outlines the key traits of the personality you with to convey in a design.
Get Existing attributes, wishlist and no-go attributes.
they wrote a “redesign manifesto” (primarily focus on readability of site” (etc)
Check FONTBOOK/proforma
Use mood boards, test a few designs with paper, check colour schemes?
4)Typography-out approach
They iterate the website direcly on the browser, they used HTML5 boilerplate (customised), modernizr, respond.js and existing styles were overwritten by new styles.
they didn’t use many images with gradients, etc, just sprites and css. They did a few transitions
check .myclass * {box-sizing: border-box;}
7)Performance Optimisation
Tilt to navigate in 3D and see structures…
they used advanced caching, minified css/js+gzip compression, minified/cached images for mobile, conditinal loading with js/php
they used Fontdeck – they use free fonts – optimised
8) Relaunch
Smashing Magazine’s Redesign Case Study
Spotify
He did a Data-driven development
Never underestimate designer-developer relationship! Try not to see them as separate entity.
Version control, js, etc
@asmitter
open.spotify.com/user/andysmith
developer.spotify.com
Dr Weblove
designer-developer relationship (designers that had design destroyed by developer, developer that couldn’t work with design because designer didn’t do a good job)
If designing with PSD, give hover states for every thing/element that needs one. If there is a button sign in or something that could have a message error/warning/tip after the user presses, remember to design space for it.
Check grid alignment, all elements!
Check full frontal javascript conference for example.
He implemented Radiohead animation on RadioHead
Touch vs Hold vs Drag, vs tab vs double tab, etc… sit the client to understand the correct requirements.
Charge extras for ‘painpoints’ like IE6 support or two weeks deadlines, etc.
Estimates and quotes: get it wrong first, track your hours, compare to the quote (not exactly to track productivity but how long it actually took and also to get a proper estimate for future projects)
Deadlines: don’t miss them! don’t slip and slip and slip! (just choose a date you can definetely hit and stick to it). Very few deadlines can’t be moved (embarrassing maybe but not life/death situation, which leads to…) urent rarely means urgent (if it is late at night, put a overcharge to it, maybe 400%??? if it is really urgent they will pay, if not they will reconsider). Prototype early but chuck the prototype if they are not used!
Style: choose (style for design desktop fixed width, for the lowest possible, style “a la gmail style”)
Do javascript last
jQuery plugins are bling (good for fast prototyping, quality is mixed, they often do way more than you need.
try ixedit.com, jqueryfordesigners.com
11. build without jQuery
2.design the start and end of effects without jQuery
Recap
1.remember function as well as form
2.anticipate the invisibles
3.prototype
4.KI(RF)SS
Remy Sharp
@rem
leftlogic.com
Conference Day 2
Standardistas
hellofisher.com
@hellofisher
company: yellowpencil
responsiveprocess.com
that’s where they are registering the process of the redesign of their website in a responsive form
Funny way of describing himself, with loads of pictures and faces, etc.
and the tile from UX Director to Web Designer.
“The web is not fixed width!”
Discovery Phase
Kickoff meeting – knowing who is who
Project Analysis – business requirements, personas (to find motivations behind user groups)
IX – discovery
Check gathercontent.com
Strategic Direction – know that you are on the right track, so all the information on the gathering requirements, here you should set the budget and scope
Design phase
sketching, documenting, etc
Link to “Zombies in Plain English”
UX Sketches – encourages paper prototype, but sees it is important to push into the browser asap for the responsiveness (sketchbooks)
Page Tables – abstract the content from the design (stories are data with a soul)
Interaction Design – here you get into the browser, the wireframes (foundation prototyping/wireframes) http://wireframes.linowski.ca/2012/04/foundation/ Bootstrap from twitter also suggested to wireframing.
Visual Design – graphic then browser than back and forward and is important
http://styletil.es – visual web design process for clients
Style Guides – check http://nthn.me/posts/2009/interface-harmony.html
Develop Phase
www.sonypictures.com/previews/
HTML Build
CMS Build – Drupal/Open…./
Browser & Device Testing – check Adobe Shadow video!
Deploy Phase
User Acceptance Testing – difference between what you did and what the customer expect
Documentation & Training – important step and shouldn’t be missed (sharing)
Launch Plan & Release
Start of Operation Plan – that’s where actually when the lifetime of the site starts
“Golden Circle” – Simon Simmons (?) on TED.
What / How / Why – the example of the Apple motives of ‘changing the world’
Focus on the why, design find answers, find solutions,
Responsive design maybe it will be simpler.
It is about Content, bringing unification, create Once Publish Everywhere
Future friendly www.futurefriend.ly
Start with the Why & everything
Touch
tiny button – change to gestures
touch-up app
How to find what you can’t see
THE OCD Chef board – funny
“The message is the medium (salt and pepper example)
Nobody can read the manual (RTFM)
If you cannot make the user read the manual, you can show it! (as a video) bit.ly/our-choice
“Nature doesn’t have instructions” (what’s that interface? how can I interact with it?)
Love the one (interface) you are with
The Sydney Morning Herald nice touch interface with some good shortcuts – it is a hybrid, not a web, not a paper, not a desktop, not a phone, etc…
“Play more video games” – tell your boss you are doing research! the game doesn’t make you read manual, it teaches you….
1. Coaching (learn by doing it, someone shows you and you try, and do it again until you develop a memory) – game: overlay, google docs showing a new featue, overlay of tours (facebook), sshow little cues/clues only.
2. Leveling up (you just show a clue when user needs the feature for first time) (infinity blade for ipad: do you want to block?) think about the levels on your apps, how to change one level to other for your users
3. Power ups (little badges, incentives, etc)
Make it exciting!
@globalmoxie – www.globalmoxie.com
Social Networking – Bill Buxton
UbiComp – ubiqutous computing – notion of multiple computers, things are everywhere – transparency (the dinning table is not invisible but it is transparent in your dinning area because it is its place, if it was in your toilet would ‘scream at you’)
How many motors you have in your car? 1? 2? 3? you have aabout 50! (the wipers, the mirror controllers, the seat back/forward etc.)
Who is the spider? (on the web) – the cloud? – you? (everyone is at the center of your web? the cloud is a service, it is not the center of the world. You are.
Devices contacting each other: no reaction; human hug: some reaction.
Ink browsers
(poster, paper, money, sign posts, adverts, scrap paper are all candidates to be digitised/electronic)
It is about location, the context makes it appropriate or not.
Ebooks – video display in 2009 inside a magazine (Entertainment Weekly, Sept 09 – 40 min video/ 6hs replay)
Coca-cola vending machine interactive display, Yahoo on bus stops interactive displays (Washington or Bay Area). “The future is already here is just not properly distributed”
Ubicomp + society of devices
Nike on bus stop – this is not a popup ad on an application, this is an popup app on an ad!
It is about economics…. ‘transaction cost’ (Ronald H. Coase Nobel 1991). There is a cost for every transaction, but the cost of transaction changed (type, currency: joy, risk, etc.)
Knetic already existed before (sensor to open the door)
TV with remote control (duplicate of what already exists) but if you could provide reasoning why that cost (in whatever currency) makes sense, you can make it to market! Simply adding the extra control, changed a whole business: synchronised tv channels adverts, pace of editing is faster, changed the cinema industry because we got used to a new reality.
Lever devices, location and the opportunities are unbelievable. Think about a few years ahead of what we have/make today rationalise on the short term and channel the skills to the future goal.
“A futurist should also be a historian”
check his website!!!
It is about the transitions! that’s what happened on the iPhone. Each screen is not as different, but the transactions made the difference.
Unbelievable finishing after question of Bill’s presentation. Amazing example (phone on car, talk, dictate, answer, turn-off car, walk away with phone in hand) cell towers were used but you are not aware, if you are there’s a failure in design.
Blueleaf – Chris
Is it human? Technology is complex, web is for communicating with people we sometimes loose sight of that.
White&Co (white stuff) website
Seth Godin “figure it out the human part and the rest is simpler”
@blueleafchris
Psychological influences of he internet
Designer/psychologist
We do everything at speed and at once (tweet, like, email, read, download, view, watch, etc.) leads to stress, made us not have time of creative process (that happens on a deeper level).
Reduce clutter to increase learning and success. Myth that 10% of our brain is not used. In fact 10% is what whe are AWARE of, but is still functional.
The Coffee Cup Entrepreneur – Graham
If you have an idea, do it now, not in 2 years!
No fear, no surprise, no doubt (stop procrastinating),
@jgtweeting
In defence of mobile diversity – some quick tips for porting your iOS designs to Android
try to use different ways of approaching the development, for example, menu on iphone is at the bottom, but on android should be at the top to not compete with phone navigation buttons.
The future of beautiful IOS design
by Sarah Parmenter
Mobile use is 10% in 2011, in UK iOS is first, then Blackberry, worldwide Symbian first then iOS – GS.statcounter.com
Mobile first book (Luke w.) and Responsive design book (Ethan Marcotte)
No more ‘one size fits all’
1.Design with real content
(Kristina Halvorson – An Event Apart, Chicago) – ‘stop using lorem ipsum and boxes – think through real content implications.’
check ‘content strategy’ book from her
Mark Boulton – markboulton.co.uk/journal
You can create good experiences without knowing the content. You can’t create good experiences without knowing your content structure.
Tip: quick sketch, then content
Blue butterfly – chip inside paper
check-ins
Originally too much content, then did content review and scale down number of pages as well as content.
native development: making too many PSD
2. Progressive disclosure
‘Initially, show users only of the few important users’
3. Tap Targets
average finger size: 45-57px, thumb 57px. Apple did 44x44px as general and 44x22px minimum!
Orientations: users have preference (portrait/landscape) designers actually keep switching views.
Be adaptable, be flexible and understand it’s ok for it to be completely different, as it is an entirely different experience.
completely different UX for portrait and landscape, example: weightbot
She develop (or helped) “my donorcard”
Use of Scratch files
New app by layer cake
Responsive Design
Process has to be down on paper so we can pass things around to other people, it is a problem with workflow, how we produce and tell clients about the design.
Resolutions – the common breakpoints:
320px mobile portrain
480px mobile landscape
600px small tablet
768px tablet portrait
1024px tablet landscape/netbook
1280px desktop
dConstruct website great scale
Start thinking in terms of puzzle pieces, rather than the finished picture.
She tweets at @sazzy
App to quickly snap things into breakpoints APTUS
Pattern Libraries – this is what we should be heading regarding responsive webdesigns.
Colours, secondary colours, what the buttons would look like, status messages, forms, etc.
Mailchimp have an UI Pattern Library!
Notice some common elements, like the main navigation button like twitter bootstrap tree stripes button.
Retina display
optimising for retina display can be done via css. So, you simply recognise the device you can download the bigger image (think about the user too)
youknowwhodesign.com
sazzy.co.uk
Help! my stylesheets are a mess!!!
Chris Eppstein
@chriseppstein
caring.com – his case study
@shodoshan and @tractorstudios
instead of using markup + style
they changed to
.foundational{…} +
Structure of this css (mixins)
project/
library/
_config.scss
_grid.scss
_medias.scss
foundation/
_reset.scss
_layout.scss
_containers.scss
app/
features/
_feature1.scss
pages/
page1.scss
products/
app.scss
Style Concern: typography – define how a collection of typographic elements are styled; vertical rhythm, there is no default typography.
“use vertical rhythm!”
Style concern:container: accommodate whatever content you put in them and define separators
Style concern: spacers – add space using dimensions from the vertical-rhythm and grid, margins, paddings un-paddings.
Style concern: background – give colour, imagery
Style concern: foreground – give colour to type and borders often linked to background
Style concern: lists/tables/forms – unique beats, might be part of typography, use them semantically, class on the main element
Style concern:widgets – for interactive elements, SMACSS – Jonathan Snook (check book!)
Style Concern: theming – color palette, semantic color relationships, default variables, compile stylesheet with a different configuration
Naming is hard when building a styleguide
the name to find the INTENT of the design/app
Use IDs for UNIQUE page elements.
Structure of a Library module
1.dependency imports
2.variables, almost always defaulted
3.functions
4.mixings
5.placeholders selectors
6.style selectors
READ COMPASS – Compass is a Mixin Library
Documentation
– it is better to show than tell
– make a living style guide for documentation and prototyping
– this is your design catalog
– teach the design don’t just exemplify
Downsides
– learning curve
– harder do dbug
– classitis
– a lot of work
Benefits
– file size
– efficient communication
– low coupling (rich vocabulary that you can mix and match)
– built to last
umdf.org/compass is charityware
learn how to be like a toddler, continue trying instead of giving up. People trying to skateboarding and failed, and never tried again. Public humiliation could change your personal experience. – Mark Boulton