Darian Rosebrook Portfolio

01 November 2016 | Web Design

Background

A personal touch with a flavor of red and dark purple

It has been exactly a year since I started my journey as a Web Designer and Brand Identity Designer. So it’s only fitting that I settle on a final design for my portfolio site. It has been a fun and exhaustive journey, but in the end all of the hard work and sleepless nights have been worth it.

This case study is the second half to the rebranding of my personal portfolio site. All of the site is personally designed, strategized, and coded by myself, so it really is with pride that I present my own site.

My Previous Portfolio was a self serving site that built up on the previous 3 versions over the last year. Yeah, you read that right. I had four different revisions before this current site.

The technology used that runs the portfolio: Jekyll, Sass, Vanilla Javascript, Github Pages, and Cloudflare

The Goals

  • Mobile Responsive from the beginning
  • Optimized for speed
  • Change the focus from what I like into what is going to be best for displaying work
  • Show how someone could benefit by choosing to work with me
  • Unify the brand under a professional style design
  • Actually finish designing and developing all pages

Research

Improving the professionalism

I had a love for web-card design early on in the year 2016. Sadly, it wasn’t the best for readability, it performed poorly when scaling up and down my site and wasn’t in tune with the rest of the style. A clear change was the removal of the buttons on every piece of content. If everything was a button, there were no buttons.

I needed to have clear call to actions, so it came down to utilizing buttons only for important tasks. (hiring, subscribing, seeing more work… etc.)

I had reviewed the portfolios of some of the top professionals in my industry and took extensive notes on what was working well for them and some areas where I feel that things could improve.

The fifth version of my portfolio site. The old site’s use of cards and buttons

Development

My new site is based off of the previous version. I had about 50% of all the assets in place. The order of sections stayed pretty similar with the noticeable changes are the unified brand style and the user experience got a huge facelift. There were many things that I chose to update or build from the ground up again. This allowed me to make sure that I was optimizing sections of code and not repeating some of my first mistakes. You can see below that this is more than just a re-skin of the previous site.

Reskinning the site wouldn’t do my work justice. I had grown in design to a point where I needed the new portfolio to reflect that.

By building the design system up I was able to make a more cohesive site that felt whole. There wasn’t room for “out of place” assets in my design.

Final Concept

The final site that follows completes what I had originally envisioned when creating a personal portfolio for displaying work. It lays out many of my work and case studies together in an easy to digest manner. The css is built so that the default styles are for the smallest sizes first and reorder the elements on the page as the device size scales up. By doing this, I was able to make sure that every asset used in the design was necessary. I wasn’t about to cut certain areas to “trim down” the design instead “builds up” to what we see on desktop views.

Every decision made for the site as it continues to grow makes it that much better for myself in the long run. This will reset the example of how I handle my web and branding projects in the future.

The fifth version of my portfolio site.

Images

desktop image of the for the final concept of darianrosebrook.com desktop image of the for the final concept of darianrosebrook.com desktop image of the for the final concept of darianrosebrook.com desktop image of the for the final concept of darianrosebrook.com desktop image of the for the final concept of darianrosebrook.com desktop image of the for the final concept of darianrosebrook.com desktop image of the for the final concept of darianrosebrook.com

Let's Get in Contact


Thank you!

I'll review the responses here and respond to you as soon as I can. Thanks!