“This Is How We Built It” Case Studies (Part 2)
- July 19th, 2013
- 3 Comments
- Illustration, Graphics and Logo Design2
- Usability Design4
- Advertising, Promotion and E-Commerce5
- Redesigning Elements and Features6
- Complete (Re)branding and (Re)design7
- Content and Storytelling (appears on a new page)8
- Technical Challenges and Solutions9
- Workflow and Optimization10
- Last Click11
Content And Storytelling
“Retiring The Portfolio Screenshot18,” 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 Features20,” 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 Images24,” 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 Identity26,” 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 App30,” 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 Manimation32,” 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.33
“Scaling Pinterest From 0 to 10s of Billions of Page Views a Month in Two Years37,” 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 JS39,” 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 Performance45,” 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 Server49,” 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 Design54,” 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 Interface55,” 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 Tesco56,” 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 Sass57,” 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.
Workflow And Optimization
“The Anatomy of an Experience Map63,” 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!65,” 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 Design71,” 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 Applications73, 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 Checkpoint77,” 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 78,” 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 and ROI: Observations From the Coalface80,” Chris Berridge
Working on the frontline, Berridge share his insights on responsive design and returns on investment.
“Making Your Site Responsive: Mastering Real-World Constraints82,” 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%86,” 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%.
“Mentoring: The Evaluation90,” 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.
Until Next Time
We hope this collection will prove to be a valuable resource in your quest to deliver great work. And we hope it will inspire you to share the knowledge and experience you’ve gained on your own.
Are we missing your favorite case study? Share it with us in the comments!
(al) (il) (ea)
- 1 http://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/
- 2 http://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a1
- 3 http://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a2
- 4 http://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a3
- 5 http://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a4
- 6 http://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a5
- 7 http://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a6
- 8 #a7
- 9 #a8
- 10 #a9
- 11 #a10
- 12 http://nathanbarry.com/step-by-step-landing-page-copywriting/
- 13 http://nathanbarry.com/step-by-step-landing-page-copywriting/
- 14 http://uxdesign.smashingmagazine.com/2013/03/19/art-of-storytelling-around-app/
- 15 http://uxdesign.smashingmagazine.com/2013/03/19/art-of-storytelling-around-app/
- 16 http://www.newfangled.com/rethinking_the_case_study
- 17 http://www.newfangled.com/rethinking_the_case_study
- 18 http://www.smashingmagazine.com/2012/11/06/retiring-portfolio-screenshot/
- 19 http://www.smashingmagazine.com/2012/11/06/retiring-portfolio-screenshot/
- 20 http://www.degdigital.com/blog/responsibly-leveraging-advanced-web-features/
- 21 http://snook.ca/archives/writing/ebook-notes
- 22 http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
- 23 http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
- 24 http://dyn.com/how-we-improved-page-speed-by-cleaning-css-html-and-images/
- 25 http://dyn.com/how-we-improved-page-speed-by-cleaning-css-html-and-images/
- 26 http://www.behance.net/gallery/Mein-Honig-Brand-Identity/9772815
- 27 http://www.behance.net/gallery/Mein-Honig-Brand-Identity/9772815
- 28 http://blog.jphpsf.com/2012/04/28/front-end-performance-case-study-github/
- 29 http://blog.jphpsf.com/2012/04/28/front-end-performance-case-study-github/
- 30 http://msdn.microsoft.com/en-us/library/windows/apps/hh868262.aspx
- 31 http://msdn.microsoft.com/en-us/library/windows/apps/hh868262.aspx
- 32 http://www.anthonycalzadilla.com/2011/04/behind-the-scenes-of-mad-manimation/
- 33 http://stuffandnonsense.co.uk/content/demo/madmanimation/
- 34 http://www.anthonycalzadilla.com/2011/04/behind-the-scenes-of-mad-manimation/
- 35 http://mir.aculo.us/2013/04/30/embed-canvas-and-svg-charts-in-emails/
- 36 http://mir.aculo.us/2013/04/30/embed-canvas-and-svg-charts-in-emails/
- 37 http://highscalability.com/blog/2013/4/15/scaling-pinterest-from-0-to-10s-of-billions-of-page-views-a.html
- 38 http://highscalability.com/blog/2013/4/15/scaling-pinterest-from-0-to-10s-of-billions-of-page-views-a.html
- 39 https://creativemarket.com/blog/2013/04/12/how-we-built-a-photoshop-extension-with-html-css-and-js
- 40 https://t.co/e42mm9nB0s
- 41 http://codeascraft.com/2010/07/09/batch-processing-millions-of-images/
- 42 http://etsy.me/duZkGJ
- 43 http://www.html5rocks.com/en/tutorials/casestudies/100000stars/
- 44 http://www.html5rocks.com/en/tutorials/casestudies/100000stars/
- 45 https://developers.facebook.com/blog/post/2012/07/16/mastering-the-application-cache-manifest-for-offline-web-apps-and-performance/
- 46 https://developers.facebook.com/blog/post/2012/07/16/mastering-the-application-cache-manifest-for-offline-web-apps-and-performance/
- 49 http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
- 50 http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
- 51 http://aerotwist.com/blog/making-a-60fps-mobile-app/
- 52 http://aerotwist.com/blog/making-a-60fps-mobile-app/
- 53 http://css-tricks.com/treehouse-ad/
- 54 http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/
- 55 https://bagcheck.com/blog/2-designing-an-instant-interface
- 56 http://www.troyhunt.com/2012/07/lessons-in-website-security-anti.html
- 57 http://wildbit.com/blog/2012/04/16/refactoring-14000-lines-of-css-into-sass/
- 58 http://de.slideshare.net/mpasternacki/testdriven-development
- 60 http://paulrobertlloyd.com/2012/11/trimming_the_fat/
- 61 http://clearleft.com/thinks/visualdesignexplorations/
- 62 http://clearleft.com/thinks/visualdesignexplorations/
- 63 http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map
- 64 http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map
- 65 http://veerle.duoh.com/design/article/the_design_process_of_my_infographic_for_the_tour_of_france_for_grinta
- 66 http://veerle.duoh.com/design/article/the_design_process_of_my_infographic_for_the_tour_of_france_for_grinta
- 67 http://www.smashingmagazine.com/2011/12/19/turning-small-projects-into-big-profit-case-study/
- 68 http://www.smashingmagazine.com/2011/12/19/turning-small-projects-into-big-profit-case-study/
- 69 http://product.voxmedia.com/post/57083313268/staticity-no-more
- 70 http://product.voxmedia.com/post/57083313268/staticity-no-more
- 71 http://www.newfangled.com/contentmgr/showdetails.php/id/24561
- 72 http://www.newfangled.com/contentmgr/showdetails.php/id/24561
- 73 http://www.jetcooper.com/blog/the-modular-canvas/
- 74 http://www.jetcooper.com/blog/the-modular-canvas/
- 75 http://blog.reemer.com/how-we-reduced-our-cancellation-rate-by-87-5
- 76 http://justintadlock.com/archives/2012/10/16/how-i-run-a-membership-site
- 77 http://www.viget.com/inspire/post-implementation-pre-launch-checkpoint/
- 78 http://www.markboulton.co.uk/journal/a-new-make-mantra-a-statement-of-design-intent
- 79 http://blog.kissmetrics.com/100-conversion-optimization-case-studies/
- 80 http://www.cxpartners.co.uk/cxblog/responsive-design-roi-observations-from-the-coalface/
- 81 http://www.cxpartners.co.uk/cxblog/responsive-design-roi-observations-from-the-coalface/
- 82 http://uxdesign.smashingmagazine.com/2013/03/28/mastering-real-world-constraints/
- 83 http://uxdesign.smashingmagazine.com/2013/03/28/mastering-real-world-constraints/
- 84 http://www.vanseodesign.com/web-design/redesign-goals-constraints-concept/
- 85 http://www.vanseodesign.com/web-design/redesign-goals-constraints-concept/
- 86 http://www.campaignmonitor.com/blog/post/3845/quick-redesign-improved-feedback
- 87 http://www.campaignmonitor.com/blog/post/3845/quick-redesign-improved-feedback
- 88 http://electricpulp.com/notes/more-on-apples-mobile-optimization-in-ecommerce/
- 89 http://jeffcroft.com/blog/2012/mar/02/implementing-responsive-design/
- 90 http://laurakalbag.com/mentoring-the-evaluation/
- 91 http://laurakalbag.com/mentoring-the-evaluation/
- 92 http://unfinished.bz/20