KISS – Keep It Simple Stupid – Designing the Layout

I recently created a very-simplistic, yet highly effective and attractive website layout I called “KISS” or “Keep It Simple”.  Though the layout focused on a literal “kiss” theme, in this article you should be able to find colors that best suite your goals and images that compliment those colors and goals.  My first goal, of course, was attractiveness.  I did not want this, the home page, to be cluttered.  Furthermore, I wanted a good deal of content to be centered “above the fold”.  The fold is the bottom of the visible portion of a page you see when the page is first loaded.  This is where you attract your visitors.  You’re goal should not be to load up your home page with tons of content, most of which won’t even be visible without scrolling.  You’re goal should be to present the user with enough information immediately to allow them to WANT to dig deeper into your site.  The best way to do this is by presenting at least two pieces of content (maybe three, but no more) above the fold.  And, of course, you want to present a navigation menu.  There are too many websites out there that place a large 300-pixel-wide by 800-pixel-wide image at the very top along with the website’s name…typically about 100 pixels tall and complete it with a navigation menu at best 50 pixels tall.  That’s 450 pixels of height you’ve done absolutely nothing with to promote your website.  Considering majority of the browsers have view windows 600 to 770 you’ve given away  pixels high you’ve given away over 50% of your most important space to unimportant information.

Furthermore, I wanted to do something a bit unique.  While this is certainly not pioneering the web industry, many sites focus on a standard header box with a two or three-column layout.  By using a gridding template (which I’ll explain soon), I find it easier to add a bit of flare to a website.  Thus, I decided to go with a presentation of well-formed elements that provided enough blank space as to not appear cluttered yet certainly give enough information for a user to want to go deeper.  At the same time, my hope was for a user to see this template, their first reaction would be a little bit of a “wow” factor; a difference.  And hopefully enough of one for them to want to stay on the page or navigate into rather than away.

This was the final result:

As I do when I start any website layout I opened up  a new 960 template in Photoshop and re-saved as a new template, renamed (in my case, Template – KISS).  960 is a gridding system hitting what was a largely undefined market of the designing industry.  You get two templates and CSS files to match.  The templates are divided into a 12-column template or a 16-column template.  They were created to make it easier to come up with uniform positioning throughout your website as well as making it easier to size and proportion various elements.  The CSS files, while they will not cover every CSS element you may need for your website, covers the basics and makes life much easier.  For the purposes of this article, I will be using the 16-column template.

When you open your template, you should see the following:

Before we continue, go to View > SnapTo > Guides and make sure it is checked.  This will make it easier when you start adding your various elements.

Next, I wanted to get a color tree to follow.  I always choose to go to Color Theory @ ColorJack.  When you find the base color you want to use, hover over the color with your arrow.  You should get a drop down menu of relational colors.  I chose to go with #8c0b0b, a maroon-like color, #14 on the Color Theory website.  My color-tree was:

I took a screenshot and copied these colors into a new layer of my PSD.

First, I unlocked my Background layer by double-clicking and giving it the name Background (default wants to use Layer 0).  Then I selected the brightest color (in my case, the off-white) and painted the background (Paint Bucket Tool – G).

Next I started with my borders.  I wanted to start with a little flair but keep it simple for my CSS.  I chose to do a gradient down the left and right side of the main body.  I created a new layer in “Layer 1″, named lft_gradient.  I couldn’t decide if I wanted my gradient to fade from white to maroon to white or if I wanted to fade white to maroon with a sharp end.  Because of which, I created both.

I hit X to switch my background and foreground colors.  With lft_gradient layer highlighted, I selected my Eyedropper Tool (I) and clicked on the maroon color in my color-tree.  Next, I use my Rectangular Marquee Tool (M) and draw a marquee from 0,0 to 30,660 (x,y axis).  You should notice your marquee snaps to the first gridline located on x-30.  660 is the height of my template, thus the highest y achievable.  Yours may be longer or shorter.  Just make sure you select all of the left border in the first grid.

