When I received this nice little treasure in my inbox, I instantly knew that it was going to be added. The navigation to the right of the layout screams modern, sleek and well designed. The style might be simplistic, but it helps make the other things stand out, for example the easy to read text, the contrasting colours and the smooth feeling that comes along with it.

The only downside that I found with this navigation is that it does not feature a hover state. I find this important as it helps the viewer visualise that they are hovering on a link.

Screenshots

The main navigation menu at CHNL really stands out for me, and for very good reason.

It features a normal horizontal menu, with each link separated into it’s own box. The background colour of the menu being a very vivid brown which both links in the title of the page, meaning that it is as important as knowing the name of the site (which it is), and also it contrasts nicely with the white background of the content area.

Within the boxes, the link is centred with a drop shadow effect on the text. This mirrors the shadowing of the title of the site, and also makes it jump out more to me. Only the title of the page is linked, with a description of the page underneath, also having a shadowing effect on the text. This, without loading the page, tells us what is featured on each section and helps us decide whether we want to visit that page. This is great for accessibility purposes, as people might only have a slow internet connection and take forever for each page to load before they find what they were looking for.

A slight change in the text colour occurs when you hover on the link, changing from a light grey to a light pink. This pink is taken from the header graphic and matches nicely with the dark brown background.

Screenshots

If you have just clicked the to go to the website, and found yourself instantly wondering: “Well where is the sidebar?”.. then you are not alone. The designer of erraticwisdom was very clever and has managed to hide the sidebar out of view unless you wish purposefully use it. I am not sure exactly how he did it, but I do know that Ajax was used to create this effect.

I really like how he thought of doing this because it is very often that when designing a website, you find that you do need a sidebar, but it takes too much space away from your important content. This way you do not have to sacrifice any space at all.

To open the sidebar, you can just like the ‘Sidebar’ text found in the top left hand corner of the page.

On the actual sidebar, the designer has defined the space by using a contrasting colour from the main white background: black. Within the sidebar, there is details of the site owner, links to content of his work and ways to contact him, and some extras such as twitter, flickr, last.fm.

Screenshots

The contact form found at Cubamoon Creative is unlike one that I have seen before. Not because of the colour scheme or anything like that, but because the designer has seemed to take it one step further than just changing the style of each input field.

The form looks to me like it is part of the layout, not a piece of content. I really like this about it. The graphics range from input boxes, text areas to drop down menus and submit buttons! All specially customised for the layout style by using gradients, drop shadows!

Screenshots

I am glad that once again, we are adding neonglow.net to the database! This time for his soothing and unique header.

The header is framed by a 10px (or there about) white border, which also frames the rest of the content of the site. Within this frame, the header features a shading of white curves with a vivid blue background. I feel this resembles much the background found on many Mac computer desktop’s, but has a lot more texture and depth.

At the top right hand corner of the header, a rounded-corner container drops down from the frame which houses the site name and slogan. The font features a very web 2.0 feel with a two shaded overall, and an outer glow which I can only imagined roots from the name neonglow. The slogan ‘Probably the gayest thing you’ve seen all day’ really draws your attention and instantly tells you that this website is going to be fun to read and flick through. This is certainly something every website should try and do, willing them to carry on browsing your site from the very top of the page.

Screenshots

When this site got submitted to cssbake.com, I did at first glance ask myself what made this navigation so special? After the page loads fully, you see a horizontal tabbed menu with large rounded corners. A common site nowadays, but when hovering on the links, it becomes a whole different story.

The designer of stompy.us has managed to bring her quirky cartoon drawings into her own navigation bar. When you hover onto a link within the menu, the link drops down to reveal an image depicting what this page will be about.

I also enjoy the font that was used for the links as it seems to have a youth factor to it; fun and quirky like the rest of the layout, but is easy to read and sticks out against all the standard fonts that are used over and over in the web industry.

My only disappointment with this navigation is that it does not feature anything to make ‘current’ pages to stand out. For example when we are on the ‘About’ page, the ‘About’ menu link background could have a different colour background, with the illustration showing.

Screenshots

The first change which was made, and I am glad we made it in the early stages of the website, when we have just a small database of websites was the introduction of overall screenshots. These screenshots show the whole design of a website and can be found in the top left corner of an ingredient’s post. Though they look small, you can click on these for a larger view.

Whilst on the topic of screenshots, quite a few visitors hoped that we would take hold of the features offered by Lightbox and place the ingredient screenshots into ’sets’. This allows the user to flick through the screenshots of a post quickly using tabs rather than closing and opening each one individually. I am glad to say that we have finally integrated this into our structure.

For frequent visitors or followers of the website, I felt that it was important to bring the updates to you. Therefore, I have added a link to our RSS feed in the top navigation, which you can subscribe to and see whenever we update the database.

Finally, I have introduced a sidebar on the ingredient’s posts to allow you to browse through the categories more quickly and to trail back to the page before. This will hopefully be developed further in the future.

What is still to come?

There are still changes to be made to the structure of cssbake.com, and I feel there always will be, but I thought it would be handy to you to hear what plans we have for the future.

1. A redesign of the browse page introducing; a random ingredient from each category, a category description, a ‘top 5 rated’ list and also a ‘5 most recent’ list. This will allow you to understand more of what the site has to offer, and what fellow visitors think of the designs which are featured.
2. We are also hoping to introduce a tag-based system which means that each ingredient is tagged and allow you, as visitors, to search for certain aspects of an ingredient e.g. “Pink” or “Square” and see which ingredients suit this.
3. At cssbake.com, we also wish to introduce a disclaimer and terms of service. This is simply just going to be in place incase anything may happen.

As I said before, these changes are just a few of what may happen. If you have any more suggestions or queries, please feel free to contact us.

Ben
x

By adding a drop shadow, changing the background colour and overlapping between the header and footer: this sidebar jumps out at me and gives a definitive difference between what is the content and what is the sidebar.

Along with the professional and accessible approach to the sidebar, we are also offered artistic visuals to lift the sidebar more and draw our attention. Examples of this is on the search bar, and the RSS feed link.

Screenshots

I was a bit apprehensive about the launch because I felt the gallery is a bit bare, but Rachael has been constantly reminding me that this site will grow more and more! I just hope you guys can contribute. If you see something you love about a site, bookmark it and suggest it! If there isn’t a category for it, suggest that too! We are very open to ideas.

That being said. Have fun. Browse. Rate and review! Speak your mind when commenting, what do you like? What don’t you like? We want your opinions.

Ben
x

The sidebar at NF Web Design Studio is set up as you would normally expect it to be, a div layer floated to the right containing information about the website, methods of contact etc. What makes this sidebar so special is the translucent background which keeps the textured background, but adds ’something’ to it. I am not quite sure what the ’something’ is, but it only adds to the effect of the layout. Because of this translucent background, I feel that the sidebar is more in-keeping with the rest of the layout.

Screenshots