Website Design

 
Website Design
Posted Thu, 04/24/2008 - 02:30

Hi all,

Let's start with the basics:

  • What would the site structure be?
  • What absolutely needs to be shown in the main page? For example, I noticed that there's no real navigation link in current website to go to the forum (unless one clicks on the recent comments). The forum link would show AFTER I log in. Is this intentional?
  • Are there any other specific preferences (such as the website has to be predominantly white/black)?
  • What about banner and the likes? Are there going to be external advertisements other than InitMarketing's own ads? How about affiliates?
  • Would there be multilingual support?
  • What is roughly, the age range of people who visit the page?

It'll also be great if I can get high resolution photos from InitMarketing of the office, people, or anything related to the company (and I mean anything, as long as it's SFW :))

‹ Music intro for videos InitMarketing logo ›

Comments

Re: Website Design

Fri, 04/25/2008 - 12:52 — ordnas

Hi Wira,

What would the site structure be?

You mean the site map? That would be the same as today.

Concerning placement of site navigation, I always prefer 1st level navigation on top, horizontal and sub-navigation left, vertical. Yet, it's not a strict requirement. 

What absolutely needs to be shown in the main page?

It will stay the same as today for some more time:

  • a banner
  • an introductory text
  • news (Planet InitMarketing)

You are right, it might be a good idea to integrate recent forum comments on the main page and remove them from the left sidebar.

Are there any other specific preferences (such as the website has to be predominantly white/black)?

No.

What about banner and the likes? Are there going to be external advertisements other than InitMarketing's own ads? How about affiliates?

Of course, the banner design should be in sync with the site design and generic enough, so that we can easily create new ones. Banners will include an image (see banner on current frontpage), a short text (e.g. "If you are Open Source, we will help you succeed") and optionally a link (e.g. "Read more").

We will not serve banners with ads nor those of affiliates in the foreseeable future.

Would there be multilingual support?

No.

What is roughly, the age range of people who visit the page?

Our target audience is between 25 (e.g. founders of start ups) to 55 (e.g. CEO or VP Marketing of OSS company).

High resolution photos?

If you wish, I can send the portraits of the team members to you in high res: http://www.initmarketing.com/about/team. That's all I currently have. 

Website color

Fri, 04/25/2008 - 15:54 — ordnas

Concerning colors, I have some thoughts, not sure yet what to do with them:

I mentioned in the logo discussion, that InitMarketing's expertise lies in the combination of emotions (i.e. marketing) and intellect (i.e. Open Source software technology).

A combination of red and blue (or flavors thereof) might be a good choice:

  • Red is an emotional and vibrant color and well suits a marketing agency.
  • Blue is the typical color for technology leaders (think IBM).

On the other hand, companies with one distinct color (e.g. Coca Cola is red) have a strong visual brand identity.

We should avoid using colors predominantly that make us appear expensive (e.g. black as the color of luxury) or cheap (e.g. the orange of European budget airline EasyJet).

I hope Wira's creativity will help us out :)

Mockups

Mon, 04/28/2008 - 13:03 — spinspire

Here are the two mockups of the website (click to view full size):

Mockup 1

This design is an adaptation of current website with new corporate identity. Layout-wise it's still the same. Navigational elements are made more distinct and clearer.

Mockup 2

I designed this one so that information in the website is separated in a clearer manner. Things are kept simple and clean for easier reading.

I replaced the banner with images of Dandelion clock, as it has a strong association with growth and expansion

In search for a synthesis

Wed, 04/30/2008 - 20:55 — ordnas

Thanks Wira for the really excellent start which allows us to go down to the nitty gritty.

Missing essentials

First, there are some essential elements missing, which are a must-have and can have a high impact on the proposed two layout structures. The design should include:

  • breadcrumb path
  • secondary navigation
  • tagline (e.g. "Be open and successful" or "The first provider of Open Source marketing services")

Discussion of first design

Pros:

  • Content is clearly separated from all other elements.
  • The placing of the search form is genius, because it is clearly related to the content area.
  • The banner is perfect in its size, because the windshield ratio allows an image to be effective and leaves enough space for text.
  • The font used in the banner is great and nicely contrasts with the logotype and content's font.
  • The shadowing around the content area is beautiful.
  • I like the stripe around headlines such as "Planet InitMarketing" which nicely separates sections within the content area. I guess this is meant for h1 only?
  • I like the shadow of the icon that is placed in the content area.

Cons:

  • In the left sidebar, the red/orange text on the blueish background is stressful to read.
  • IMHO, the re-use of elements of the icon's style in the site layout is a bit too inflationary. I would look for a different solution to indicate active/inactive top navigation items.
  • The content area is too wide, lines of text get too long and too hard to read - unless you place an image left or right of the text (which Wira did with the icon below the banner), which will not always be the case.

Open issues:

  • Where to place the secondary navigation: in the left sidebar or below the top horizontal navigation? If in the left sidebar, should it have a white background to be associated with the header or content?
  • The breadcrumb path could be placed in the same area where the search field resides.

Discussion of second design

Pros:

  • I like the Web 2.0-style footer.
  • The red/orange text on the brownish background of the footer is better to read, compared to the red/orange text on the blueish background of the first design.
  • The width of the content area is easy to read (of course, it would be too wide if the banner on the right did not exist)

