This happens to be extremely important in aging websites. As a website progresses in its life, its owners often request things to be modified and changed. Perhaps a new image added to that page, and another bullet point to the frequent asked questions page, or to create another page, etc. This is certainly not uncommon. But what happens is that the design itself starts to look like a Frankenstein and its look goes BAD.

So here are some tips to prevent those things from happening:

Tips:

Protected Content

You need to register (FREE) or if you have already registered, be logged in to see this part of the post. Please Login here. If you haven't registered, you may register using the form below:

Username

E-mail

First Name

Last Name

Subscription Introduction

Thank you for your interest in registering with Merkados' Intermarketing Digital Media Resources & Strategy Information. In order to access some of our premium content and downloads you are required to provide your personal name and valid e-mail account. This information is only used by Merkados to send occasional information about additional digital media products, services and resources that may benefit you. We will never sell or share your information with anybody - ever.

Subscription Options

Free - 0.00 USD per 1 month - Ongoing

Free Account - This account grants you access to all of our protected content - only for subscribers. This Free Account is for a limited time only. This account is activated monthly and it will automatically renew (for free) at the end of every month. You may decide to upgrade or cancel at any time.

  I would like to receive Updates.

Captcha

Log in | Lost your password

1. Your website must focus on capturing email addresses

2. Stuffing your home page with way too much information

3. Loading the site with slow-loading graphics (more about this can be read at Mr. Nielsen’s usability website)
4. No attempt to discern what the prospect wants

And the next four common web design mistakes related to online business are:

5. No invitation to converting. Many websites have everything in place, good design, good colors, amazing corporate image and great content. But when it comes to inviting their visitors to perform an action they fail miserably. Often I see multitudes of designs out there without contact information in every page and sometimes after reading all the content you believe that you were being informed of their products and services and not being invited to purchase from them. Determine if your website is informational, interactional or transactional. If you are after lead generation then make sure that you prepare the channels and the design to capture leads.

6. Follow trends because they are trends and not because they are useful. With Web 2.0 we are starting to see how many websites have a clean look, better navigation and better inter-browser support. Sometimes though, website owners include elements just because they are being used in their competitors website or because they thought they were cool.

Examples of this awful practice is the use of blinking text to attract attention, or the use of sound and music in Flash without the possibility of stopping it! Be careful to include only elements of design that would improve your audience experience. Also, never use sound in your site unless it is user-initiated.

7. “Let’s make some space”. The mistake of pushing the limits of the home page because we have new products and we have new banners and we have new… STOP! Instead of including new elements in your home page remove something in order to add something and always plan ahead your space.

Many websites decide that they want to include advertising banners, flash images, extra links, new headings and many other things that don’t fit into their initial conception. The recommendation is that if you find that you need new elements then redesign your site. If redesigning sounds unnecessary then those elements are probably not crucial. Adding some things here and there is ok, the problem is when your next big idea of the day ends up in the footer of your homepage.

8. The “I don’t like it mistake”. This mistake is the biggest and most often mistake in my opinion. If you don’t like your design that doesn’t necessarily mean that your web site will not appeal to your audience. When you are tempted to say to your web designer: “I don’t like it”, think for a second who is going to buy from this website? and think if they would like it.

This is specially important for “generation X business owners”. Generation X kids like video games, skateboarding, X Games, surfing and what not, but the owners of the business that sell products for this audience have difficulty to separate their own preferences with their audience preferences. The best way to avoid this mistake is to proof read your design with members of your intended audience.

For more information about web design and internet marketing make sure to visit: www.merkados.us or www.merkados.com

Day 1. In the morning: Have a cup of coffee and a bagel with creme cheese. Ok, ready with that? Perfect. Now go ahead and sit back for 1 hour and take in this introductory video. It starts by telling you the very basics of jQuery:

After watching the previous video you should have a good understanding of how jquery works and what it does. Next is to start to practice with selections. So go ahead and create an html document with at least one div with an ID. Then make sure that you can select the div by id and that you can perform a method on it, perhaps animate it. That is it. Once you have the $().something(); clear in your mind the it is time to move on.

2. Go ahead and take a look at using Jquery with AJAX. Ajax is one of the most exciting technologies of the WEB2.0 wave. Don’t reload your pages when all you want is to refresh one element: use AJAX!

