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.
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?
- Wireframe every unique page or template
- One wireframe per reusable template is fine!
- Give every section of every page an identity
- 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.
Font Families for Header and Body
Fix font sizes and styles for all elements
Figure out spacing, white space is good
Color Palate, including all shades
Color Use Guidelines
- White text on images always
Create a Manifest for all Required content
- Inventory content: location if ready, assigned todo if it needs to be created ready.