Web marketing & development company

Even though the home page on any well designed website is usually the highlight of the site, its purpose is actually somewhat martyr-istic.

Think of it like a handshake. You can really get a good idea of a person based solely on their handshake. The 3 to 5 seconds your hands are clasped is all that is required to instill an impression of them, whether good or bad. After that, the handshake severely looses its purpose and is overtaken by the wave, the two-finger salute, and other welcoming hand gestures.

It is the same for the home page. It exists to create an instantaneous appealing impression onto your brain so that you are inclined to explore more of the site. Its generosity to its fellow pages is admirable, because once you take one step deeper into the site, the home page dies a little.

Basically, all that is showcased on the home page is reiterated in greater detail throughout the rest of the site. It is a collection of the best of what the site has to offer in a small and streamlined space. In other words, it’s a teaser of more good stuff to come.

With today’s technological proliferation in many aspects of our daily lives, we can see a degeneration of our work ethic, creativity, and plain motivation. Now that we have computers and phones doing every nuance of our bidding, we’ve become, in a word, lazy.

As a day-to-day schmoe, this didn’t come to me as much of a shock, but as a designer this means that the very tools I use to create may actually be sapping the juice out of my imagination.

I realized all this when I stumbled upon an article called “The Dying Art of Design” from Smashing Magazine, which infers that modern designers rely too heavily on built-in program tools and effects, online freebies, and inspiration lists that what they end up designing becomes so diluted and generic due to the massive and immediate information transfer of the Internet. Trends spring up and designers pounce on them to gobble the best and brightest of visual elements until newer, cooler trends emerge.

This grabby reflex is most evident in web design, where the life or death of a website depends on the tenth of a second synapse snap from an online user. The site needs to be the latest and trendiest in order for it to survive for the next couple of years. It seems that the only easy solution is to just regurgitate the same trendy design over and over with some color changes here and a few slight variations there. As a web designer, this hurts. It makes it very difficult to avoid and overcome the parrot-follower bottleneck on the highway of good design. I admit that I have recognized some of this in my own work process, but many times projects end up creating themselves (eventually) with a guiding hand from myself. I see these trends and try to reach for something further. I want to create designs that shine through all the gunk in a Google search.

I know I’ve written about all these ideals, but I am still implementing them myself. My head buzzes with “Do this” and “Don’t do that” and “Try it this way”. I must keep in mind the client's needs, make sure the website looks amazing and functions well, rephrase this sentence so that they don’t misunderstand, explain why they should want ‘this’ instead of ‘that’, think Positive! Positive! Positive!

Despite this mantra talk, the most important standard that I’m still training myself to uphold is confidence in my ingenuity. I know I’m a great designer and I love my job, but after so many nit-picky criticisms from clients, however constructive, I noticed that I began to limit myself, decreasing the imagination and experimentation of my designs, unconsciously thinking that because they weren’t used before, they won’t be used in the future. Very wrong.

An essential part of being a successful designer is to lean so close the edge of trends that you’re always on the cusp of innovation, always one step ahead. I was sticking too close to the client's expectations instead of testing the limits and pushing the envelop of design. Sometimes I would even build a tentative template with wild and crazy designs just to get it out of my system, then hide it away before I began working on the real template. I forgot that usually the client has unclear or unspecific ideas about what they want and that it’s up to me to present to them all the limitless possibilities that their website can go towards. If the initial design you present is too experimental for them, then make something else that is more traditional. Don’t reject it before even allowing the client the chance to decide if they like it or not. It’s always better to have too much than not enough.

This has been a growing process for me. I started out as a green graphic designer, mostly working in print and harboring very little experience with web development. I learned quickly, bit by bit, eventually establishing myself as a talented designer. And although I continued to expand my knowledge of the field, I seemed to have peaked, my projects quietly plateaued, neither rising nor falling. The change was so steady that I hardly noticed it. I did finally notice however, and after practicing everything that I’ve written so far, I was able to step back, as if viewing the larger picture and confidently return to my original goal: design great, innovative websites. And now I’ll get back to it, ever rising.