Then I hit G for the Gradient Tool (or Shift G to change from Paint Bucket to Gradient).  Using a Linear Gradient, I selected my gradient and put my off-white at Location 0% and my maroon at Location 100%.  I also put in an Opacity Stop at Location 0% with an Opacity of 0%.  I added another Stop at Location 100% with an Opacity of 100%.  This gives me a nice fade from my off-white to a hard maroon and an abrupt stop.  then, using my Gradient Tool and holding the Shift key (to keep a straight line) I went along the x-axis from 0 to 30 (the first grid-line) inside my marquee.  Release and you have a nice even gradient running the left side of your canvas.

If you like the gradient, skip this paragraph and proceed to the next.  I wasn’t so sure, so I created another layer, lft_gradient 2.  With my marquee still visible, I went back to the Gradient Tool and changed my Linear Gradient.  I moved my maroon color to a 50% Location Stop and moved the Opacity Stop at a Location of 50%.  Then I added a new stop on the right changing the color to my off-white and changing the Opacity to 0%.  This gave a fade from white to maroon back to white.  Changing the Opacity of the right stop doesn’t appear much in the long run since the background color is the same.  It does however present a smoother transition from the maroon to the white.  It’s all personal preference.

Next, I needed to do my right border.  For this, I simply duplicated my lft_gradient layer (and lft_gradient 2 if you created one) and renamed rght_gradient (and rght_gradient 2, respectively).  On each rght_gradient layer I used Ctrl T to get a Transform box.  I moved my registration point to the upper-right corner and changed my width setting from 100% to -100%.  You could also go to Edit > Transform > Flip Horizontal. Then I moved the gradient to the right-most grid (you should notice it snap into place).

You should now have a good border on both sides.  Group the gradient layers together, rename the group Borders and lock.

I can now proceed to create the header.  I choose to use a Verdana font.  I also want my header to be complete text (SEO-friendly).  For my website name (KISS), I retrieved my Text Tool (T) and drew a box in the upper-left at 40, 10.  I made the box large enough to fit the text I wanted.  I changed the font-color to #a79e8c, the greyish color of my color-tree (though I’ve considered changing it to the bluish color, #194e76).  I also chose a font-size of 48px.  Furthermore, I wanted to space my characters a little so I opened the Character Palette and adjusted my Horizontal Scaling to 100%.  Then I typed in my website’s name.  This name should seem to ride right along the 50px Y axis.  If you want to add a Guide, to to View > New Guide.  Select Horizontal and set your position at 50px.

Next I wanted to add a little slogan.  I added another Horizontal Guide at 60px and drew another text box at 40,60, about 30 pixels high.  I changed the font-size to 30 pixels and used my bluish color (if I had used my bluish color for the website name, I would have chosen the grayish color here.  Choose a good contrasting color).  Wtih my Horizontal Spacing still at 100%, I typed in my slogan, “(keep it simple, stupid)”.  I then grouped those two layers and named the group header_text.

Next, I wanted to add a logo in the upper-right.  I chose not to design one to save time so I went to Stock.xchng and, using the search phrace “kiss” found a drawing of lips.  I figured it’d work for now so I went ahead and copied the image and pasted onto a new layer, logo, and placed into the upper-right corner.  For this image, I had to do some alterations by first, getting rid of the white background, transforming the image to a decent size (280 pixels X 180 pixels) and getting rid of the gloss on the bottom lip which my girlfriend kindly informed they looked like buck teeth!  I find it easier to use the Transform Tool (Ctrl T) to correctly position elements.  I moved my Transform Box via the settings changing my registration point to the upper-right and setting my X at 980 pixels and Y at 10 pixels.  I locked the layer.

