By: Robert Kozak
As a software designer, I spend a lot of time thinking about visual design and the usability of a product. There are so many things to consider. Do these colors work well on the screen? Are there too many colors? Are things in the right place, easy to see and feel natural? As a user, would I use this product? Is it intuitive? Does it make sense?
Those are a very small subset of the questions that go through my mind all the time. Some of it comes naturally after 20 years experience and some takes more work and thought. As a user of web sites, numerous phone apps and computer software, I bet you have a feeling of what feels good and what doesn’t even if you can’t explain it. The idea for great visual design is to merge the feel of the design with actual design principles to produce an esthetically pleasing result.
Let’s take a look at our DealerCenter application for the iPhone and start with the login screen. This is the first thing you will see when you start the app and so it has to do 2 things: Introduce you to the app experience and to provide the functionality to login into DealerCenter. Notice the background is a pleasing light brown cloud or smoke that is very complimentary with the blue color used in the Title bar and the Login button. This is the feel.
The functionality is minimal and effective. User Name and Password fields are Bolded with a large, easy to hit Login Button. Notice also the descriptive text under the Password that is a little lighter in color so it won’t be overwhelming but still is there as a guide.
You will notice that all the lines in this screen are very soft. They are light and seem to fade into the background and almost disappear. A great visual design doesn’t just pop in your face; it fades into almost nothing so it is something you feel more than you see.
Let’s take a look at how a screen can evolve from an earlier version to the current screen we have in the product now. Below is an example of one of the earlier versions of the main Vehicle Inventory List screen.
Although not bad and the colors mostly work, it is a little too much. The background is too noisy, the lines separating the vehicles are too strong and the color of the Cost Price and the Days in Stock are red and too close together.
Take a look at the current updated screen.
Notice that the background is the same as the previous Login screen so it is consistent. Since it is not so noisy, the text stands out more and is much clearer. The separator lines are very soft and almost fade out completely. But it is enough to do their jobs, which is to separate one vehicle from the other. The stock number is a light blue color that is different from but complimentary with the Days in Stock number. As you can see, it is an improvement over the previous version of the screen.
That was just a small example of the thoughts that went into the design. There are so many little decisions involved in designing that I cannot possibly cover them all here, but I wanted to give you an idea. At Nowcom Corporation, we think about design and usability from the very beginning and constantly improve with each iteration of the product. With this philosophy, we manage to merge the look and the feel with a great experience.
I’ll finish up by showing you two versions of the Vehicle Detail screen. I won’t bother explaining the differences because I think they would be fairly obvious to you by now.
DealerCenter 