Being a graphic/web designer for a small, cozy firm is miraculous, awesome and sometimes a little bit daunting. When we get a new client and the contracts are approved, everything comes down to me and the following obstacles: What is the new site going to look like? How will the content be organized for maximum clarity and usability? How will it function? What will it say? How will visitors respond?

Now, I do not have the final say in many of these aspects, but they all hinge on how I decide to design the site. Because I’m the design expert, and the client hired us—and me—to create a new website that encompasses everything they do, I am required to uphold their trust and prove to them that we can do what they want. Their first bit of investment is presented through me with the designs I create for them.

See what I mean about the ‘daunting’ part?

However, I am only one person, and if a client is unsatisfied with my designs, the company will not plummet headfast into Purgatory. On the contrary, by learning what the client doesn’t like, I am more able to produce something that they do like. Like the old adage says: “If at first you don’t succeed, try, try again.” And again and again.

Like all growing businesses, improvement and efficiency is absolutely necessary for a company to succeed into the future. And it is especially important with today’s economic trends.

As part of a growing web development business, I have recently been bombarded with advice, recommendations and solutions to help improve my processes and interactions with clients when it comes to designing websites. This may seem like I’ve done things all wrong before, but it’s not true (I promise). In order to grow we must learn, which is what I’ve been doing in abundance.

Coincidentally, I came across an interesting but perfect resource, a book called “A Fortune to Share” by Vash Young. Published in 1931, “A Fortune to Share” recounts the mental and emotional trials of a young insurance salesman trying to make a living during the disastrous Great Depression and the grand fortune he came to inherit. This wealth that he unexpectedly comes into is not money or gold or jewels, but a treasure that multiplies the more you divide it and give it away. It is optimism, courage, dominion over business worries, patience, generosity, sincerity and most of all, honesty.

Even though this book was published two generations before my own, Mr. Young’s ideas still ring true. By focusing on the negative, you will receive only the negative. It will get you nowhere, it won’t make you rich, it won’t make you successful in business. Instead, think of change and evaluation as an opportunity to improve and grow. I’ve always found it exciting, refreshing, energizing to continuously learn and try to make things better and flow smoothly.

I didn’t realize how difficult it would be to draw realistic-looking clouds in Photoshop. I didn’t want to just slap on a picture of some heavenly fluffiness and have to mess with cutting, pasting and arranging layer upon layer of duplicated images. Neither did I want to make Mickey Mouse cartoon clouds that any preschooler could scribble up. I wanted to create something from scratch and have it look simple, believable and fresh.

So I did some digging and got lucky. I found this wonderful blog on, you guessed it, making realistic clouds in Photoshop. I’ll go ahead and say thank you to Abduzeedo: Abducted by Design and their help. They’ve made it super simple. Here’s the link: Beautiful Fluffy Clouds in Photoshop – Christmas Tutorial. It was exactly what I was looking for, so if you’re looking for something like this, then hopefully I’ve shortened your search. Just in time for the holidays, too! I’ll only briefly go over the main parts and let you read the blog and follow to your hearts content.

There has been an enormously popular trend going around throughout websites, and design in general, but it’s mostly hoarded by Apple. The effect is the reflection, as if the object or image undergoing the effect is sitting upon a sheet of glass or any shiny surface. As I said, this is extremely popular so my little tutorial on how to reproduce it may seem (un)fashionably late. But honestly, I’ve only just learned it myself, so I’m going to share it with whoever wants to know.

First off, open a blank document in Photoshop, whatever size you want. Choose the image you would like to reflect and place or copy/paste it into a new layer of the document. It’s good to leave more room beneath the image than above it so that you get a good amount of reflection showing. Next, duplicate the image so that you have two of the same thing. (Three ways to duplicate: (1) drag the layer thumbnail to the new layers button at the bottom of the layers panel; (2) select the layer, select the move tool and hold down the ALT key while you drag the actual image across; (3) right click or control click on the layer thumbnail, select “Duplicate” and select the document you are in currently.)

I had an art project once to make a sculpture out a rectangular block of plaster molded from a milk carton. I had to be somewhat delicate with it to make sure it didn’t break into a million pieces, which is mostly the reason why the sculpture retained some of its blockiness. In the end, it had a good, interesting design, but you could still follow the lines around it and decipher its original form.

