Unlike many other industries, the web design community is all about sharing knowledge and experience. Each of us is very lucky to be part of such a great and useful learning environment, and it is up to us to embrace it — to embrace our learning experiences, and also to embrace our ability to share.
Not only are case studies a great way to explain the design process of an agency, but they also help designers and developers to learn from each other. Seeing how designers work, create, build and play is great, and furthermore, you can learn how to write a great case study yourself and how to use one to spice up your portfolio1.
Further Reading on SmashingMag: Link
- 75 Instructive Case Studies – This Is How We Built It2
- Showcase of Case Studies in Design Portfolios3
- 15 Impressive Case Studies from Behance4
- Improving Smashing Magazine’s Performance: A Case Study5
In this overview of useful case studies, we’ve featured studies that have recounted decisions made about particular design elements, as well as studies of full overhauls and their accompanying technical challenges. Most of them provide interesting insights into failures and successes, stories, workflows and design decisions made and rejected.
We must admit that this post is quite a long one, so we’ve decided to divide it into two parts to make it easier for you to navigate. Now you should be well prepared for a couple of late reading sessions over the next weekends!
Here is a quick list of the categories covered:
- Illustration, Graphics and Logo Design6
- Advertising, Promotion and E-Commerce9
- Redesigning Elements and Features10
- Complete (Re)branding and (Re)design11
- Content and Storytelling12
- Technical Challenges and Solutions13
- Workflow and Optimization14
- Last Click15
- Illustration, Graphics and Logo Design16
- Usability Design18
- Advertising, Promotion and E-Commerce19
- Redesigning Elements and Features20
- Complete (Re)branding and (Re)design21
- Content and Storytelling (appears on a new page)22
- Technical Challenges and Solutions23
- Workflow and Optimization24
- Last Click25
Illustration, Graphics And Logo Design
“The Design Process of my Infographic About Women Cycling for Grinta!28,” Veerle Pieters
Pieters shares her experience of the design process behind the infographic on women’s cycling that she produced for Grinta magazine.
“The Great Gatsby”
Like Minded Studio collaborated on the branding of “The Great Gatsby“. The aim was to develop a bespoke Deco styled logo reflective of the roaring 20s and Fitzgerald’s masterpiece. They also created a display typeface to acompany the main branding. Additionally read more about it following this link.38
“My ‘Tour de France’ posters41,” Veerle Pieters
Pieters created posters for the 100th edition of the Tour of France. She mainly used the French landscape which she had used for the ‘Tour de France Infographic’ as a starting point.
“Designing Type Systems43,” Peter Bil’ak
To create truly useful designs, typographers need to examine not only how characters relate to each other within a style, but also how different styles relate to each other within a family. Peter Bil’ak discusses how to achieve this.
“The Development of the Signage Typeface Wayfinding Sans Pro47,” Ralf Herrmann
Herrmann describes the development of the Wayfinding Sans Pro, a signage typeface that can be read from a long distance.
“Type Study” series, Adobe Typekit
Typekit features a whole series of case studies of typography:
- “Hi-DPI Web Typography53,” David Demaree
- “Typographic Hierarchy54,” Frank Chimero
- “Pairing Typefaces55,” Aura Seltzer
- “Sizing the Legible Letter56,” Ethan Marcotte
- “Stereo-Typography57,” Dan Mall
- “Choosing Fallback Fonts58,” Josh Brewer
- “Techniques for Using Novelty Fonts59,” Meagan Fisher
“Usability in Icons62,” Peter Steen Høgenhaug
Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them.
“iOS Icon Design: A Designer’s Exploration,”
iOS icon design is not only difficult, but requires a lot of experimentation. David Killoy shares his experience of designing the icon for his note-taking app Notorious.
“Designing Facebook Home66,” Julie Zhuo
On May 8th, the designers behind Facebook Home (Justin Stahl, Francis Luu, Joey Flynn and Mac Tyler) presented a behind-the-scenes look at their work at the Bluxome Street Winery for a small crowd.
Advertising, Promotion And E-Commerce
“How to Make Your Own App Promo Cards68,” Mike Swanson
Swanson was inspired by Starbuck’s promo cards for giving away free apps and decided to make his own for an upcoming event. Learn how you can do one, too!
“How to Launch Anything72,” Nathan Barry
Barry has launched five products in fewer than nine months. Read about the strategy that helped him generate over $200,000 in revenue from online products, starting from scratch.
“Increase Online Sales on Your Ecommerce Website75,”
Headscape increased sales on Wiltshire Farmfoods’ e-commerce website by over 10,000% in only five years. What makes it even more special, the target audience is over 50 years old. Paul Boag shares his experience.
Redesigning Elements And Features
“Visual Exploration Behind Signal vs. Noise77,” Mig Reyes
37signals share the process behind making its blog special. This study is about how the company visualized noise and styled its blog categories in a unique way.
“Reinventing Our Default Profile Pictures 79,” Jamie
Jamie talks about the process of finding the right default profile pictures for the 37signals website. It’s a great new approach to a very basic element.
“Login Screen Design: Behind the Scenes81,” Simon Tabor
Good UX is not just about the main content, but also about little details such as log-in (and error) pages. GoSquared shares how it made its log-in experience exceptional.
“Save for Later83,” Brian Groudan
All browsers support two functions: searching and revisiting. Groudan worked closely with Mozilla’s user experience researchers and designers to rethink how Firefox could better offer “saving for later” functionality in the browser.
“Reinventing the Investment Calculator87,” Alex Bendiken
Drawing from the book Money for Something, Alex Bendiken built a tool that lets users experiment and create a unique investment plan. It’s a UX study in turning a boring financial calculator into something you’d actually want to use.
“Getting Down to Business89,” Teenhan+Lax
The Globe and Mail is Canada’s national newspaper of record. It serves millions of readers everyday with in-depth journalism and informed comment. Learn how Teenhan+Lax helped refresh and enrich the way users experience and engage with the news today.
“The Anatomy Of A Successful Logo Redesign95,” Belinda Lanks
Lanks summarizes how Jessica Hische had freshened up the new logo for MailChimp with a slight facelift. The new logo now looks new and fresh — more refined but just as playful.
“In Praise of Lost Time99,” Dan Hill
Dan Hill talks about Facebook’s Timeline as an exemplary bit of interaction design that does little to advance the timeline formally. Yet it might alter the nature of human memory itself.
“Designing the new, fully responsive Wired.co.uk article pages,” Javier Ghaemi
This article is about redesigning the Wired.co.uk article website to provide a more content-first and immersive experience.
Complete (Re)branding And (Re)design
“How to Approach a Responsive Design101,” Tito Bottitta
This article shows the design process behind The Boston Globe’s website, one of the most famous examples of responsive designs. Read about how Upstatement approached its first responsive design.
“Responsive Design Case Study103,” Matt Berridge
This case study outlines the entire process of constructing the South Tees Hospitals’ website, a large responsive design containing over a thousand pages.
“Rebuilding a University Homepage to Be Responsive. Twice. In Less Than a Year105,” Erik Runyon
This slideshow discusses how and why Notre Dame University’s home page was rebuilt twice in less than a year. You will find a recording of the talk below the slides.
“Yes, You Really Can Make Complex Web Apps Responsive,” Daniel Wearne
Wearne shares his experience in creating Adioso’s web app, a complex yet accessible project. He covers the framework, responsive mixins, tables and future challenges.
“Designing a New Playground Brand107,” Ryan Bannon
This case study shows the design process of Playground’s new brand. It covers the logo, overall website and vector animation process, as well as the core values and personality of the company. The extensive study comes in three parts.
“Colorado Identity111,” Berger & Föhr
Imagine someone hiring you to define your own identity. Berger & Föhr was hired to help create the new identity and visual brand of Colorado, the place they call home. Have a look at the work and logo they came up with.
“Building the New Financial Times Web App113,” Wilson Page
Page talks about building the Financial Times’ new app, a challenge that many on his team believed to be impossible. He covers device support, fixed-height layouts, truncation, modularization, reusable components, Retina support, native-like scrolling, offline support and the topic of ever-evolving apps.
“Find Your Way to Oz117,” HTML5 Rocks
This very detailed case study looks at the “Find Your Way to Oz” demo, a Google Chrome experiment by Disney. It covers sprite sheets, Retina support, 3-D content and more.
“The Making of the Moscow Metro Map 2.0119,” Art Lebedev Studio
This study is about the design process behind the Moscow Metro map, a complex project that needed to meet the requirements of both Web and print.
“The Design Thinking Behind the New Disney.com123,” Bobby Solomon
Solomon shares the process of creating a Disney website that is flexible enough to showcase the widest range of offerings imaginable — in other words, a website that can do everything.
“Responsibly Responsive: Developing the Greenbelt Website133,” Rachel Andrew
Andrew writes about her front-end design decisions in rebuilding the Greenbelt Festival’s website.
“The Digital-Physical: On Building Flipboard for iPhone and Finding the Edges of Our Digital Narratives135,” Craig Mod
Mod walks through the process of building the Flipboard app for iPhone and of finding the edges of its digital narratives.
“Page-Flip Effect From 20 Things I Learned137,” Hakim El Hattab
This study shows how this team found the best way to achieve the feeling of a real-world book, while leveraging the benefits of the digital realm in areas such as navigation.
“Behind the Scenes of the New Kippt148,” Gannon Burgett
This interview about the work behind the new Kippt app covers the redesign process, the design principles and problems that the team faced, insights into the new era of web app design, and where Kippt will head in the future.
“Music Video ‘Lights’: The Latest WebGL Sensation162,” Carlos Ulloa
Interactive studio HelloEnjoy built a mind-blowing 3-D music video for Ellie Goulding’s song “Lights.” Creative director Carlos Ulloa explains why the team chose WebGL and how it created various immersive graphic effects.
- “Is This The Future of The Airline Website?172”
- “The Story of Ramayana: Brought to Life by Google Chrome173”
- “Sony: Connected World174”
- “USAToday.com: Redesigning One of America’s Most Popular News Sites175”
Content And Storytelling
“Rethinking the Case Study,” Christopher Butler
Butler explains what case studies are for and what a great one looks like, and he lays out a practical plan for writing one.
“Retiring The Portfolio Screenshot181,” James Young
You’ve probably noticed that portfolios nowadays are packed with detailed analysis, rather than screenshots. Take yours to the next level and learn how to create an amazing portfolio (such as the ones featured in this post).
“Responsibly Leveraging Advanced Web Features,” Ryan Heap
Heap tells us about his full responsive redesign of Travois, a consulting firm focused on housing and economic development. The study includes topics such as progressive enhancement, responsive and responsible Web design, SVG, and the HTML5 History API.
Technical Challenges And Solutions
“How We Improved Page Speed by Cleaning CSS, HTML and Images186,” Lara Swanson
Page-loading time is a big part of the user experience. Dyn shows how it improved it simply by cleaning up the CSS, HTML and images.
“Mein Honig – Brand Identity188,” Thomas Lichtblau
“My Honey makes people and bees happy. And if they are happy, nature is happy too.” This simple yet beautiful statement belongs to Mein Honig (My Honey), a personal project of Thomas Lichtblau from Austria. Thomas shares fascinating insights about a production, banding and packaging process in which he only used colorless, organic and traditional tools and materials.
“iPad to Windows Store App192,” Bart Claeys and Qixing Zheng
This case study helps designers and developers who are familiar with iOS to reimagine their apps using design principles for Windows Store apps. Translate common UI and UX patterns found in iPad apps to Windows 8 apps.
“Behind the Scenes of Mad Manimation194,” Anthony Calzadilla
Here is the process behing the Mad Manimation, an HTML- and CSS-based animation of the introduction to the Mad Men TV show. View the finished project.195
“Scaling Pinterest From 0 to 10s of Billions of Page Views a Month in Two Years199,” Todd Hoff
This case study traces the evolution of Pinterest’s architecture, which was scaling fast, with a lot of incorrect choices made along the way
“How We Built a Photoshop Extension With HTML, CSS and JS201,” Brian Reavis
Creative Market’s extension is a Backbone.js Web app that lives inside of Photoshop. The team can update it without the user having to install an update. How does that work? Read up on it!
“Mastering the Application Cache Manifest for Offline Web Apps and Performance207,” Julien Nicault
Nicault, who work on Cinémur, a new social film app, describes how to use AppCache to improve performance and enable offline usage of Web apps
“Our First Node.js App: Backbone on the Client and Server211,” Spike Brehm
The team at Airbnb has been curious about Node.js for a long time, but used it only for odds and ends. See how they used it on a production-scale project.
“Improve Mobile Support With Server-Side-Enhanced Responsive Design216,” Jon Arne Sæterås
This is an analysis of the process of finding the right mix between server-side and client-side logic for adaptive Web design.
“Designing an Instant Interface,” Luke Wroblewski
Wroblewski shows how to design the instant interface used for the real-time views, real-time notifications and real-time comments on Bagcheck’s website.
“Lessons in Website Security Anti-Patterns by Tesco217,” Troy Hunt
Hunt looks closely at the many simple security errors Tesco makes, analyzing how he would apply basic security principles to remedy them.
“Refactoring >14,000 Lines of CSS Into Sass218,” Eugene Fedorenko
Beanstalk is a mature product whose CSS grew accordingly to 5 files, 14,211 lines and 290 KB of code. Learn how the team rebuilt its style sheets into something cleaner and easier to maintain.
“Refinder: Test-Driven Development,” Maciej Pasternacki
These slides show how test-driven development enabled Gnowsis to reimplement Refinder’s basic data model.
Workflow And Optimization
“The Anatomy of an Experience Map222,” Chris Risdon
Experience maps are becoming increasingly useful for gaining insight in order to orchestrate service touch points over time and space. This study explains what they are and how to create them.
“The design process of my infographic for the ‘Tour of France’ for Grinta!224,” Veerle Pieters
Pieters designed an infographic about the Tour of France, and focused mainly on the question, “What does a pro cycling team take with them to the Tour of France?”
“What We’ve Learned About Responsive Design,” Christopher Butler
Butler shares what his agency has learned about responsive design, which is to overcome initial fears and focus on what is important.
“The Modular Canvas: A Pragmatic Workflow for Designing Applications,” by Gabriel O’Flaherty-Chan
There are some gaps in the way we work; the bigger the project, the more glaring the gaps become. O’Flaherty-Chan looks at a better workflow for designing apps.
“Post-Implementation, Pre-Launch: A Crucial Checkpoint,” Mindy Wagner
Wagner of Viget discusses how to approach the time of post-implementation and pre-launch, a crucial checkpoint that can create a lot of stress for a team.
“A New Make Mantra: A Statement of Design Intent 230,” Mark Boulton
Mark Boulton used the CERN redesign project as an occasion to define a new “make” mantra that would help him tackle projects. This single, actionable sentence would guide him through projects.
Responsive Design Link
“Responsive Design and ROI: Observations From the Coalface232,” Chris Berridge
Working on the frontline, Berridge share his insights on responsive design and returns on investment.
“Making Your Site Responsive: Mastering Real-World Constraints234,” Alex Fedorov
Listen to how agency Fresh Tilled Soil addressed real-world constraints, such as resources, time and budget, in its responsive design process.
“How a Simple Redesign Increased Customer Feedback by 65%238,” James Santilli
Customer feedback is the backbone of many Web services. Campaign Monitor analyzed the process behind a simple redesign that increased customer feedback by 65%.
“How I’m Implementing Responsive Web Design,” Jeff Croft
Croft is finally at the point where responsive design feels worth the extra effort. Read about how he got there.
“Mentoring: The Evaluation241,” Laura Kalbag
Freelancers are often offered projects whose budget is below their rate. Laura Kalbag had a fantastic idea on how to transform these kind of projects into a win-win: She decided to mentor a group of students. Such a project would give the students an opportunity to gain valuable experience and help them transition into freelancing, and the client would get good quality work, despite the modest budget. This series of posts describes her experience, from initial idea to launched project.
(al) (il) (ea)
- 1 https://www.smashingmagazine.com/2012/11/06/retiring-portfolio-screenshot/
- 2 https://www.smashingmagazine.com/2013/07/this-is-how-we-built-it-case-studies/
- 3 https://www.smashingmagazine.com/2009/09/showcase-of-case-studies-in-design-portfolios/
- 4 https://www.smashingmagazine.com/2009/11/15-impressive-case-studies-behance/
- 5 https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/
- 6 #a1
- 7 #a2
- 8 #a3
- 9 #a4
- 10 #a5
- 11 #a6
- 12 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies-part-2/#a7
- 13 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies-part-2/#a8
- 14 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies-part-2/#a9
- 15 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies-part-2/#a10
- 16 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a1
- 17 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a2
- 18 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a3
- 19 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a4
- 20 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a5
- 21 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a6
- 22 #a7
- 23 #a8
- 24 #a9
- 25 #a10
- 26 http://veerle.duoh.com/design/article/illustrator_full_spectrum_spirograph
- 27 http://veerle.duoh.com/design/article/illustrator_full_spectrum_spirograph
- 28 http://veerle.duoh.com/design/article/the_design_process_of_my_infographic_about_women_cycling_for_grinta
- 29 http://veerle.duoh.com/design/article/the_design_process_of_my_infographic_about_women_cycling_for_grinta
- 30 http://www.adhamdannaway.com/blog/branding/a-systematic-approach-to-logo-design
- 31 http://www.adhamdannaway.com/blog/branding/a-systematic-approach-to-logo-design
- 32 http://blog.seanmartell.com/2013/06/27/rebuilding-a-simplified-firefox-logo/
- 33 http://blog.seanmartell.com/2013/06/27/rebuilding-a-simplified-firefox-logo/
- 34 http://hicksdesign.co.uk/journal/five-details
- 35 http://hicksdesign.co.uk/journal/five-details
- 36 http://softfacade.com/work/iconfinder/
- 37 http://softfacade.com/work/iconfinder/
- 38 http://www.behance.net/gallery/THE-GREAT-GATSBY/8550121
- 39 http://www.experimentaljetset.nl/archive/whitney-museum-identity
- 40 http://www.experimentaljetset.nl/archive/whitney-museum-identity
- 41 http://veerle.duoh.com/design/article/my_tour_de_france_posters
- 42 http://veerle.duoh.com/design/article/my_tour_de_france_posters
- 43 http://ilovetypography.com/2012/04/11/designing-type-systems/
- 44 http://ilovetypography.com/2012/04/11/designing-type-systems/
- 45 http://ilovetypography.com/2012/05/15/making-fonts-novel-typeface/
- 46 http://ilovetypography.com/2012/05/15/making-fonts-novel-typeface/
- 47 http://ilovetypography.com/2012/04/19/the-design-of-a-signage-typeface/
- 48 http://ilovetypography.com/2012/04/19/the-design-of-a-signage-typeface/
- 49 http://ilovetypography.com/2011/10/05/the-making-of-ff-tundra/
- 50 http://ilovetypography.com/2011/10/05/the-making-of-ff-tundra/
- 51 http://ilovetypography.com/2013/04/25/magasin-font-making-of/
- 52 http://ilovetypography.com/2013/04/25/magasin-font-making-of/
- 53 http://blog.typekit.com/2013/05/01/hi-dpi-typography/
- 54 http://blog.typekit.com/2011/03/17/type-study-typographic-hierarchy/
- 55 http://blog.typekit.com/2012/05/23/type-study-pairing-typefaces/
- 56 http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/
- 57 http://blog.typekit.com/2011/05/17/type-study-stereo-typography/
- 58 http://blog.typekit.com/2011/03/24/type-study-choosing-fallback-fonts/
- 59 http://blog.typekit.com/2012/04/24/type-study-techniques-for-using-novelty-fonts/
- 60 http://blog.mailchimp.com/social-login-buttons-arent-worth-it/
- 61 http://blog.mailchimp.com/social-login-buttons-arent-worth-it/
- 62 http://stiern.com/articles/usability/usability-in-icons/
- 63 http://stiern.com/articles/usability/usability-in-icons/
- 64 https://github.com/blog/1135-the-making-of-octicons
- 65 https://github.com/blog/1135-the-making-of-octicons
- 66 http://vimeo.com/68749840
- 67 http://vimeo.com/68749840
- 68 http://blog.mikeswanson.com/post/32759154825/yourownapppromocards
- 69 http://blog.mikeswanson.com/post/32759154825/yourownapppromocards
- 70 https://www.smashingmagazine.com/2012/04/05/art-of-launching-app-case-study/
- 71 https://www.smashingmagazine.com/2012/04/05/art-of-launching-app-case-study/
- 72 https://www.smashingmagazine.com/2013/06/28/how-to-launch-anything/
- 73 https://www.smashingmagazine.com/2013/06/28/how-to-launch-anything/
- 74 http://snook.ca/archives/writing/selling-ebook-on-amazon
- 75 http://boagworld.com/talks/unbelievable-ecommerce/
- 76 http://blog.mailchimp.com/twitter-promoted-tweets/
- 77 http://37signals.com/svn/posts/3316-visual-exploration-behind-signal-vs-noise
- 78 http://37signals.com/svn/posts/3316-visual-exploration-behind-signal-vs-noise
- 79 http://37signals.com/svn/posts/3104-behind-the-scenes-reinventing-our-default-profile-pictures
- 80 http://37signals.com/svn/posts/3104-behind-the-scenes-reinventing-our-default-profile-pictures
- 81 https://www.gosquared.com/blog/archives/3359
- 82 https://www.gosquared.com/blog/archives/3359
- 83 https://blog.mozilla.org/ux/2012/10/save-for-later/
- 84 https://blog.mozilla.org/ux/2012/10/save-for-later/
- 85 http://making.fiftythree.com/a-closer-look-at-zoom
- 86 http://making.fiftythree.com/a-closer-look-at-zoom
- 87 http://makaluinc.com/blog/2012/10/reinventing-the-investment-calculator.html
- 88 http://makaluinc.com/blog/2012/10/reinventing-the-investment-calculator.html
- 89 http://www.teehanlax.com/story/globe-and-mail/
- 90 http://www.teehanlax.com/story/globe-and-mail/
- 91 http://www.bbc.co.uk/blogs/internet/posts/olympics_design
- 92 http://bbc.in/Nkqt4Z
- 93 http://www.creativebloq.com/web-design/how-we-built-msn-uks-responsive-olympics-site-9134646
- 94 http://www.creativebloq.com/web-design/how-we-built-msn-uks-responsive-olympics-site-9134646
- 95 http://www.fastcodesign.com/1672938/the-anatomy-of-a-successful-logo-redesign
- 96 http://www.fastcodesign.com/1672938/the-anatomy-of-a-successful-logo-redesign
- 97 http://blog.keenancummings.com/post/34832313784/knitt-what-i-want-out-of-facebook
- 98 http://blog.keenancummings.com/post/34832313784/knitt-what-i-want-out-of-facebook
- 99 http://www.domusweb.it/en/design/in-praise-of-lost-time/
- 100 http://www.domusweb.it/en/design/in-praise-of-lost-time/
- 101 http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
- 102 http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
- 103 http://builtbyboon.com/blog/responsive-design-case-study
- 104 http://builtbyboon.com/blog/responsive-design-case-study
- 105 https://speakerdeck.com/erunyon/rebuilding-a-university-homepage-to-be-responsive-twice-in-less-than-a-year
- 106 https://speakerdeck.com/erunyon/rebuilding-a-university-homepage-to-be-responsive-twice-in-less-than-a-year
- 107 http://playgroundinc.com/blog/finding-and-redefining-playground-brand/
- 108 http://playgroundinc.com/blog/finding-and-redefining-playground-brand/
- 109 https://medium.com/p/308c1d5cd789
- 110 https://medium.com/p/308c1d5cd789
- 111 http://coloradoidentity.tumblr.com/
- 112 https://www.smashingmagazine.com/wp-content/uploads/2013/07/colorado.jpg
- 113 https://www.smashingmagazine.com/2013/05/23/building-the-new-financial-times-web-app/
- 114 https://www.smashingmagazine.com/2013/05/23/building-the-new-financial-times-web-app/
- 115 http://blog.alexlikesdesign.com/post/46850507084/today-marks-the-launch-of-google-treasure-maps
- 116 http://blog.alexlikesdesign.com/post/46850507084/today-marks-the-launch-of-google-treasure-maps
- 117 http://www.html5rocks.com/en/tutorials/casestudies/oz/
- 118 http://www.html5rocks.com/en/tutorials/casestudies/oz/
- 119 http://www.artlebedev.com/everything/metro/map2/process/
- 120 http://www.artlebedev.com/everything/metro/map2/process/
- 121 http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/
- 122 http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/
- 123 http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
- 124 http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
- 125 http://www.stuffandnonsense.co.uk/blog/about/say_hello_to_the_new_iso
- 126 http://www.stuffandnonsense.co.uk/blog/about/say_hello_to_the_new_iso
- 127 http://dbushell.com/2012/06/17/passenger-focus-responsive-web-design-case-study/
- 128 http://dbushell.com/2012/06/17/passenger-focus-responsive-web-design-case-study/
- 129 http://www.slideshare.net/kaelig/bbc-news-responsive-web-design-and-mustard
- 130 http://www.slideshare.net/kaelig/bbc-news-responsive-web-design-and-mustard
- 131 http://blog.fogcreek.com/the-trello-tech-stack/
- 132 http://blog.fogcreek.com/the-trello-tech-stack/
- 133 http://www.rachelandrew.co.uk/archives/2012/03/16/responsibly-responsive-developing-the-greenbelt-website/
- 134 http://www.rachelandrew.co.uk/archives/2012/03/16/responsibly-responsive-developing-the-greenbelt-website/
- 135 http://craigmod.com/journal/digital_physical/
- 136 http://craigmod.com/journal/digital_physical/
- 137 http://www.html5rocks.com/tutorials/casestudies/20things_pageflip.html
- 138 http://www.html5rocks.com/tutorials/casestudies/20things_pageflip.html
- 139 http://www.giftrocket.com/blog/design-tips-from-a-master
- 140 http://www.giftrocket.com/blog/design-tips-from-a-master
- 141 https://www.smashingmagazine.com/2011/08/17/breaking-the-rules-a-ux-case-study/
- 142 https://www.smashingmagazine.com/2011/08/17/breaking-the-rules-a-ux-case-study/
- 143 http://baymard.com/blog/ux-considerations-designing-lenshawk
- 144 http://baymard.com/blog/ux-considerations-designing-lenshawk
- 145 http://rainypixels.com/words/the-story-of-the-new-microsoft-com/
- 146 http://trentwalton.com/2012/10/03/a-new-microsoft-com/
- 147 http://rainypixels.com/words/the-story-of-the-new-microsoft-com/
- 148 http://theindustry.cc/2013/04/26/behind-the-scenes-of-the-new-kippt/
- 149 http://theindustry.cc/2013/04/26/behind-the-scenes-of-the-new-kippt/
- 150 http://danielmall.com/work/crayola/
- 151 http://danielmall.com/work/crayola/
- 152 http://softfacade.com/work/campusquad/
- 153 http://softfacade.com/work/campusquad/
- 154 http://vesperapp.co/blog/how-to-make-a-vesper/
- 155 http://vesperapp.co/blog/how-to-make-a-vesper/
- 156 http://blog.14islands.com/post/52546836134/case-study-betting-on-a-fully-responsive-web
- 157 http://blog.14islands.com/post/52546836134/case-study-betting-on-a-fully-responsive-web
- 158 http://www.akomarov.com/critboard/2011-ammo-rack-app-design-critique
- 159 http://www.akomarov.com/critboard/2011-ammo-rack-app-design-critique
- 160 http://ianstormtaylor.com/walking-through-the-design-process/
- 161 http://ianstormtaylor.com/walking-through-the-design-process/
- 162 http://www.netmagazine.com/features/behind-scenes-lights-latest-webgl-sensation
- 163 http://www.netmagazine.com/features/behind-scenes-lights-latest-webgl-sensation
- 164 http://methodandcraft.com/articles/designing-for-designers
- 165 https://www.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/
- 166 https://www.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/
- 167 http://laurakalbag.com/grids-flexibility-and-responsiveness/
- 168 http://laurakalbag.com/grids-flexibility-and-responsiveness/
- 169 http://rafaltomal.com/making-of-typespiration-com/
- 170 http://rafaltomal.com/making-of-typespiration-com/
- 171 http://www.f-i.com/work/all
- 172 http://www.f-i.com/fi/airlines/
- 173 http://www.f-i.com/google/ramayana
- 174 http://www.f-i.com/sony/connected-world/
- 175 http://blog.f-i.com/usatoday-com-redesigning-one-of-americas-most-popular-news-site/
- 176 http://www.f-i.com/work/all
- 177 http://nathanbarry.com/step-by-step-landing-page-copywriting/
- 178 http://nathanbarry.com/step-by-step-landing-page-copywriting/
- 179 https://www.smashingmagazine.com/2013/03/19/art-of-storytelling-around-app/
- 180 https://www.smashingmagazine.com/2013/03/19/art-of-storytelling-around-app/
- 181 https://www.smashingmagazine.com/2012/11/06/retiring-portfolio-screenshot/
- 182 https://www.smashingmagazine.com/2012/11/06/retiring-portfolio-screenshot/
- 183 http://snook.ca/archives/writing/ebook-notes
- 184 http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
- 185 http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
- 186 http://dyn.com/how-we-improved-page-speed-by-cleaning-css-html-and-images/
- 187 http://dyn.com/how-we-improved-page-speed-by-cleaning-css-html-and-images/
- 188 http://www.behance.net/gallery/Mein-Honig-Brand-Identity/9772815
- 189 http://www.behance.net/gallery/Mein-Honig-Brand-Identity/9772815
- 190 http://blog.jphpsf.com/2012/04/28/front-end-performance-case-study-github/
- 191 http://blog.jphpsf.com/2012/04/28/front-end-performance-case-study-github/
- 192 http://msdn.microsoft.com/en-us/library/windows/apps/hh868262.aspx
- 193 http://msdn.microsoft.com/en-us/library/windows/apps/hh868262.aspx
- 194 http://www.anthonycalzadilla.com/2011/04/behind-the-scenes-of-mad-manimation/
- 195 http://stuffandnonsense.co.uk/content/demo/madmanimation/
- 196 http://www.anthonycalzadilla.com/2011/04/behind-the-scenes-of-mad-manimation/
- 197 http://mir.aculo.us/2013/04/30/embed-canvas-and-svg-charts-in-emails/
- 198 http://mir.aculo.us/2013/04/30/embed-canvas-and-svg-charts-in-emails/
- 199 http://highscalability.com/blog/2013/4/15/scaling-pinterest-from-0-to-10s-of-billions-of-page-views-a.html
- 200 http://highscalability.com/blog/2013/4/15/scaling-pinterest-from-0-to-10s-of-billions-of-page-views-a.html
- 201 https://creativemarket.com/blog/2013/04/12/how-we-built-a-photoshop-extension-with-html-css-and-js
- 202 https://t.co/e42mm9nB0s
- 203 http://codeascraft.com/2010/07/09/batch-processing-millions-of-images/
- 204 http://etsy.me/duZkGJ
- 205 http://www.html5rocks.com/en/tutorials/casestudies/100000stars/
- 206 http://www.html5rocks.com/en/tutorials/casestudies/100000stars/
- 207 https://developers.facebook.com/blog/post/2012/07/16/mastering-the-application-cache-manifest-for-offline-web-apps-and-performance/
- 208 https://developers.facebook.com/blog/post/2012/07/16/mastering-the-application-cache-manifest-for-offline-web-apps-and-performance/
- 211 http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
- 212 http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
- 213 http://aerotwist.com/blog/making-a-60fps-mobile-app/
- 214 http://aerotwist.com/blog/making-a-60fps-mobile-app/
- 215 http://css-tricks.com/treehouse-ad/
- 216 http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/
- 217 http://www.troyhunt.com/2012/07/lessons-in-website-security-anti.html
- 218 http://wildbit.com/blog/2012/04/16/refactoring-14000-lines-of-css-into-sass/
- 219 http://paulrobertlloyd.com/2012/11/trimming_the_fat/
- 220 http://clearleft.com/thinks/visualdesignexplorations/
- 221 http://clearleft.com/thinks/visualdesignexplorations/
- 222 http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map
- 223 http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map
- 224 http://veerle.duoh.com/design/article/the_design_process_of_my_infographic_for_the_tour_of_france_for_grinta
- 225 http://veerle.duoh.com/design/article/the_design_process_of_my_infographic_for_the_tour_of_france_for_grinta
- 226 https://www.smashingmagazine.com/2011/12/19/turning-small-projects-into-big-profit-case-study/
- 227 https://www.smashingmagazine.com/2011/12/19/turning-small-projects-into-big-profit-case-study/
- 228 http://blog.reemer.com/how-we-reduced-our-cancellation-rate-by-87-5
- 229 http://justintadlock.com/archives/2012/10/16/how-i-run-a-membership-site
- 230 http://www.markboulton.co.uk/journal/a-new-make-mantra-a-statement-of-design-intent
- 231 http://blog.kissmetrics.com/100-conversion-optimization-case-studies/
- 232 http://www.cxpartners.co.uk/cxblog/responsive-design-roi-observations-from-the-coalface/
- 233 http://www.cxpartners.co.uk/cxblog/responsive-design-roi-observations-from-the-coalface/
- 234 https://www.smashingmagazine.com/2013/03/28/mastering-real-world-constraints/
- 235 https://www.smashingmagazine.com/2013/03/28/mastering-real-world-constraints/
- 236 http://www.vanseodesign.com/web-design/redesign-goals-constraints-concept/
- 237 http://www.vanseodesign.com/web-design/redesign-goals-constraints-concept/
- 238 http://www.campaignmonitor.com/blog/post/3845/quick-redesign-improved-feedback
- 239 http://www.campaignmonitor.com/blog/post/3845/quick-redesign-improved-feedback
- 240 http://electricpulp.com/notes/more-on-apples-mobile-optimization-in-ecommerce/
- 241 http://laurakalbag.com/mentoring-the-evaluation/
- 242 http://laurakalbag.com/mentoring-the-evaluation/