“But here’s the thing: the web is far more fragile than we might like to admit. It’s fraught with uncertainty—a connection could be dropped, or a network’s latency could be too high—which means entire elements of our designs might never reach our users.” – Ethan Marcotte
“Sometimes you’ll make choices that favor performance; other times, you’ll make choices that favor aesthetics. The key is using all the information available to you to make the right decision for you and your site.” – Lara Hogan
Design Development Mockup designs in code • Run performance tests on early designs • Designer & Developer pair up to refine/address problem areas Get into code early!
1. What is a performance budget? 2. What is this project’s budget? • Cite goals/requirements 3. Why are we using this? 4. How we add new features • (optimize, remove, or don’t add) 5. Every template’s weight 6. Image optimization guide Define for them:
“The weight of a font kit is arguably more important to a site’s performance versus other heavy hitters (like images), because fonts are loaded on every single page.” – Alternatives to Popular Web Typefaces for Better Performance
Pick your favorite site, or choose one from awwwards.com. Run it through webpagetest.org & sketch/list out ideas for ways the design could be faster. EXERCISE
“Epicenter design focuses on the true essence of the page — the epicenter — and then builds outward.” https://gettingreal.37signals.com/ch09_Epicenter_Design.php
“Once you have your styles for the site established, plugging them into the homepage should be a breeze. You will likely find yourself only writing a couple new styles.” – Marshall Norman
“Responsive deliverables should look a lot like fully- functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs.” –Dave Rupert
Jump into Typecast, choose “Type On Screen” template and play around with typography styles for your own personal blog (or for a ConvergeSE blog) EXERCISE
“We may pride ourselves on building a great product, but it’s ultimately up to the client to see it succeed or fail. Even the best website can become neglected, underused, or messy without a little education and training.”
Keeping in mind the styles you created in Typecast, sketch a “client-proof” page layout given these content needs: Blog image, article title, author, date, excerpt Featured Blog treatment EXERCISE
jeremyloyd
uxaustralia
hatena
kakukoki
hiranotomoki
siteengine
ryanm519
nishina
sakito
yd_niku
fujiiitakarin
mclloyd
phodgson
sachag
lynnandtonic
kastner
pedronauck
vanstee
cassininazir
robhawkes
destraynor
lauravandoore
lara