Sign in to follow this  

[web] My Website Mock-up (big img included)

This topic is 4240 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hey lads, I threw together a design-study for my website-in-work. The site is a mixture of a personal site and a reference site for me and possibly others. Of course, I try to put in everything that's flashy, geeky or Web 2.0. I want to have a tag-based navigation & search facility so I can save a group of tags as 'tag context' and then search in or explore the link/information universe specified by these tags. If you could take a look at the image below (it's transparent, maybe unreadable in the black forum theme. Right-click and 'View Image' to view it against a white background), I appreciate any feedback (don't hold your horses). The meaning of some elements on the site may not be clear. A more detailed and commented design prototype will be posted later, but I'd still like to know any 'WTF?!' or 'Huh?' experiences you had with that mock-up.
  • Would you visit it (more than once)? If or if not, why?
  • Would you have problems navigating that site? Is something seriously wrong with the navigation method?
  • What do you think of the layout? (layout/colors is WIP, but I'd like comments on that as well).
  • Which programming relevant/reference sites/blogs do you visit most? (So I can steal what's good with them)
  • Is something seriously wrong with the structure? (e.g. Animes and development on the same site)
  • Can you find the serious usability faux-pas I have admitted?
  • Anything else?
So, without further ado, here it is:

A web design newbies' 2nd try

Image Hosted by ImageShack.us Software used for the mock-up: InkScape GIMP IrfanView Yeah, I'm doing these great softwarez no justice. [smile] [Edited by - Konfusius on April 30, 2006 10:05:30 AM]

Share this post


Link to post
Share on other sites
Too cluttered. In my opinion you need to break the site down into smaller sections each with a main page, have link to each main page from the home page. Have a simple Page Header with easy navigation to each main section, same goes for the left side menus. I think all the stuff on the right should just go. It feels like you are just trying to put too much into the mix.

theTroll

Share this post


Link to post
Share on other sites
It is more cluttered than, say, my page, but it works if you have the content for it.

I am a little confused about the plethora of top navigation menus. We have the "Home/News...Coding/Anime" section, the "Web/Games" section, and then the (sub-web) "Rants/Standards" section. I understand the last two, but don't know about the first one. I assume it's the very top level of navigation, and the web/games is the level under it. I'm also assuming that on the Web/Games level, the additional sublinks will be on the same level as the Web and Games links?

If so, you might want to consider making the Home/News nav bar much stronger, or use tabs to switch between them. Also, why the breaks in the bar? (Home/News/About...Index/Directory/Tags...Coding/)

And then, there's the Search/Store/View way up at the top. It just seems like these need to be more condensed.

Also, what will be in the directory section (on the left)?

Now, to your questions. Whether I would visit it more than once would depend solely on content. So I can't say.

Besides what I said above, I don't think navigation would be too difficult.

The layout is alright - I assume not everything will be a plain white, black-bordered box on a gray background, of course, and that you'll remove a bit of the padding between boxes. And replace the current headers and such with correctly positioned items, of course (I know you will, because that's what makes this a mockup and not a final product).

Regarding structure... I don't see anything wrong with having anime and development on the same site. However, if you find that your structure does not work for both equally well, you might think about splitting them into two sites. And, if you don't have the content to justify one of the sections, you'll definitely want to consider changing something.

Can we have a permanent login box somewhere?

Share this post


Link to post
Share on other sites
Thank you, TheTroll and Avatar God, for your feedback.

I'm working on a version which tries to adress some of the issues you mentioned.
The right collumn will stay, but I'll try to make it less cluttered, with an option to collapse seldom-used boxes.

On the content, I had a small anime website before, and for the dev part, I'm just gonna put up some links to my favorite reference and news sites, as well as links to applications, libraries and languages, and a few quick-lookup boxes for RFC's, standard library functions and the like. My 'own' content will follow.

Thanks again!

I have an additional question:
AJAX-Yes or No?

Konfu

Share this post


Link to post
Share on other sites
Here's a slightly decluttered version.
Note that the boxes around each section are just illustrating the layout, not the design.

Home News About | Index Directory are links pertaining to the entire site, as is the footer (disclaimer, TOS and copyright notice) and user box (profile).
Coding Anime Games Arts Links Apps Friends are links to subsites, each with a distinct style.
The two nav bars below that are then primary means to navigate the subsite, together with the user-selected 'tags' that define a special interest and narrow the information space.

<>

[Edited by - Konfusius on April 30, 2006 5:25:23 PM]

Share this post


Link to post
Share on other sites
Another version, this will likely be uses to prototype the site (unless I get some much-needed criticism which would cause me to rework it).

Hmm, when I look at it, I don't like the header at all. Too cluttered.


I'm gonna read Principles and elements of design first before going back to the drawing board! [grin]

<>

[Edited by - Konfusius on April 30, 2006 5:17:24 PM]

Share this post


Link to post
Share on other sites
I agree too cluttered. I think a main page should be clean and eligent. You do not need to have every option on your main page, just ways to get to the major sections. People will go to the areas that they are intested in, you don't have to give them all the options at once.

theTroll

Share this post


Link to post
Share on other sites
IMHO, a personal reference site will most likely NOT attract others to stop by again. Probably your friends will. but that's about it. ( actually if you have excellent original content, that's a different story, or if you're a celebrity in your local area too )
You should make the theme of your website much more clearer. get rid of anime etc... if you want to attract more people that is... again that's just my opinion.
Personal websites are as the name implies, personal. your friends will visit there, and you can post your resume's and etc. If you put a couple random things here and there such as anime, it just looks unprofessional. ( I don't have anything again anime, im from an asian culture and grew up with anime )

Share this post


Link to post
Share on other sites
Quote:
Original post by Tradone
IMHO, a personal reference site will most likely NOT attract others to stop by again. Probably your friends will. but that's about it.


Point taken. I will probably take that personal stuff out when the site goes live.

Share this post


Link to post
Share on other sites
In my opinion, the menu is very confusing. I had to look a few seconds at it to make out where to click. It's also confusing that you have the main menu (top-right I think) seperated from the subsections (the horizontal bar?).

You should definitely consider implementing a tree-view like menu, where you'd only have your main items and then reveal the subsections by clicking on the items. This would probaly make things way clearer because you'd only have the left bar for the menu, the right bar for your search and personal/login stuff, top for your logo and the middle for the site content.

I would usually implement this tree-view menu by using java-script, but I think you can do this pretty easy with Web 2.0, don't you?

Share this post


Link to post
Share on other sites
Quote:
Original post by ZMaster
In my opinion, the menu is very confusing. I had to look a few seconds at it to make out where to click. It's also confusing that you have the main menu (top-right I think) seperated from the subsections (the horizontal bar?).

Good tip! You're right, I will rearrange that.

Quote:

You should definitely consider implementing a tree-view like menu, where you'd only have your main items and then reveal the subsections by clicking on the items.

I find deep tree-view menus very cumbersome to use. The idea I have is to get to all important sections of the site with the navigation methods on the top (main menu->1st menu line->2nd menu line) and have the left menu display ALL the links in that section. No tree-view required (less clicking and more screen area used).
Maybe I'll make a 2-level tree-menu.

Quote:
This would probaly make things way clearer because you'd only have the left bar for the menu, the right bar for your search and personal/login stuff, top for your logo and the middle for the site content.

Yeah, but I don't like the entire header area go unused.

Quote:
I would usually implement this tree-view menu by using java-script, but I think you can do this pretty easy with Web 2.0, don't you?

CSS all the way, no JS required. Web 2.0 is AFAICT a buzzword for AJAX/JSON/AHAH stuff, which already implies javascript.

Thanks for your valuable input.

Share this post


Link to post
Share on other sites
Apart from the huge amount of menus, I think the borders around erm.. everything, don't do the layout any good.
I made you a little 5 minute sample to show you what I mean: link
IMO, this makes the overall look at lot cleaner. I have cheated a little by removing some of the links. ;)

Share this post


Link to post
Share on other sites
Thanks! I made another version incorporating some of your suggestions (the colors are of course temporary):

<>

I think the layout looks way less cluttered than the first version.

[Edited by - Konfusius on May 1, 2006 1:42:02 PM]

Share this post


Link to post
Share on other sites
I think you use way too many colors. It gives a very unordered feel.

I think that one main color is enough, or maybe two, but 10 is definitly too much.

You seem too fond of boxes. Instead of explicitly draw rectangles where the different logical units ends, try to align text masses to form lines.

If you manage to create lines in your design, without drawing them, the site will have a much more structured feel.

The latest version is 10 times better than the first one though. [smile]

Share this post


Link to post
Share on other sites
I agree you are heading the right way. Try to make your site using three or four complimentry colors. Think about when people go looking for paint and get a little paint scheme, that is what you want for you site.

But keep plugging away and you will get to a good place.
theTroll

Share this post


Link to post
Share on other sites
Pretty close!

I think this looks totally OK:

yay!

I've removed the blue part (not sure if it was supposed to be there in your shot, but it looks nice without it).

I also removed ugly red text and an unneccesary line, as that line is there anyway (due to the obvious separation from menu and content).

Share this post


Link to post
Share on other sites

This topic is 4240 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this