Alright, awesome. Now that you have an introduction of AJAX and the load method, it is time to practice. To practice with the load method do the following:

1. Create an xhtml file with some content in it.

2. Create a second xhtml file with an unordered list that contains li elements.

3. Now make a call using the load method from the first html. Load the elements in your main html. Now make the document.ready.

That is it.

I don’t know what the guys at Adobe are eating but I want some of that! The physics engine in Flash CS5 is just ridiculously awesome. One click here and one click there and you have animated behavior with gravity, pull, mass calculations and a lot more. This is insane. Flash is becoming such a powerful tool that web designers won’t be able to ignore it for too long.

In today’s world, web designers are mostly thinking in terms of graphic design for the web. In other words, they use shapes, type, space and other elements to create a compelling and beautiful interface. The times are changing and they are changing fast. Interactive websites are here to stay. And I am not talking about the old “move everything in the page” kind of deal. The real interactive web is here. Broadband has made it possible.

Many things have to change in the next 2 years. I am sure Flash is going to be used a lot more. However at the same time I see the problems that Apple is having to adopt it in its iPhone.

Priority number one for Flash guys is to get Flash to the iPhone. No matter the cost. EVEN IF IT IS FREE! Why? Well, why wouldn’t Apple want to create a similar application that is native? Honestly with all the knowledge they have from Motion? I would say, priority number one is get Flash to the iPhone sooner rather than later. Otherwise you risk too much market share in the future.

Well, kind of. One thing I have noticed as a trend is that companies using this services are coming up with an outrageous number of requirements to hire. You may think that is because of the bad economy, but I don’t think so. I think is more a matter of not wanting the job listing to look empty or un-professional.

In any case, the reason behind is not so important. The real problem is what they are causing in the minds of talented web designers and developers out there.

Take a quick look at this snippet:

- 4 Year Degree in IT

Required Skills and Experience

• .Net
• C#, C++
• Drupal
• Photoshop
• Flash
• Illustrator
• HTML
• PHP
  
• JavaScript
  
• Linux
  
• MySQL

All I have to say is wow. First of all: .Net is a Microsoft based platform (which is not free). PHP is a similar platform (which is open source, in other words is free). C# and C++ are two separate high level derivatives of C which use compiling and runtime. Drupal is an Open Source content management system based on php. Drupal is primarily seen as a CMS of preference for social-type websites. Photoshop is obviously the weapon of choice for website design, color correction image manipulation and Raster-based content. Flash is the world of interactivity and animation for both the desktop (AIR) and online. Illustrator is the most powerful vector-based application there is (as opposed to raster). HTML is full online markup language. PHP is the most well known server scripting language for building dynamic websites. Javascript is a client-based scripting language  as opposed to the server-side of PHP. Linux is the operating system that runs in most web servers in the world, however it doesn’t run Photoshop, Illustrator or Flash as applications. Finally MYSQL for database storage.

In the notes section they state this:

At least 3 years of interactive (front-end and back-end) experience.
HTML; JavaScript; Linux; mySQL; PHP; XHTML; XML

On top of all this please make sure that you completed a 4 year degree in IT.

And finally, they top it with this sentence:

Experience with 3D apps, video editing and/or sound design, a PLUS!!!!

A Plus? Are you kidding? Getting an expert in half of the requirements is a plus. Getting an expert in all these things and on top of that having video and sound design experience is not a PLUS.

Why am I fired up? Well, I take this as an insult to our profession. Imagine what would happen if a hospital wanted to hire only doctors that are experts in oncology, brain surgery, heart surgery, microsurgery and if you can also do Eye surgery then is a PLUS!

The moral of this post is this: As a designer, don’t feel bad about this kind of job postings. Believe me, I have spend much of my life learning on a PC, LINUX and a MAC how to design in Photoshop, Illustrator, Flash, InDesign, Fireworks and others, how to code in TextMate, Dreamweaver, Coda and others. How to Build in XHTML, CSS, PHP, Javascript, Jquery, Mootols, XML and others. How to program in C, Objective-C (for the iPhone and MAC OS X). How to port to Drupal, Joomla, WordPress and others. I have plenty of experience with sound recording, mixing, editing and mastering. I have experience in Video recording in both SD and HD and I also read constantly about Digital Photography and HDR.  I have my bachelors (4 year schooling) and I have a masters in business. All this time I have spent in this and when I see this kind of posting I feel the same way that people with less background do.

