Client

Personal project

Role

Web Developer, Graphic Designer

Project Brief

As a personal project, I need to assemble a well-structured professional portfolio that showcases the best of my development, design, and illustration work to clearly demonstrate my experience, skills, thinking / solutions, and style.

Key Insight

Presenting vital information about who I am, where I’ve been and what I’ve done in an easy, organized, structured fashion is exactly what a portfolio is about. Curating projects that exhibit the range and depth of skills and knowledge I can offer, to engage in conversations with employers or clients is the goal.

Because development is one of my areas of expertise, it is crucial to avoid building a portfolio assisted by templates or content management systems.

Solution

To demonstrate my development and coding skills, it is very important to create a framework and code from scratch. To produce a simple, systematized design (and show my design skills) I will design based on modules and I will use modular typefaces inspired on technical drawing. To create a clear user interface (UI) for a straightforward user experience (UX), I will implement best practices for ease of navigation and findability, keeping click efforts to a minimum.

Specialties Used

• UX/UI design: Wireframes and pixel-perfect prototype comps, mobile responsive layouts, website architecture and site mapping, user-centered planning
• Graphic design: Web graphics, branding, design composition, website design
• Web development: HTML5 front end web development, responsive queries, CSS3 modules, Sass, preprocessing, JavaScript snippets

Technologies Used

OmniGraffle
Adobe Photoshop (Adobe Creative Cloud)
Adobe Illustrator (Adobe Creative Cloud) HTML5
CSS3
JavaScript snippets
Atom
CodeKit

Results

Logo

One of the first steps for this portfolio website project was to design a new logo to update the branding that represents my name. I wanted a modern logo that complies with fundamental design principles, leveraging proportional grids and modules for mathematical precision and proper two-dimensional composition. For the color, I chose a green color; liking what you are designing is important to the process and the color choice makes me feel fresh and happy.

Logo Guidelines

As a standard practice whenever I design logos, I created the logo guidelines. They contain the modules that make up the logo, color palette specifications for primary / secondary brand colors, tagline use, icon versions, logo variations, and guidelines for clear space and usage.

Icons

Defining icons as part of the logo design process is very important because they are a part of the online presence of the brand and are used in social media profiles and websites in general. To have options that work well in different online environments, I created two color options.

Design

Technical drawing, architecture, mathematical precision are all things that inspire my own style of design. I can always adjust design style depending on the project, but for my professional portfolio, I wanted to use the type of design that interests me as a designer.

Simple, systematized design inspired by German and Swiss mid-to-late 20th century design influenced my website’s look and feel. I am a big fan of Letraset, Staedtler technical drawing tools, parametric design, geometry, Gestalt, Wucius Wong, and work by Neubau Berlin.

I incorporated Neubau Laden tree silhouettes, patterns, and fonts. Trees are a main component of my branding; they are a biological component that brings balance and life to what is otherwise a minimalistic, mechanical design.

Modules

The pattern modules, which are geometrical and graphical building blocks, serve as backdrops to draw interest and attention and are used in the primary navigation area. The selected vector object can be filled by taking a swatch from the available modules. The transparent spaces between modules enable the super-imposition of multiple layers, producing an array of visual results. I chose six different patterns to create the combinations I used throughout the website and social media profiles.

Color

I selected the main warm-green color simply because it is one of my favorite; it represents freshness and works well with the tree silhouettes. I added a darker green shade as a secondary color for design elements. Then, I attached charcoal gray for text elements, a very light gray (almost white) for backgrounds, and white to emphasize certain UI elements. This form the primary color palette for branding.

Typeface

As mentioned earlier, Neubau Berlin’s work is a big influence on my design style. I selected typefaces from their foundry (Neubau Laden): NB Architect 2015 Regular and NB Grotesk Regular.

NB Architect 2015 Regular was designed to pay tribute to typography used during the Letraset era on architectural construction blueprints. I have been drawn to these fonts since I was a kid; they remind me of the functionality and practicality of technical drawings and this font is like the Helvetica of blueprints to me. I employed this typeface in titles and headings.

