left-aligned logo

Left-Aligned Brand Identity

Left-Aligned is both an online portfolio and a landing page for freelance web design work. The theme of this site needs to appeal to a professional aesthetic and ensure technical competency. This site’s fonts and symbology are intended to reflect a modern theme with minimal hubs for navigation. The idea is to be able to convey the most information in the most simple way. Symbology will play a heavy role in breadcrumb navigation as well and sub-category page identification. Smooth transitions and scrolling events will be used give the site a ‘personal console’ feeling.

Business Goals

At present, I am an entry level web designer that is ready to immerse myself into the web design & development world. There are two primary business goals for this site. First is to attract the attention of web design firms, or any other company that needs an ambitious entry level designer. Second is to continue to build my skills and portfolio in producing freelance work for local businesses in the Puget Sound area.

Front End Development

The front-end coding for the site will be built using HTML5, CSS3, and JQuery.

Back End Development

Back-End coding will run with PHP.

Web Browsers

All current versions of Chrome, Firefox, Edge, Opera, and Safari should be able to properly view the site. Specific functions may not occur using browser versions older than Safari 6 and Internet Explorer 7.

Browsing Devices

The site will be built responsively for optimal layout on any resolution device. The highest functionality is designed for desktop or laptop viewing. Functionality constraints may occur on mobile devices given the constraints of the device operating system. Patches will replace any un-supported functionality.

Information Architecture

This is a map of the site information architecture. I shows the hierarchy of the pages in the site and is a visual tool to discern if the progressive path of the site makes logical sense.

Click on the image below to see the site’s information architecture

information architecture thumb


A wireframe is a stripped-down visual design of the site that shows the simple borders of the articles and sections of the site. The wireframe is fixed to a grid in order to translate the proportions of the design into the code for the website. It is at this stage in the process that a proper layout is determined for each page.

Home Wireframe

Click on the image below to see the site’s home wireframe

home wireframe

Category Wireframe

Click on the image below to see the site’s category wireframe

category wireframe

Visual Design

The visual design is replacing the boxed sections of the wireframe with styled content. Images are optimized to fit the space, and all the visual aspects of the company brand are added to create a visually pleasing design.

Homepage Design

Click on the images below to see the home page design

home visual design

Category Design

Click on the images below to see the category page design

category visual design
Visit the Left-Aligned Website