Understanding the Basics of Design and Then Applying them.
Learning the Tools of the Trade
Being a beginner in the world of Product Design, I knew that I had to start familiarizing myself with some very important software tools that are essential for any Designer. Over the course of a year, I began completing some basic tasks that helped me to better understand each tool.
As an example of one of these tasks, I began making ‘doodles’ in Illustrator. Although this may seem meaningless at first, I ended up doing hundreds of these over the course of many weeks which really forced me to understand the ‘in and outs’ of the program. I forced myself to use basically every tool available in Illustrator that included ‘Pathfinder’, ‘Objects’, ‘Effects’ and many more. More importantly, I learned how to use the tools in conjunction with each other.
Understanding the Tools is Useless without Understanding the Principles of Design
Yes, it was great that I was familiarizing myself with the tools of the trade but what good does that do me without understanding how to apply that knowledge? For this reason, I started to familiarize myself with the basics of design by understanding the principles and how they should be applied. I did a write up of each design principle (Fitt’s Law, Hicks Law, Color, Hierarchy, etc.) where I would find an example of a website using the principle correctly and one example of a website using it incorrectly.
This process really ingrained some of the core principles into my head by seeing examples of how they were used in the real world.
Putting the Basics to Work
Now that I had familiarized myself with some important tools and design principles, it was time to put that knowledge to the test.
I was given the opportunity to find a non-profit website of my choice and re-design it. I chose a website called the ‘1078foundation.org” (no longer active) which was created to collect donations for police officers that were hurt during the line of duty. The tool of choice for this project I would use would be ‘Sketch’.
The original website for lack of a better word was a mess and I knew I would have to start from scratch in order to make any kind of improvements. There was no direction to how the website flowed and each page seemed to have elements placed there at random. Most importantly, it being a donation website, I had an extremely hard time finding out where I could actually donate money. Needless to say, the biggest challenge was going to be re-designing the website in a way that was easy to navigate but also looked liked a trusted and legitimate site.
The Planning Phase
Before jumping right into it, I needed to do some prep work in order to have an idea of how I wanted to organize information and how I wanted the basic layout to look. So like any legitimate designer, I started out with some basic sketches as well as an idea map to help narrow my focus.
After completing the planning phase, I etched out some wireframes until I eventually arrived at the surface composition phase. This is where I was able to put all of the design principles and software knowledge to the test.
I designed the website for desktop, mobile, and the tablet platform. Thankfully, Sketch makes this process much easier by allowing you to chose per-determined pixel dimensions that fit each one. Here is the landing page:
Although it may not be the prettiest website out there, I was able to re-organize the most important information and give the website a much-needed makeover while remembering the design principles I had learned. I basically had to start from scratch but some of the most important changes I made were:
Some Key Changes
Alignment — I was able to fix many alignment issues that were present on the old website by creating and following a grid pattern that fit each platform(desktop, mobile, tablet).
Color — I chose red and blue as my core colors for the theme. These are the colors I most associate with the word ‘Police’.
Call To Action — The obvious ‘Call to Action’ for any charity website will most likely be eliciting a donation from the user. Unfortunately, this was not obvious on the previous site. To correct this issue, I created a ‘Donate’ button that remains static throughout each page and is clearly visible within the hero header.
Navigation — The old website was not easy to navigate. To correct this, I created a flowchart that mapped out a simple yet effective sitemap which I implemented into the new design. Now there is a navigation bar (desktop) or hamburger menu (mobile) that remains static on each page and is easily accessible.
Hierarchy — Each page of the old site contained too much information and felt a bit overwhelming. The first thing I noticed on the landing page was a see of testimonials that buried the more important information such as the donation link and contact info. I evaluated what I thought the most important information and then laid it out accordingly, giving greater emphasis to the more important elements of each page.
The Importance Of Repetition
As I still consider myself somewhat of a beginner, I understand that I still have much to learn. However, the journey that led me to the re-design is the most important insight I gained. It showed me just how important repetition is and how beneficial it can be to a novice designer by really ingraining an understanding of the tools of the trade. The same goes for understanding even the most basic design principles. By forcing myself to search out examples of how websites were using these principles correctly or incorrectly, now my brain automatically recognizes when these principles are being used or should be used. And although the website is far from perfect, I know that each time I complete a website or re-design, the better the next one will be.
Complete Walk Through Mobile
Brett Monson is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to the final iBooks project in the DGM 270R I&II course and is representative of the skills learned.
