Let's imagine we're ready for a fresh design of our online portfolio. As always, time is scarce. We need to be efficient, but the portfolio has to look great. And of course, it has to be responsive. It should work across devices of various form factors, since this is a key selling point for our prospective clients. This project will enable us to leverage a number of Bootstrap's built-in features, even as we customize Bootstrap to suit our needs.
We've thrown together a couple of home page mock-ups. Though we have in mind what we want for large screens, we've begun with a handheld screen size to force ourselves to focus on the essentials.
You'll notice the following features:
- A collapsed responsive navbar with logo
- A sliding carousel with four images of featured portfolio items
- A single-column layout with three blocks of content, each with a heading, short paragraph, and a nice big button with an invitation to read further
- A footer with social media links
Here is the design mockup as shown in the following screenshot:
Altogether, this should provide a good introduction to our work. The carousel is tall enough to give a good amount of visual space to our portfolio images. It is not difficult to navigate quickly to the content below, where a user can efficiently scan key options for taking a next step inside. By presenting key links as nice big buttons, we will establish helpful visual hierarchy for the key action items, and we will ensure that visitors do not have problems because of fat fingers.
For ease of maintenance, we've elected to have only two major breakpoints in this design. We'll use the single-column layout for screen sizes narrower than 768px. Then, we'll shift to a three-column layout:
You'll note the following features in the mock-up for tablets and higher versions:
- A navigation bar at the top, which is enhanced with icons
- A widescreen version of the home page carousel, with images stretching to fill the full width of the browser
- A three-column layout for our textual content blocks
- A footer with content at the center
The color scheme is fairly simple: shades of gray, plus a golden-green color for links and highlights.
With these design goals in mind, we'll proceed to get our content in place.