Case Study in Portfolio
keyboard shortcuts: ← previous shot → next shot L or F like
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
112,480,040,860 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
6 Responses
Pro
Phillip Wong
Case study page layout in my portfolio. You can view it live here.
I find I don't like reading long case studies, nor do I like reading case studies which are just screenshots and no description. I've targeted 2 short paragraphs for mine: one to describe the brief, one to describe what was done.
The common layout is: one main device view (no set format, different for each project) for the hero image, headline written over a background in the project's key colour, previously mentioned paragraphs, and then some more screenshots to follow. Some of the other case studies have many more screenshots that this one.
The site uses Scott Jehl's picturefill for the images which works pretty well.
2 months ago
Pro
Matej Latin
awesome... simple but powerful. Great work!
2 months ago
I like this a lot. You've added the project accent colour into the detail page in a really nice way, that's something I've tried to do in the past and failed horribly. In the project title area I probably would have added the prev/next chevrons, but I can see that you're going for an uncluttered feel.
I feel the shadow on the browser images (in attachement) are a bit heavy?
2 months ago
Pro
Phillip Wong
@Mathew Sanders Good observations. I did try having the prev / next chevrons in the title area but that only looked OK in the large screen view where there's room to breath on both sides. On mobile it works poorly but it's something I keep thinking about and I'll keep working on. I'll post a mobile view in an upcoming shot.
Agreed, the shadows are too heavy, will lighten those up.
2 months ago
You could always drop the chevrons with mobile breakpoints. I also love sites that map the ← → keys to loading next/previous in a series :)
2 months ago
Rebound
Mobile Case Study View
by Phillip Wong
Case study mobile view. The only changes needed from the large screen view is the hamburger dropdown menu and making the 2 column layout into 1 column.
@Mathew Sanders - I want the project title to carry a lot of visual weight. I couldn't get the left and right chevrons in here without minimising that weight. Didn't think about dropping it just for mobile might will give that a think. At the bottom may not be the best either, but I'm happy with it there.
2 months ago