Web Interface Tutorial Posted at PSDTUTS+

May 15, 2009

PSDTUTS+ posted How to Elevate Your Website Design Process and Results, a web interface tutorial that I wrote for them about web interface design. This web interface tutorial focuses on creating a business web interface design with a fun side; some of the ideas and patterns explained include the 960 grid system, consistency within your designs, the hierarchy of elements, Photoshop keywords and websafe fonts.

full view of the mock up created for the web interface tutorial

For example, consistency is a reoccurring theme through out the web interface tutorial. From small things (such as making sure the radius of corners is always the same) to more obvious concerns (like that all buttons are set in the same type), consistency is a practice I heavily emphasize. If the readers of the tutorial can understand the importance of consistency and how useful it is in aiding the scanability and usability of a website, they will walk away with a more enlightened view of web interface design.

Detail view of the PSD Tuts plus mockup created for the web interface tutorial

PSDTUTs approached me to write this web interface tutorial because they admired my work and felt I could help other web designers achieve the same level of success in their designs. Since it was my first web interface tutorial, I was quite overwhelmed with the difficulty of not only gathering the images, but actually writing the tutorial itself. While at times I venture off topic here and there, I feel the final product was a great in-depth look at the web design process, best practices, patterns and tricks.

Below you can read the overview:

This tutorial will guide you through the process and ideas behind the designing a professional website with a funky flair in Photoshop. The tutorial will read much like a “choose your own adventure” novel in the hopes it will encourage creativity and uniqueness in your design with a little advice and instruction along the way. Adventure time!

If you have any questions for me after reading this web interface tutorial, please do not hesitate to email me at hello@chapolito.com.