Portfolio Website

Portfolio Landing Page
Portfolio Landing Page

THE CHALLENGE:

In order to present my work in a clear, personalized manner to viewers, it was necessary to build a site to host my portfolio pieces. There were three methods to accomplishing this:

  1. Host my work on a pre-built portfolio site, such as Behance or Dribbble;
  2. Creating my own site, but use a pre-made template such as Wordpress or Squarespace; or
  3. Build a website to host my portfolio from scratch.

Wanting to use this as a channel to not only display pieces I’ve produced, but also to demonstrate my abilities, I opted to create my portfolio from scratch.

THE SCOPE:

Solo effort, comprising all aspects of front-end design and development.

Portfolio Landing Page Sketch
Initial Landing Page and Logo Sketches

UX/UI SKILLS USED:

Website Design, Visual Design, Front-end Development, Information Architecture, Wireframing.

TOOLS USED:

Sublime Text 2 (HTML5, CSS3), Adobe Photoshop, Adobe Illustrator, Sketch, Balsamiq, pen and paper.

THE PROCESS:

The first step to completing this process was to establish what I wanted to convey through the design. I began by sketching potential designs and information architecture layouts, using my experience reviewing leading design websites that maximize creativity yet maintain a clear, intuitive flow.

I knew I wanted a crisp, minimalistic appearance to the landing page and to have the page’s emphasis be on my personal logo; the immediate takeaway should be that this is a portfolio of someone—namely Charlie Ash—with a strong connection to Boston who focuses on UX- and UI-design, and instinctively know by viewing this landing page what sort of designing they might expect from me.

The rest of the homepage—the About Me, Portfolio, Contact, etc.—sections should reflect my style, with a professional appearance. Clear sans-serif fonts in front of a primarily-solid background, allowing for a clean, easy viewing and reading experience. It was also important to distinguish each page that was a level or more below the homepage as maintaining a consistent brand that reflected the same feeling as the homepage.

Portfolio Wireframe Sketch
Portfolio Wireframe and Information Architecture Outlines

To bridge the gap between creativity and complexity, and allow myself to explore some more complex ideas, I used a Bootstrap framework which I then modified to achieve my desired goal. It allowed for some more advanced features (for example, a parallax effect) that featured my HTML5, CSS3, and Javascript skills.

THE SOLUTION:

The produced portfolio, as it is seen currently, is the first iteration in what I hope to be a successful and fulfilling career in web design. The design invokes the process my projects reflect: a clear, concise design, beginning with pen wireframing on graph paper and with minimal “flair,” but clear creativity to create a unique brand for each product. This version of the portfolio comprises my early work in wireframing, prototyping, visual design, branding, typography, front-end development, and information architecture. As my skills grow and become more refined, I will add pieces that reflect my increased abilities and creative expansion.

202-400-8607




© Charlie Ash 2015