Don’t feel bad when you see a post like that. Feel good. Make sure that you don’t apply for a position like that. Why? Because the company that has the audacity to request that from you is also going to request more than what they can afford. They will force you into surrendering your free time, the one they don’t pay for. They will take away your self-esteem as a designer and they will take your creative kid away.

When you see a job posting like that, look at it and then walk away knowing that thankfully you saw their true colors before you stepped into their office. I don’t really know why they don’t ask you to run 100meters under 10seconds too. They probably should.

Be happy and creative, until next time…

Alex_ @ merkados

Obviously, the reasoning behind design is a very large topic and can’t be covered completely here. But this should be taken as an introduction to meaningful design.

White Space

Design usually is associated with several elements like shape/type, size, placement, etc. One of the most important decisions for a designer is white space. Many designers have a lot of trouble not filling up the canvas. Why? Well, I guess some feel that if the canvas is not full that the client is going to think that they are lazy. And this is true sometimes. However, is harder for a designer to abstain from adding more and more.

The main question that I try to answer in regards to white space is: Is this the most minimal way of powerfully presenting the idea?

Lets take a look at an example:

I am trying to illustrate the word Design in a white square.

First Example

So far so good. It looks good and it seems like indeed is minimal enough however I feel like the white space itself is not adding to the design. So lets go ahead and iterate in order to modify the white-space:

Example 2

Can you tell what changed from example 1? First, the right margin length is equal to the height of the font. That gives the sense of order and purpose for that margin. Second, the bottom margin is equal to double the distance of the right margin. This creates a point of interest while keeping it organized. Finally, the spacing between characters of the word Design (the kerning) has been adjusted to make the word appear more as a cluster – an object. Now, we have a background and a subject that are clearly defined and separated and they have a relationship.

To finalize this example I decided to replicate the overall white-space shape, invert it and add it to the corner of the word Design to add balance to the message.

Example 3

Now, in this example we have very little background to make design decisions. But in real life examples, as a graphic designer, you would have a client that has a market to satisfy and a product to sale. That should strongly drive your design decisions.

Final thoughts: How can this translate into an active recommendation that makes your design better? Ok, next time that you sit down to layout ask the final question about your white space and how it is adding to your design and if it could do a better job.

I hope this helps and thanks for reading.

Alex Centeno +

TIP 1. Use Color, Position, Distance and Alignment to portrait importance. In figure number one, you can see how the designer decided to use 3 different colors in one paragraph of text! The white color automatically gets less importance, the yellow text gets a nice accent and then finally the call to action is found in red (which is an excellent color for action).

Use of Color to denote difference.

TIP 2. Mantain your number of hues to a minimum. The more color that you use the more time a common user would take to decipher what is important. In order to improve usability you want to color code your actions in a way that becomes automatically intuitive to do something. For the most I would say use 3 hues, then you can add another 3 shades or 3 lights to those shades. My favorite is to keep websites to almost a monochromatic scheme and then create accents with a split complementary or even a complementary hue. Unfortunately as I progress towards finishing the design, I end up adding other hues; I have to force myself to change extra hues for shades of the same hue.

Example of a website using a limited amount of hues.

TIP 3. If you decide to go with sharp angles then go with sharp angles. If you go with rounded corners then be consistent as well. As part of the WEB 2.0 trends we have seen lots and lots of design that use rounded corners. If used properly, rounded corners look really good and make design look softer and more inviting. Unfortunately the entire experience can be thrown to the trash can with just one thing: inconsistency. The secret really is not so much having rounded corners, the secret is to maintain those treatments across the different sections of the design. As a counter-example check out image number 3. This designer decided to only use sharp angles (including the pictures). That makes the design so powerful that it immediately makes a positive impression.

Example of designer using sharp angles with consistency

That is it! I hope you guys enjoy this tutorial and really hope that it helps improve your design and gives you at least another point of view.

Until next time,

Alex A. Centeno MBA.

Digital Media Director

Merkados™