Alisen Hazzard

the Blog

Portfolio Website Design Process

Posted on March 22nd, 2015

The Benefits of Wireframing

Before I started this portfolio and blog project, I used Balsamiq to create a wireframe. I hadn't used this software before, but I found it highly beneficial to my outlining process, and I ended up really liking the program and the tools it offers.

The Balsamiq interface is relatively straight-forward. Elements are sorted by function and have convenient graphics to tell you what they do. It has built-in grids for positioning elements, which is great for laying out images and text to get an accurate view of what they will look like once you implement them in your code. I only made a mockup for the desktop layout of my portfolio, but it also has tools for designing wireframes specifically for mobile.

I stuck pretty close to this layout when I wrote the code. Here’s the mockup that I made:

I've done some wireframing on previous projects, but on smaller-scale websites I tend to just go for it, writing the HTML and CSS as I go and rearranging as needed once the layout takes shape. I thought this was a perfectly acceptable way to code (and it might be for some), but with a wireframe, this project took considerably less time than it would have without one.

The most helpful part of wireframing for me is using a content-first approach. I knew where I wanted to include the text and images before arranged the other elements. With wireframes, you can see right away how the site will work. If you need more whitespace to break up an area, or if you find multiple text-heavy sections next to each other, you can quickly remedy any pressure points. For me, it was a beneficial time-saver to correct these issues early in the process.

Fixed Background Attachments

I know it’s trendy to use gradients but I really do like the Instagram-filter-hipster look for this project. Here’s my (very simple) code for the header image:

.main-header {
    height: 750px;
    background: linear-gradient(#C84309, transparent 90%),
    			linear-gradient(0deg, #000117, transparent),
    			#C84309 url('../assets/beach.JPG') no-repeat center;
    background-size: cover;
    background-attachment: fixed;

Using a fixed background-attachment property keeps the image and the overlaying gradient from scrolling with the rest of the page. I used this technique in a few spots on the site. I especially like the middle image, which has a smaller height then the header and footer images, so you only get a small area of the image at a time.

Highlighting Web Design

This website focuses mostly on my web design projects. To put emphasis on them, they are the first elements that display as you scroll, and each one has containing whitespace so they display one-by-one across the entire screen. Instead of using a color-scheme for my site and incorporating those colors into the portfolio, I pull colors from the individual site designs to use on the calls-to-action.

I kept it a simple, single-page layout website. I send the user straight to my portfolio projects instead to another landing page for each website.

To me, there is only so much you can say about a project (the specific work you did for it, the purpose of the site, interesting elements you included) before the user just needs to look at the site. From a UX standpoint, I think it’s better for the user if they are launched straight to the project from the portfolio, so that’s the structure of my site.

I’ve also paired-down the number of projects I’m featuring. It’s gotten to the point where my latest projects are significantly better and cleaner than past ones (in appearance as well as code), so this portfolio focuses on fewer projects.

Including a Blog

Additionally, I made the blog section of the site a secondary component. My last site was WordPress-based, and I liked having my latest and featured posts displaying on the home page, but that made it more of a blog/portfolio than a portfolio/blog.

I used some layout components of Medium when structuring my blog section, because I like the simple structure.

Here’s my inspiration for the post structure and sidebar components from Medium:

It’s helpful to find inspiration in sites that are easy to use. This seems intuitive, but I think it’s a better approach than basing important elements on a site that is unusual or unique - sometimes these are the sites that make you go “Huh…” and then you have to think about where the navigation is or how to browse new posts. From a design standpoint, I love sites that are unusual. But from a user standpoint, I just want to automatically know what’s going on in the website.

Other Portfolios for Inspiration

I’m glad to have a shiny, brand-new site to feature my work! Here are some other portfolios that I like for further inspiration:

  1. 1. Joel Califa is Sad - Resume structure, great colors, simple text with good hierarchy
  2. 2. Johnie Hjelm - One page layout, clean and readable text
  3. 3. Florian Wacker - Short, simple animation in the header, elegant transitions

Tagged in: Web Design Wireframes