Cons:

  • The brownish color of the footer does not fit with the rest. Also, the color of the icon placed inside the footer does not appeal to me.
  • The banner size does not allow to transport emotions, because images are too small and there is not enough space for text.

Open issues:

  • The secondary navigation could easily be place in the left sidebar.
  • The breadcrumb path could easily be placed below the top horizontal navigation.

General notes

  • We will not use banners on all pages.
  • We should use a different image for the front page banner, but let's not worry about that now ... and Rory's comment about "suck seed" is very interesting :-)
  • Both designs are good when it comes to red/grean color blindness (design 1, design 2)

I trust in Wira that he can draw intelligent conclusions from my amateurish comments and come up with a solution that extinguishes some of the cons, balances the others with the pros to achieve a good synthesis of the two mock-ups.

Color set

Thu, 05/01/2008 - 08:13 — ordnas

I now better understand, why I don't like the brownish color of the footer: it adds yet another color to the color set used in the website design and I'd like to have a minimal color set to enhance brand recognizability.

More general notes

Thu, 05/01/2008 - 19:14 — ordnas
  • href links within the content area should be underlined and colored (using the same color except for visited links)
  • How are tables supposed to look like (e.g. the table listing our services)?
  • Where will the page name be placed and how does it look like on an ordinary page (i.e. those below the front page), for example the "About" title in the about page?

I prefer the second. In both

Mon, 04/28/2008 - 15:46 — rory

I prefer the second. In both of them I love the use of the logo on its own without the company name.

In the second one I am not so keen on the grey horizontal nav bar but other than that I like it.

Only thing that I wonder is whather we could use more of the forms of the logo, blown up and abstracted within the page structure?

 

 

Oh yes the only other thing

Mon, 04/28/2008 - 15:51 — rory

Oh yes the only other thing is that the dandelion clock is a load of "seeds" on a head.

The caption is: "we will help you succeed" (phonetically "suck seed")

The idea of sucking dandelion clocks isn't that appealing.

 

Might just be me though.

 

I like the second one - much

Tue, 04/29/2008 - 14:25 — vikram

I like the second one - much cleaner and easier to read and navigate

Revision

Sat, 05/17/2008 - 09:44 — spinspire

Ok, after all the inputs, I put together a newer design with stronger emphasis on corporate colours. I also got rid of the dandelion (Rory's suggestion of sucking seed is rather subliminal, but vey very plausible).

The main banner stays in the middle. Additional banner/info can be added on the right column. The watermark can stay if there's nothing to put in the right column.

Navigation, sub-navigation and path are all located on top. Editing features stay on the left column. This is to avoid confusion of switching navigation between top and side navs.

 

One thing, do you guys have any idea what sort of content I can pull out from the page to add to left column? If a user is not logged in, the left column is left with an empty space. Too big of an empty space, actually.

 

Re: Revision

Mon, 05/19/2008 - 17:45 — ordnas

Hey Wira,

thanks for the excellent design. In general, this is exactly what I roughly had in my mind months ago - although it was just a blury idea or feeling of what kind of impression the design should make.

You really hit the nail!

Here are a few suggestions:

  • Concerning the left sidebar:
    • Let's remove the login-register-block completely, because it has a much too prominent location. Instead, let's place it in the top right corner of the header as part of a third navigation with text such as: "Log in | Register".
    • On the start page (and only there), the banner could also use the space of the sidebar, which makes it wider and better fit the windshield ratio. On all other pages, the banner would have the size as you proposed in your revision.
    • Let's have the secondary navigation in the left sidebar. The active main navigation item (e.g. "Services") of the top navigation would be repeated where it writes "Not logged in" in your revision. Then comes the separating line and below it, the secondary navigation items are being displayed. The background should be lighter compared to the top navigation, to visually support the notion of a secondary navigation. By placing the secondary navigation in the left sidebar, we are highly flexible with adding more items to the secondary navigation.
  • Active top navigation items are not indicated clearly enough - maybe you can pick a different background or font color for active items?
  • Please change "Be open and successful" in the header to "The first provider of Open Source marketing services" (without the quotes)
  • Omit the logo in the front page banner - it's just too much there. It would look fantastic though on a large poster, we could use at booths for example (let's discuss this again at a later point).
  • The icon in the footer is far too prominent - hey, it's just the footer :) Maybe you can paint it in the same color as the background color of the "Imprint" and "Credits" links.

Other than that, the design is just fabulous!

Thanks so much!

Sandro 

Page title and banner

Mon, 05/19/2008 - 19:16 — ordnas

Maybe we should completely omit the page title (such as "Open Source Marketing Services" on the front page) whenever there is a banner. Alternatively, the page title could be placed below a banner.

This ensures that the banner gets full attention.

Adjustments

Tue, 07/01/2008 - 15:02 — spinspire

I've made some adjustments to the mockup as requested.

However, when the banner gets resized to the left, the whole design seems broken (looks really messy). I moved the banner to grow to the right instead and used stripes to  replace the watermark feel (otherwise the sidebar would look too empty).

Both the stripes and watermark shouldn't be overpowering since viewer would have to scroll down to read the  text, hence the stripes won't be on sight when the watermark is apparent.

I used tree-style sidebar navigation to complement the top navigation item. However, I do notice a bit of redundancy as we can see three occurences of "Services" in Services page. Should we omit the title whenever we're in the main navigation page and only show titles of the sub navigation pages?