Web Developers Guide to Web Design

I am a developer with modest design skills on a good day, and no formal training in the great arts of Design and User eXperience. However, I have compiled a set of BPs that allow the non designer in me to produce good looking and professional UIs at least I think so, what do you think?.

Thankfully the Internet is full of great designers with kind soles that have distilled their years of training, experience and most of all personal direction into a set of general guidelines and formulas that make even no-talents like myself look like a pro!

[TODO Give some credits and reference some of these folks].

My Prespective on UI Design

At the moment of this writing I am in the processes of building a startup. I am in the customer discovery phase.

I am closely following the The Startup Owners Manual and The Lean Startup principals, which means that I need to rapidly iterate through UIs.

My biggest pain point with UI design at the moment is the need to change it quickly, while plugging it into a backend that may be an existing production service or a mockup of a service that is to be.

Basically, I need to be able to show people the future that I can help create for them. In turn, they need to tell me the future they want to have created for them.

People Expect Beautiful

The days are gone when you could slap up an Ugly interface and expect to amass a large user base like craigslist. Or at least it is much harder now that user expectations are up.

I need to build a UI that /looks and acts/ like the finished application, because that is the only %100 sure wat if my app will be used by my customer.

If we work together we can iterate ourselve to meeting of minds were I can begin to build a product or service solution that my client can NOT wait to pay me for.

UI Designed By Users

Ideally, I really want my users to design the UI with me. I enjoy doing interactive design sessions where the user(s) are watching as I make changes and start getting feedback.

Every full iteration needs to be viewed and accepted by the customer, and hence the need for acceptance testing.

I want to be able to iterate through UI’s in a scientific manner building the ultimate User Experience by optimizing through test, measurements and feedback.

The Design Process - Understanding the User

We need to understand the user and how they expect to, or would like to interact with the backend software that this front end is being made for.

Storyboard and Wireframing

Identify a single /Persona/ and a specific use case one of each, period.

Storyboard that use-case meaning draw each step the client will make through the journey of purchase.

Wireframes

Paper for me. In the beginnings wireframes do not have a ton of detail. You can also leave out the copy by replacing text with appropriately weighted and sized squiggly lines.

Todo: Take a shot of one my wireframes and place here, that’d be cool, right?

  1. Wireframe every unique page or template
    1. One wireframe per reusable template is fine!
  2. Give every section of every page an identity
    1. We will use it to track our media inventory

At the end of the day we are going to either want or be required to produce a User Interface that is “flawless” to some reasonable extent, to do this, every piece of every page needs to sport a design that consistent with the rest of the site.

We may as well do the best we can thinking the site, pages and purpose of every page.

Style Guide

  1. Font Families for Header and Body

  2. Fix font sizes and styles for all elements

  3. Figure out spacing, white space is good

  4. Color Palate, including all shades

  5. Color Use Guidelines

    1. White text on images always

  6. Create a Manifest for all Required content

    1. Inventory content: location if ready, assigned todo if it needs to be created ready.