Used to be, back when I started out as a young web developer, I would hear words like “flow and pop” used in reference to website design and I would literally cringe. But over the years and multiple projects later I have come to understand the native language of the average netizen and prospective website owner. As a Project Manager, I have to understand that the dreaded "flow and pop" lingo is not going anywhere and that translated properly it can reveal many valuable insights into my clients' expectations. But essentially, understanding and creating pop and flow is the difference between having your uncle that “knows how to make websites” make your site for you and going to an experienced web design and development company. Here are some translations to better explain…

Can you make my website pop?

Translation: When used in this general context a client is most likely referring to the broader fundamental layout of the site -- appropriate alignment and spacing. And if not thats a good place to start, using proper typographical techniques like using CSS style sheets and applying Anti-Aliasing to text to minimize distortion can give that polished look commonly associated with pop. Another commonly overlooked but very important consideration is site width. Containing the site properly can have a lot to do with how it will appear to pop. Sites are commonly developed at 1024px now a days to accommodate newer wide screen monitors. See my other article here concerning site width.

Can you make the images/graphics pop?

Translation: When in reference to images or graphics “popping” we use subtle drop shadows usually in combination with gradients and stroked borders. Something that really makes a difference in making a website pop is the use of 1 pixel stroked borders and lines. Using a stroked border can really add that extra crispness to a design as it gives some extra contrast to the surrounding elements and gives the design needed depth. Another huge factor in web design is the quality of your icons, images and photos. They are usually quite prominent so proper care should be taken to assure they are of the best quality. The amount  of color balance, sharpness and contrast should be in harmony with the rest of the site.

Can you make our website flow?

Translation: When used in this general context clients are usually referring to a broader human interaction factor. The GUI or graphical user interface should be prominent, intuitive and easy to read. Many Web Developers have adopted the tabbed navigation approach for their main navigation menu. Tabbed navigation is a menu that looks like each item is a tab on a file folder, with the active tab connected to the body of the page. Tabbed navigation isn’t just eye candy, it provides a usability benefit. Also, to communicate navigation options in a more effective way, designers often make use of appealing icons. In such cases it’s important to make sure that the icon is easily recognizable, clearly conveys the message, corresponds to the link it stands for and isn’t too small or ambiguous.

My content just doesn’t flow right. Can you help?

Translation: When used in this manner clients are usually referring to what we call hierarchy and call to action. What’s the first thing someone does when they visit your site? Is there a clear hierarchy of what to do first? Is the purpose of the website clearly evident? A call to action would be a like a “Buy Here” button or “Click Here For Pricing” that creates an appeal to further action from the site visitor. Proper consideration and thought should be put into color, size and position of calls to action. This combined with a clear navigatin flow and hierarchy will drastically increase the flow of your site's information. When in doubt, remember less is always more. 

So, the next time you set out to design a website or have a website designed for you,  ask these questions:

• Are the basic fundamentals in place?
• Can I make improvements in my alignment or spacing?
• Has the appropriate anti-aliasing been used?
• Have I sharpened my images or text with strokes or borders?
• Can I create extra depth to my page by using gradients or drop shadows?
• Is there a clear hierarchy with an appropriate call to action?
• Are all image colors corrected, balanced and sharpened?
• Are there any elements you can remove, fix, replace, move, change or edit?
• Does any one element draw too much attention?
• Are there too many colors in general?
• Is there aesthetic consistency?
• Am I effectively using the white space?