Nikko Bautista

Project Details

Web Design, Copywriting
Adobe Photoshop

Discovery and Planning

His primary objective was to convey his expertise as a web application developer. His secondary objectives were to discuss the business and technical side of web application development, and to advocate social media and online social networking.

His main target audience consisted of potential clients and employers. He also expected fellow web developers coming in from industry websites and social media channels.

I did some research on the industry and created a content strategy to help achieve each of his objectives.

User Interface Design

I designed these website wireframes to determine the visual structure of key pages.

Home Page Wireframe About Page Wireframe Projects Page Wireframe Blog Page Wireframe Contact Page Wireframe

Copywriting

I wrote website copy for the home and about page, taking into account the client’s desired brand impression, what he wanted to be known for, the features and benefits of his services, and his ideal customer profile. I also considered his preferred voice: casual, friendly, helpful, bold, and knowledgeable.

Copywriting Copywriting

Visual Web Design

Branding

Style Guide

After several experiments, I selected Neutra Text for the website’s logotype and higher-level headings. This typeface has an open and warm character that’s perfect for the brand.

I selected Segoe UI for the other headings and Lucida Sans Unicode for the body text. Both are modern, professional, and easy-to-read typefaces especially suited to a website about programming and application development.

Such websites also tend to be text-heavy and contain few images, so I chose a bold color palette to provide the visual interest. This also matched the writing voice.

Visual Web Design

The visual web design stage brought together and built upon the planning, wireframing, and branding that I had already done. These are the final comps I designed:

Home Page Design About Page Design Projects Page Design Blog Page Design Contact Page Design

The designs use a combination of modern typography, bold colors, simple layouts, and small accentuations that show the client’s personality, match his philosophy, and serve to attract the interest of his potential clients and employers.