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.
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.
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.
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.
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
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.
Click on the image below to see the site’s home wireframe
Click on the image below to see the site’s category wireframe
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.
Click on the images below to see the home page design
Click on the images below to see the category page design