NB Grotesk Regular is a monoline neo grotesk typeface based on a grid system that follows strict rules; it was created by Neubau Berlin for “Neubauism”, an exhibition of their work in the Netherlands in 2008. I used this typeface in paragraph / body text because it esthetically pairs up well with NB Architect 2015 Regular and is very legible.

User Experience

I spent many days researching portfolio best practices and examining what others have published. I had a clear idea of what I wanted to focus on and I did extensive user-centered planning to review content and optimize the new site architecture.

Using UX/UI design principles and best practices, I laid out detailed a site map and a user experience flow chart illustrating the entire experience. Agile methodology was used to develop the website and I maintained a Kanban to keep track of the completion status of each task. The site map and flow chart provided a broad visual of the website and its deep linking relations and calls to action. User error conditions and tracking issues were solved at this point to minimize any UX/UI problems.

Next, I created a semantics wireframe. This is a visual map (or wireframe) of the HTML elements used in the development of the site to build the different containers, blocks or sections. It helps guide the development of the CSS and ensures proper semantics are added to the HTML to facilitate search engine optimization (SEO).

Website

With the wireframe laid out and a clear idea of where the elements (logo, introductory blurb, menus, and portfolio pieces, etc.) go, I used a Fibonacci or golden spiral (see Development section below) to create the space for the header and position for the logo in the centermost point. I made a sequence of golden ratio-based calculations after this to determine the width of the site and positioning of elements.

The calculations made, because they have a mathematical nature, then allowed for an easy flow to determine where the responsive breaks needed to happen. I created mobile and tablet versions of the design to have visibility of any elements that might need adjusting once in responsive view.

I worked on designing the menus and contents of the page, including the line and title hierarchies.

Development

With the semantics wireframe and the designs ready, I started development of the website, which is front end based (strict HTML, no back end or databases needed).

At a very high-level, these are the main steps I took:

1. Build the file structure to keep all the website assets organized and referenceable
2. Set up a preprocessing environment using CodeKit, so that every time I save the site files they automatically refresh the browser, optimize CSS files, and add cross-browser CSS support; this makes the dev process more efficient and secure
3. Write Sass (which is interpreted into CSS) for the main pages using Atom (another reason why I am using CodeKit)
4. While some developers advocate for starting development with the mobile versions of the site, I start with the full-site, desktop version. It works out for me because at this point I have already invested time into resolving the break points in the right design process phase. In other words, I already know the design adjustments that will need to happen before I code without screwing around with the design in the development phase.
5. I generate a few versions of the CSS for different reasons:
1. Normalized.css, which basically resets browsers to render elements consistently into browsers
2. Main style.sass, which contains all the styles on the website
3. The variables.sass, which contains all the colors so that, should a color change, a single line of code can be adjusted and deployed across the board on the main CSSs
4. Responsive mobile.sass, which contains the responsive queries from desktop to tablet and from table to mobile
6. I include a table of contents in the primary stylesheets to clearly document its contents and simplify for future reference
7. Implemented HTML sidebar and footer includes using JavaScript
8. Test, test, test all the way and made adjustments as needed to eliminate any issues
9. Confirm cross-browser compatibility in Windows and Mac browser environments to double check no issues exist
10. Once the framework is stable, I generate every page and float in content
11. Perform a last pass for errors or issues and deploy when clear

Social Media

Social media has been a key activity of my work as a designer and developer. I have dedicated a lot of time to understand the specs and best practices behind using different platforms to push content and create engagement leading back to the website.

For this portfolio project, I created a simple strategy for social media engagement. I am focusing on Twitter as my main engagement channel, Google+ and Pinterest to curate content from other sources, and YouTube to eventually post videos.

External Portfolios

Today, it is common for designers and developers to maintain several external portfolios to make sure they are present and showcasing work in several environments. This is important to have sufficient coverage for colleagues and prospective employers or partners to find them.

In my case, this portfolio website and LinkedIn are my main channels. On Behance, Adobe Portfolio, AIGA I will place all my portfolio pieces. But the remaining channels, such as Autodesk Area, are specialized channels focusing only on a specific part of what I can do, whether that’s 3D modeling, illustration, sound, artwork, or street art amongst others.