Now, my forte is not sculpting obviously, but the same principle can be applied to web design. You start out with a blank document and fill things in bit by bit, usually according to a grid. By the way, I recommend using the web-safe 960-pixel grid. Here’s a good article with instructions on how to build one in Photoshop: Web 2.0 Style Web Design. (If you follow this and come out with a grid only 940 pixels wide, no worries; there is a 10-pixel margin on either side.)

Okay, so now you have your basic but completely grid-ridden webpage, trapped in its milk carton block. How can you break out of it? One word: Expand. You don’t have to necessarily ignore the lines of your grid, but just allow yourself a lot of extra space to expand beyond the lines with dynamic graphics. Next, modify any elements you feel need to be accentuated. This usually pertains to the top of the webpage, since that is the essence of style that creates the foundation of the design for the rest of the site. I’ve included a few recycled examples so you have some clue as to what I’m talking about.

OYPRO is a commercial real estate business, but as you can see, its website is far from the usually boring real estate stereotype. It’s because of their creative use of the ‘earth-comet’ graphic that flows across the top of the page, diving over and under the other grid-savvy elements. Just this one interesting graphic pushed the creativity and uniqueness of the site up a notch.

One of an artist’s greatest fears is a white canvas. It’s the ubiquitous blank page for a writer, and the stark empty template for a web designer. The whiteness glares at you, forcing you to cover it all up with images, text, links, buttons, menus, miscellaneous boxes and whatever else. Before you know it, the canvas has become cluttered, the page now beyond usable function. What seems hard to fathom is that the nightmarish white emptiness is actually a good thing. It is the bright defender of user functionality, the shining champion of clean layout formatting. Let Dr. Negative Space rescue you.

Here’s an example of what I mean. Say you have opened an ominous blank document, containing nothing but white. Then you place your logo smack in the middle. And. . . stop! That’s it. That’s how it works. The lack of any other objects within range of that single element creates an undisputed focus on the element. Simple, huh? Negative space is any bit of space that is NOT occupied by other stuff, or positive space. Of course, this process gets a little more complex with the more elements you include. You can refer to Using White Space Effectively in Web Design for further understanding. It’s a good info source I stumbled upon that gives simple, clear explanations and examples dealing with negative space.

Accentuating and accepting white space can be hard to get used to. It dwells within minimalistic perspectives. Sorry to burst your bubble all you packrats and space saturation-ists, but this is where popular web design is thriving. The objective you must attain lies with your skills of organization. You know, like cleaning your place for company, and no leaving junk hidden under the bed. Refrain from redundancy or unnecessary repetition. Efficient functionality always trumps beauty, but it’s the smart designers who can achieve both. This requires employing only the absolutely necessary elements and content for each page, especially that of the homepage. Things like the logo/title and tagline, the main navigation system, and the basic product information and/or objectives classifying your site.

So what you can do is work from zero. Like in the example, you can start off by opening a blank document, then slowly and carefully add in the necessary elements. Maybe the logo can go in the top left corner, or it can be centered. The tagline can go anywhere around that. Try separating your content information into lists of a sort, with short blurbs about what each section is about. Drop in some photos so that your viewers can get a preview right from the beginning. Just use negative space to your advantage. The more of it you do use, the cleaner and simpler your site will look. If you don’t want clean and simple, then just ignore everything I’ve said.

So far, I’ve been blabbing about very general and hopefully commonsensical aspects of web design. This time I’m going to get a little more specific, talking about some finer details.

I mentioned before that a couple major rules to follow are to keep things consistent and to focus on busting out some quality details. This is the foundation to every good website.

The trends spreading throughout the Internet now circle around subtle 3D effects, like adding shadows and highlights. Some of the easiest things you can do to capture these effects for yourself is to add drop shadows and gradients. Keeping it simple is usually the way to go. So no cosmic eclipsing of drop shadows--keep the numbers in single digits.

For gradients, you can add both shadows and highlights in one object, but a dark gradient is guaranteed to work. Just remember to keep things soft and subtle (unless you’re building a hardcore, contrasty site that is devoid of anything soft). Creating a hazy halo effect is always good, usually in a header bar. It accents the very essence of your site, by accentuating your title or logo. Like giving off an awesome first impression.