Having looked around at a great many very professional-looking websites and having an eye for detail, I’ve noticed very common techniques used in professional web design. First, as a important note: professional does not equate to a good appearance. I’ve seen too many websites that were obviously made by professionals and were complete crap: they neither looked good nor were they functional / easy to navigate and use. Nevertheless, somehow they still pass as being “professional”, despite the frustration users must have when working with them. In this post, I’m going to outline the common characteristics of professional-looking websites – what gives them that special gloss that amateur web designers are probably jealous of – and at the same time offer some advice for those of us using free tools (Gimp and Inkscape) instead of Photoshop. A few of the primary aspects are as follows, the use of:
- Light play
- Rounded edges
Although it isn’t found on every professional website, you’ll notice that a touch of transparency in the website elements (buttons, menu bars, and anything else on the page that isn’t text) can add a cool effect to even very boring pages.
Suppose you want to have a background image on your website. If you want that background to show up even in areas of heavy text, all you need is a semi-transparent layer above the image and where the text resides. A tiny semi-transparent square (preferably black or white – depending on the text color – because it makes the text more readable). Use a Portable Network Graphics image (png) to do this. It’s size could even be 1×1 – just set it as the background image for the division where your text will be.
They are EVERYWHERE. If you look at ANY professional site, you’ll see at least one gradient, probably more. (A gradient is basically a gradual change in color.) Professional gradients are usually very subtle, but if you pay attention, you’ll find many soft, simple gradients in various elements. Try looking along the bottom of a menu bar.
While not used a frequently as gradients, a great deal of professional work utilizes lens flare and light reflection off of elements. The latter is usually the case for buttons since it gives them a semi-3D appearance.
For Gimp users, create a new layer and add a white round shape (or even just a circle) or star (you’ll probably need to make one with blurred edges, but this is easy to do by messing with the paint-brush creator tool) to your elements and then mess with the opacity of the layer. You might be surprised by the results.
As a side note, buttons with lighting effects are much easier to make in Gimp than Inkscape, despite how inkscape makes it so easy to mess with the gradients. It’s probably because Inkscape is too perfect (being a vector-graphics-using program). Hence, Inkscape is better for larger elements than need only soft gradients or gradients that change multiple times over a specific region.
A very thin border goes a LONG way in making things look professional. Nothing fancy is needed, just as long as the color of the border goes a long well with the main color of the element the border is to go around. By border, I don’t mean the outline that HTML allows you to add to divisions. I’m talking about a very thin border that defines the edge of anything from a button to the scroll bar on the side of your browser (have a look: it’s that thin dark gray line).
Highlighting, drop-shadows, and the like fit into this category since they draw out the text by defining its edging. This is especially important when you have text of a similar color as the background.
Rounding edges makes things so much softer. However, it doesn’t have to be done for certain simplistic pages. Nevertheless, loose or free-floating buttons on a page should be rounded.
For Inkscape and Gimp users – It’s nice combining the strengths of these two programs to your advantage. While most buttons can be simply pills, if you’re looking for a fancy-shaped but smooth-edged button, make the shape in Inkscape and import it into Gimp.
This is both a blessing and a curse to modern web design. Some people think that if you make a page simple, it makes it easier for people to navigate the page. This isn’t necessarily true since many times they end up creating a horrible layout or having things like boring, needless news feeds (honestly, does anyone read those things?) where they should have the main body of text / main content of the page. Second of all, simple pages can be just plain boring. Notably, we must separate simplicity of layout with simplicity of overall design. A website can still look beautiful if simple when the other mentioned aspects are utilized.
Note too that with simplicity of background colors, there is usually no border between changing colors. In other words, they are standalone and relay entirely on the rest of the content to carry the professional appearance, even if the subtle texture background-imagery was used.
Maybe three or four smooth icons are grouped anywhere on a page. They are used frequently for headings and bullet points or bar-less menu items, but almost never within text bodies and only occasionally in bar-menus. They are simple, colorful, and may utilize both transparency and gradients. Nevertheless, they fit in their own category because they are such a distinct feature.
Now that I’ve given you all these characteristics of professional-looking websites, have a look at this website by Lukezz for vipcomp.net that the demonstrates their usage:
Even if you don’t like the layout itself or find the site very useful in practice, it nevertheless carries that professional appearance.
Like it? Don’t like it? Let me hear your thoughts. I’m certainly no fan of the professional appearance in practice even if in theory it sounds good. Correcting myself, I have seen some very impressive websites with a professional appearance. The biggest problem is good layout – something critically important to web design and yet NOT characteristic of most professional websites I’ve encountered.