For the most part, at this point, my header was complete.  I still had some empty space and would decide later to add my search box here.  I created a new layer named search.  I selected my Rectangular Marquee Tool (M) and changed to a Fixed Size of 160 pixels X 20 pixels.  I placed my crosshairs at 500,40 so that the box would sit on top of my Y-60 pixel gridline I created earlier, and clicked to set the marquee.  Then I filled it with the tannish color (#c9b385) and added a black stroke of 1 pixel centered.  Next I grabbed my Text Tool (T), changed the forecolor to my blue (#194e76) and typed in search….  I positioned the Text element over the search box.  Then I linked both layers and locked.  Now I had filled up some empty space in the header.  Afterwards, I highlighted all of my header layers and grouped them with the name header.

I wanted to do the navigation menu a little bit differently than what you normally see on a website.  Studies show that users typically look at the left side of a web page first.  I wanted my main content to fill that area which left me the right side for my navigation.  This should not cause any issues as users will easily find it and will know where it is whenever they wish to access it.  At the same time I’m also keeping it above the fold and encouraging them to navigate deeper.

Because I did not want the navigation menu to take focus away from the main content, I chose to use simple text, 14 pixels.  I also chose the maroon color so that it would stand out against the background and be immediately visible though you could also use the blue.

In keeping with the off-balance appearance of the theme, I wanted to zig zag the menu items.  By doing so I can use up more white space and at the same time still avoid the “cluttered” look.  In addition, by not making them so tightly packed together I take away the “accidental click” of the wrong link which we all have done at one point or another.   It provides an easy experience for the user.

I added new guides at the following Y-positions:  240, 265, 290, 315, 340 and 365.  I chose to align my left-most menus on X 680 and on Y’s 240, 290 and 340.  My right-most menus I aligned on X 860 and on Y’s 265, 315 and 365.  If you wanted to add one or two more navigation menus you could bump the Y numbers down by 25 pixels and fit two more menus on the bottom.

Next, I went to the main content division.  Iwanted to center my main content within the top third of the view window (600 pixels to 770 pixels for the majority of browsers).  I wanted it to gain focus, but not be “busy”.  I decided to use a simple box with a maroon stroke of 2 pixel centered via the Layer Styles dialog.  I made my main content box, on the layer main content, 430 pixels wide by 300 pixels tall.  For my main content header text, I chose the blue font-color and a font-size of 30 pixels and moved the text to 10,10 inside the main content box.  For the content itself, I chose the same settings only with a font-size of 14 pixels which should make the article easily readable.

For my secondary content box I wanted to still maintain simplicity but make it stand out a bit from the main content.  For this I created a rectangular marquee with a rounded border of 5 pixels and placed 20 pixels below the main content box.  I created a new layer named background_what_else (since the title of this article was “What else is new?”).  I used my Paint Bucket Tool (G) and painted the marquee blue and then changed the Fill to 25%.

I used the same font-size for the header and content of the background_what_else layer, 14 pixels.  For the header itself, I made the font-color the same blue as the background with 100% Fill and Opacity.  For the content, I used the maroon coloring.

I then decided I wanted to add one more small image and place to the left of the secondary content box.  I went back to Stock.xchng and grabbed an image of a rose.  I created a new layer named rose and pasted the image.  After alterations and resizing (approximately 160 pixels by 150 pixels) I moved the image to the left of the secondary content box.

Below the secondary content box, I decided to close off the page with the footer.  You could certainly add additional elements; for example if you’re using Wordpress, you could add “Most Recent Posts” or “Most Recent Comments”.  But, again, for this template I’d prefer to minimize information on the home page.  What we have is certainly enough.

I used my Rectangular Marquee Tool again with a rounded border of 5 pixels, 50 pixels high and drew it across the bottom 10 pixels from both of my border gradients.  I colored the background a tan color (#c9b385) and kept the Fill and Opacity at 100%.

For my footer text, using the Text Tool (T) I drew my text box across the entire footer.  In the Character tool box I made my font-size 14 pixels and the blue font-color.  In the Paragraph tool box I centered the text and then typed in my footer text.

We now have a good home page to install onto our website.  In future articles we’ll go through creating additional pages for Wordpress and Joomla templates.

Next, we’ll start slicing the PSD file in Adobe Fireworks.  I will post that article on Monday, February 2.

[polldaddy poll=1332280]