A long time ago in a galaxy far, far away… a youngling designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take, in order to stand proud with their peers in this wide world we call “The Web”. Yes, I’m talking about creating your own portfolio website.
I recently re-designed my own portfolio site, it was a challenging but enjoyable experience that I really learned a lot from. My goal was to create a unique online presence that represented my personality and displayed my design work in detail, while of course acting as a promotional medium to gain more business and exposure.
Behind the scenes look at my design and development workflow.
After receiving a bunch of emails asking me how I designed and built my site, I decided to write this article to give a behind the scenes look at my journey and some of the things I learned along the way. I’ll discuss best practices in modern web design and go through the entire design and development workflow I used to create my site, from the initial planning stage to the final live website including:
project planning,
branding,
designing wireframes,
responsive design and flexible grids,
using LESS and SASS,
catering for high definition screens,
creating flexible images,
animating content,
WordPress development and
testing and analytics.
I hope it helps and inspires other designers out there looking to create their own unique portfolio website. We’ve got a lot to get through, so let’s get started.
Project Planning
Defining your Brief
The first thing I do with any project is figure out exactly what I want to achieve and write it down. What is the purpose of the project? What problem am I trying to solve? For me, my goal was to create an online profile to promote my design work and gain more exposure. It needed to allow me to write articles, display my design work and also allow people to contact me easily. I also wanted it to be unique and memorable while representing my personality.
At this point we simply want to figure out our end goal, we’re not worried about how we will get there. Write down your goals, and make sure you look back at them at later stages in the project to ensure that you’re on track.
Initial Research and Idea Generation
It’s always a good idea to do some initial research to get the creative juices flowing. Inspiration can come from anywhere and it can strike you at any time, usually when you’re in bed and on the verge of falling asleep (and of course there’s not a notebook in sight). I like to check out websites like Awwwards, Dribbble and Creattica for inspiration. But sometimes it’s best not to look at what other designers have done, because once you’ve seen it, it’s sometimes hard to think of your own ideas.
Instead, I’d suggest making a cup of tea, finding a comfortable spot and brainstorming your own solutions to the problem at hand. All you need at this stage is a pen, a sketchbook and your thoughts. Hopefully that way you’ll be able to come up with something innovative that hasn’t been done before. There are plenty of methods you can use to generate ideas. Have a think about your personality and what makes you unique as a designer. What are your interests? How are you different? Do you have a particular design style? Do you specialize in a certain area of design? Do you have unusually big ears? Find an angle that represents you and integrate that into your design.
Justin Aguilar illustrates his workspace in his portfolio design.
Meng To gets straight to the point with his design case studies.
Stephen Burgess is a developer, but he shows a great understanding of design and UX with his unique site.
After some initial research I wrote down a few ideas and elements that I wanted to include in my portfolio site.
My skill set is a mix of both coding and design and I want this to be shown prominently.
I’m a big fan of minimalist design and want to stick with a mainly black and white colour palette to allow my design work to shine through.
I’d like to use my own photo as a hero image to inject some personality into the site.
I enjoy the experience of seeing animations happen as I scroll down a page.
I’ve never liked the jerky way in which one webpage jumps to another, so I want to make sure my site transitions smoothly from one page to another.
I like generous amounts of white space and a full width layout.
Having a responsive site is important to me as I want mobile and tablet users to also have an optimal user experience.
I want my design case studies to tell a story about my design process, rather than just being a gallery of random images without context.
Create a Timeline
Once you’ve got your ideas together and you know which direction you’re headed in, it’s always a good idea to create a rough project timeline. I’m not talking about creating strict deadlines or anything, it’s more of a guide to help you organize tasks and stay productive and motivated. Simply list the tasks you need to do and estimate the amount of time each one will take. This will give you a rough outline of how long your project will take, as well as giving you a task list to work from. Of course some of your time estimates might be a little off, but that’s fine and you can adjust your timeline as you go. A little bit of organization goes a long way and it’s good practice to get into this habit.
Design
Designing your Brand
Your brand is basically the visual language that describes who you are and will determine how others see you. For my brand I wanted to convey a clean, sleek and minimal look and feel. I kept things quite simple and decided to create a logo mark from my initials using a minimal black and white colour palette. I sketched out some initial ideas and experimented with various typography and letter arrangements, before deciding on the final logo design (which I drew in Adobe Illustrator). If you’re having trouble coming up with a logo design, you might like to have a read of a systematic approach to logo design.
My final logo design.
As part of my branding I also wanted to design an avatar image of my face, that I could use on my website along with various social media platforms. It would need to represent me as a designer and developer while also being unique and memorable.
After countless hours of brainstorming (more like procrastination), I finally had an idea that made sense. The idea was to take a photo of my face and cut it in half. One side would portray the creative designer in me, while the other showed my logical coding side. After numerous sketches and a lot of fiddling in Photoshop, I was finally happy with the avatar image concept. I used pastel colours, grunge style brushes and masks to achieve the aesthetic I was after.
My final avatar image concept.
Creating Content
I’ve noticed that a lot of designers leave content creation until the end of the project, as they’re more interested in the layout and design aesthetics of the website (the fun stuff). Content creation should happen early in the project, as your content will determine the appropriate design for the site. What information do you need to provide to your visitors? Have a think about what you want to say and how you want to say it. Should it be written as simple text or would it make more sense as an image or diagram?
When writing your copy I think it’s best to be concise and friendly. I like to write in the first-person to make it feel more personable. Break your copy up into small chunks to improve readability and make it easy to scan. I wrote a draft of my content and broke it up into six main parts; homepage introduction, a bit about me, places I’ve been featured, my design work, my blog articles and my contact details.
Displaying your Design Work
The most important piece of content is your portfolio of design work, as this is what most of your visitors want to see. Gather your best work and explain the process and workflow behind it. There’s nothing worse than a vague portfolio of random images with no context or explanation. Try to only include the type of work you’re looking to do more of, rather than all of your work. This will help you target the appropriate clients in the future.
People want to see your work in as much detail as possible, so don’t shrink it down to a small size. Try to keep your designs at their actual size if you can. Make sure it’s easy for visitors to quickly navigate through all of your work. Talk about the challenges you came up against and how you solved them. Design is all about problem solving, so let your visitors know why your design looks and works the way it does. Remember, you’re telling a story so try and make it as interesting and informative as possible. Now that we have our content figured out, we can move onto sketching wireframes.
Soft Facade have beautiful, in-depth design case studies.
Sketching Wireframes
The approach I take to sketching wireframes is simple but effective, and all you need is a pen and a sketchbook. I firstly write down a list of all the elements I need to include on the webpage. I then group related elements together before prioritizing these groups based on their importance. Here is my list of elements for my contact page.
List of page elements for my contact page.
Once you’ve got your page elements grouped and prioritized, it’s much easier to arrange them on the page. Place your more important elements towards the top of the page and use white space to create your groupings. I took a desktop-first approach to the design of my site, as I wanted to focus on displaying my design work in detail on a larger screen.
When we come to writing the CSS later on, we’ll actually be taking a mobile-first approach as it will simplify our CSS code, we’ll get to that shortly. I usually sketch my wireframes with pen and paper, but you can also use tools like Balsamiq or even Photoshop or Illustrator. Here’s a wireframe for my contact page. It doesn’t need to look pretty, it’s simply a plan of your web page to work from.
Contact page wireframe.
Responsive Design and Flexible Grids
I wanted to make my site responsive to different devices to ensure an optimal user experience for visitors on desktop, tablet and mobiles. When designing websites I usually like to use a grid, as it provides a structural foundation for my design while also making the development process easier and more efficient. Joshua Mauldin sums up grids pretty well.
“Think of it like a house’s foundation. With a solid foundation, the house is stable, and building on it is easy. With a solid grid, your design can easily be adapted to accommodate whatever changes come along”.
Some designers find grids to be limiting, but it really depends on the design you have in mind. I find that using a grid results in neater and more organised looking designs. My design was quite simple so I used a custom 12 column flexible grid, but a 16 column grid will give you more definition and accuracy. I also defined a maximum width of 1040px to ensure my design didn’t look stretched on larger monitors.
Using a flexible grid (rather than having 3 separate fixed widths for mobile, tablet and desktop) means that my site scales dynamically to fit on any device width. Below is the CSS for my responsive grid, but feel free to create your own to suit your design. You can use tools like Grid Pak, Responsive Grid System, Golden Grid System and Responsify to help create your own responsive grid. I used ideas from a few of these tools to create my own custom flexible grid.
CSS for my responsive grid:
After looking at the CSS above, you might be wondering how the [class^="col-"] CSS selector works. It’s actually called a substring matching attribute selector and all it’s doing is selecting any classes that begin with the following string: “col-”. You can also use substring matching to select other attributes that end with a certain string or even those that contain a certain string. Substring matching is a very handy way to create more complex and powerful CSS selectors, and they’re well supported too, going as far back as IE7.
HTML for my responsive grid:
The HTML is quite simple too and consists of rows and columns, much like a table. Here is a very simple example of a two column responsive grid that I used on my site. The left column spans across five columns, while the column on the right spans across seven.
Setting Logical Breakpoints
When designing a responsive website, there will be certain widths at which the layout breaks or the text becomes squashed and difficult to read (45 to 75 characters per line is comfortable to read). These special widths are known as breakpoints and they’re usually set based on common device widths e.g. 320px to 480px for mobile, 768px to 1024px for tablets, and 1024px and over for desktops. The problem is that “common” device widths don’t really exist anymore with the growing number of different devices, so this solution doesn’t scale well.
Setting breakpoints based on the content rather than device widths is a more scalable solution. For example, rather than blindly setting a breakpoint at 768px width for tablets, I instead looked at my content and found that it looked fine until it became squashed below 600px width. I thus set a breakpoint at 600px to change the layout to ensure the content was legible at and below this width. Yes, you need to optimize the display of your site on various devices, but your content should always determine where your breakpoints lie. These are the four breakpoints I needed for my design: 320px, 600px, 1024px and 1140px.
When writing the CSS media queries for my site I took a mobile-first approach. This basically means that I wrote the mobile styles first as my base, followed by the tablet and then the desktop styles. Mobile styles are generally more simple than those needed for your desktop design, so it makes sense to write them first. They form the foundation of your styles, we can then add the more complex styles for larger screen sizes. Cascading your style sheet in this way keeps your code clean and DRY (Don’t repeat yourself). Here are my media queries below.
Media queries:
With my breakpoints defined, I could sketch out the tablet and mobile wireframes. Sometimes it makes sense to hide or omit content on smaller devices, but I wanted to make sure as much content as possible was available across all devices. Why should mobile users miss out on valuable content? People are used to scrolling on mobiles anyway, so think first before removing or hiding content. The easiest solution isn’t always the best one.
Designing High Fidelity Mock-ups
Once I had my desktop and mobile wireframes sketched out, I moved into Photoshop and started mocking-up the website in more detail. I don’t like to spend too much time in Photoshop as I think that it slows down the development process. Don’t worry too much about creating a pixel-perfect design, as you’ll have time to tweak and refine it during the coding process anyway. Instead, simply mock-up the main page templates along with any other design elements and assets you need.
I mocked up my header and footer along with the basic elements of my “About me” page below to make sure I was happy with the aesthetic.
“About me” page mock-up.
Similarly, I didn’t mock-up any mobile or tablet designs in Photoshop, as I find it quicker to simply code these up based on the wireframes. I did however spend some time on smaller details like icons and textures, as small details like this can make a big difference to the final polish of the site.
Development
Now that we have our site planned out and all of our image assets ready to go, it’s time to start coding. So get out your headphones and your favorite text editor! My text editor of choice is Sublime Text. It’s simple, fast, powerful and easy to use. If you’re a Windows user I’d also recommend Notepad++.
I usually start from the top of the webpage and build each element one by one. Let’s start with the header navigation. I like to write out the HTML for the element first then move onto the CSS. Remember that we are actually creating the mobile version first to reduce code bloat. Depending on the complexity of your project, you can either start coding from scratch or use a base framework like HTML5 Boilerplate, Foundation or Compass.
Using CSS Pre-processors (LESS/SASS)
If you’re not yet familiar with CSS pre-processors like LESS and SASS, you should definitely familiarize yourself with them as they’ll save you a lot of time and effort and help streamline your CSS styles. A CSS pre-processor basically gives you more power when coding CSS, as it allows you to use object oriented programming practices when writing your styles.
LESS and SASS CSS pre-processors.
We’ve all wished that we could create variables in CSS, define functions and re-use code snippets without having to copy and paste continuously. CSS pre-processors allow you to do this and much more, while keeping your styles clean and organised. Your LESS/SASS code is simply compiled and output as regular CSS.
I actually used LESS to create the CSS for my website. However, after experimenting with both LESS and SASS I feel that SASS is a more powerful solution, so I’ll be sticking to SASS from now on. Chris Coyier compares LESS and SASS and shows the subtle but important differences between the two. The decider for me was that SASS uses Compass and gives you access to a library of useful and well maintained mixins to use in your projects, LESS doesn’t. Feel free to have a play with both to see which one you prefer.
Progressive Enhancement with Modernizr
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the visitors’ browser and adds those features as classes to the <html> element. We all want to take advantage of the latest CSS3 and HTML5, but what happens in older browsers that don’t support it?
Modernizr basically tells us which features are supported in the visitors’ browser, allowing us to write conditional CSS and JavaScript to handle each situation. Thus it allows us to easily take a progressive enhancement approach; providing everyone with your basic website features, while also giving those with modern browsers an enhanced experience.
Creating Flexible Images
Flexible images are a very simple but important part of any responsive website. To make your images flexible, simply place them into your responsive grid container and add the below CSS to your style sheet. They need to be inserted using the <img> tag, although there are ways to achieve flexible images using CSS background images too. If you want to get more technical and actually serve different images depending on the device being used (e.g. serving smaller images on mobiles to conserve bandwidth), you can look into these techniques for serving truly responsive images and avoiding duplicate image downloads.
Using CSS Image Sprites
We all know that it’s a good idea to combine your icons and image assets into CSS Image Sprites, rather than having multiple individual images loading one after the other on your site. It decreases load times and also makes it easy for you to edit and maintain image files at a later stage. I usually like to create several sprites for the different sections of a website. For example, one of my sprites contained all of my icons, while another contained the common global page template elements e.g. logo, header icons, navigation background and footer icons.
When you’re creating your sprites, it’s always a good idea to think about how your website loads. If you’ve got a bunch of image icons that are only used on a single page of a site, it’s probably best to separate them out from the main page sprite. This will ensure that they’re only loaded when they need to be, while keeping your main sprite file size low. Using sprites will also make things easier when it comes to preparing your images for high definition screens later on.
Creating image sprites can be a cumbersome process, so tools like Sprite Cow can come in handy in helping you create them quickly and easily. You can also use a combination of SASS and Compass to generate your sprites automatically from separate images.
Catering for High Definition Screens
To ensure that your site looks crisp on high definition (or Retina) screens, it’s best to try and use CSS to style as much of it as possible. Remember that some of the newer CSS styles won’t render in older browsers, this is where a progressive enhancement approach makes sense. In most cases you won’t be able to build your site completely from CSS, you’ll need images. Luckily it’s not too hard to prepare your images for high definition screens.
Basically you’ll need to create a larger version of your images that will be used on high definition screens. Since our images are contained within a sprite, all we need to do is create another version of the sprite that is exactly two times larger. Let’s say our sprite is named sprite.png, we would name our high definition sprite sprite@2x.png. To decrease load times (especially on mobile devices) it’s also a good idea to compress your images using Jpeg Mini, Tiny Png or Image Optim if you’re on a Mac.
Simply create another image twice the size of the original for high definition devices.
Once you’ve created your larger images, we simply use media queries to show the large images on high definition screens. You need to be careful with your media queries, as iPhone’s aren’t the only high definition devices around at the moment. There are other mobile phones along with Retina iPad’s and MacBook Pro’s too. I used two high definition media queries on my site; the first one is for high definition mobile devices, while the second is for tablets and laptops.
Media queries to target high definition screens:
Wouldn’t it be great if we could avoid the need for media queries and separate high definition images altogether?
An even better way to cater for high definition screens is to ensure your images are vectors, this means that they will scale to fit any screen size and look crisp on any device. You can actually draw your images or icons in Illustrator and export them as SVG (Scalable Vector Graphics) files. The SVG file basically consists of XML-based code that describes your image to the browser.
Another clever way to get scalable vector icons that look crisp on high definition devices is to use Icon Fonts like those from Ico Moon and Font Awesome. I didn’t actually use these methods on my site, mainly because I didn’t have many icons or vector images. But if you’re looking to use vector images and icons more heavily on your site, then these techniques will definitely come in handy.
Page to Page Transitions
I’ve never been a fan of the abrupt way in which one web page jumps to another. When you click on a link, there’s usually a sharp jump followed by images loading awkwardly and sporadically onto the page in no particular order. I wanted to control the way my content appeared, to create a smooth transition from one page to the next as a visitor navigated through my site. So when a visitor clicks on a link to go to another page of my site, the current page will basically fade away to white before taking the visitor to the next page. The next page will start from a white background, then the content will animate smoothly onto the page. I think that it creates a pleasant and consistent user experience.
To achieve my page to page transition effect, I actually needed to use a jQuery preloader plugin like jPreLoader or QueryLoader2. This ensured my images were loaded before they animated onto the page, otherwise the animations would happen before the images were there. I’m not a fan of preloaders in general as the user needs to wait until the page loads before they actually see anything, but it was necessary to achieve the page transition effect I wanted. I’m actually going to experiment with hiding the preloader if the page loads quickly and only introducing it on longer page loads. This would mean that most people would simply see one page seamlessly fade to the next, without a preloader being shown.
I’m interested to hear of any other methods to achieve page to page transitions without the need for a preloader.
Here is a very simple jQuery function that causes the page to fade out when visitors click a link to leave a page:
I wanted the “leavePage” animation to happen when visitors clicked on a link to go to another page within my site, so I simply added a class called “transition” to the appropriate links. When a visitor clicked on any link with the “transition” class, the “leavePage” animation would be triggered. This is a very simple animation example, but you could build on this with your own more complex animations.
So the user has clicked a link, the current page has faded away and they’ve landed on the next page. What happens now? Our jQuery preloader will take care of the rest. The preloader basically displays an overlay that covers your page while your page is loading. Once loading is complete, the overlay fades away to reveal your page. Of course you can create your own custom animations to animate your content onto the page in more interesting ways. I won’t go into this in too much detail, as there are many ways to animate content onto the page.
You might like to slide your content in from the sides of the page one element after the other or fade elements in from top to bottom. Basically you’ll just need to write a function to animate your content onto the page, then call this function after the page load is complete. Luckily, both of the jQuery preloaders I mentioned above have callback functions that allow you to call your animation function after the page load is complete.
Preventing FOUC (Flash of Unstyled Content)
One of the most annoying issues I had while trying to achieve my smooth transition between pages was a flash of unstyled content (FOUC) before my jQuery preloader had even started. It wasn’t always there, but every now and then I would see some of my content flash onto the page before my animations had even started. Luckily I found a clean and simple way to prevent the FOUC that worked perfectly.
Animating Content on Scroll
I love the idea of including subtle animations as the visitor scrolls down the page. It’s become a bit of a trend recently, and I think it improves the user experience and adds a touch of polish to the page. I used a simple but powerful jQuery plugin called Waypoints to help me create my on-scroll animations. It basically allows you to trigger your animations at different page scroll distances.
If you’re looking for an easy way to do more complex animations on scroll, you should check out the Scrollorama jQuery plugin.
Custom WordPress Development
I decided to build my website on a WordPress platform, mainly because I’m familiar with it and I wanted to include blog functionality on my site. It’s also a nice time-saver to be able to easily install plugins to add extra functionality to your site. It’s a pretty simple process to install WordPress onto your server and turn your static HTML pages into a WordPress theme. If you’re not familiar with WordPress, you can always use another CMS platform such as Drupal, or feel free to avoid them altogether and just build it from scratch in PHP (It really depends on the complexity of your site).
Since some of the pages on my website had quite varied layouts, I needed to create a few custom page templates. For example, I couldn’t use a standard WordPress page for my homepage as the design is quite customized. So I created a custom template for the homepage. It’s actually really simple to create a custom page template in WordPress. I also created custom templates for my portfolio item pages and contact page.
In order to separate my portfolio item posts from my blog posts, I decided to create a custom post type for my portfolio items. This basically allowed me to use a different template for blog posts and portfolio item posts. You might be able to get away with simply displaying your portfolio items as blog posts and categorizing them into a “portfolio” category to separate them from the standard blog post articles. I needed the flexibility of a custom post type with a different layout. I won’t go into more detail about WordPress development, as there’s plenty of great WordPress documentation out there already.
Testing And Analytics
Cross Browser Testing
I’m sure you’re all aware of the importance of cross browser testing to ensure that your site renders correctly across relevant browsers. You’ll notice that I didn’t say “all browsers”, that’s because you really only need to ensure that your site renders properly for your particular audience. If you know that all of your visitors are using modern browsers then you don’t need to spend valuable time and effort supporting older ones.
Test your site on the major browsers.
So how do we test our website across all the relevant browsers? If you’re on a Mac like me you’ll be able to simply download all the modern browsers like Chrome, Safari, Opera and Firefox. So how do you test Internet Explorer on a Mac? One simple and free way to do this is to simply setup a virtual machine running Windows.
You can also use an IE emulator tool like IE Tester or alternatively sign up to services like Spoon or Browser Stack, which allow you to test your site on all major browsers including Internet Explorer 6, 7, 8, 9 and 10. Rather than leaving your cross browser testing right until the end of your project, it’s probably best to test your site every now and then during the development process to make things easier at the end.
Setup Google Analytics
It’s always a good idea to add Google Analytics to your website to collect valuable statistics on your visitors. You’ll know the location of your visitors and whether they’re arriving via Google searches or from referring sites. One of your blog posts might get mentioned on another site, if you’re not monitoring your traffic sources you might not even know about it.
Analytics will also allow you to build a profile of your visitors and get an idea of which countries they’re from and what browsers they’re using. You can use this data on an ongoing basis to improve and optimize your site for your visitors. Setting up Google Analytics on your website is free and only takes a few minutes. Simply sign up, copy and paste a small JavaScript code snippet into the footer of your site and you’re ready to go!
Time To Launch
So we’ve designed, built and tested our new portfolio website and we’re finally ready to launch (High five)! It’s one of those experiences you simply shouldn’t miss out on as a designer. I had a great time creating my site and learned a lot in the process too. Sure, there were hurdles and challenges along the way, but isn’t that what makes design so interesting? I’d love to hear about your experiences creating your own portfolio site.
I hope that my journey will help and inspire you to create your own site, or finally start that re-design you’ve been contemplating for the past few years. So get out your headphones, knuckle down and start pushing those pixels. I wish you all the best on your epic quest ahead, good luck and may the force be with you.
© Adham Dannaway for Smashing Magazine, 2013.