Reply Thread Tools Search this Thread
Old 10-06-2008, 02:14   #1 (permalink)
milani
Senior Member
 
milani's Avatar
 
Join Date: Jun 2008
Posts: 253
WIP design; looking for input

I didn't get much of a response from my current site (univoxdesigns.com) from these forums, probably because people didn't like it very much. To be honest, I didn't feel it was a very client-friendly design, and it didn't really portray what I was trying to portray to visitors/clients. As hard as the criticism was to stomach, I recognize it just wasn't the best approach.

So I went back to the drawing board. I am very interested in any suggestions or input from you guys. I'm trying to go for something that is simple, understated, yet visually tasteful and content friendly. I hope that my skills will be more aptly reflected by the portfolio, but I'm still trying to make something that looks good.

Anyway, attached is what I've come up with so far, and I have several variations that I might attach later, depending on the response I get. Thanks in advance!
Attached Thumbnails
wip-design-looking-input-univoxv2.jpg  
  Reply With Quote
Old 10-06-2008, 03:09   #2 (permalink)
karmedic
id
 
Join Date: May 2008
Location: Ottawa
Posts: 230
Simple is always good. that being said, there are some tenets and guidelines that can be followed to help you get your point across effectively. The immediate thing that sticks out in my mind with this site is that all the text is a) the same size, b) the same colour, c) the same font face. Don't get me wrong - these are not bad things in and of themselves ... but as they've been assembled here it really makes it difficult for the reader to focus and stay on point. check this article out:

A Guide to Web Typography. The Basics: contrast, size, hierarchy, space | i love typography, the typography blog

As that article mentions - contrast, size, hierarchy, and space - the cornerstones of good web typography.

The other thing that immediately comes to mind is the lack of colour (or, more appropriately, the abundance of grey). Liven up the site a bit and invite people to stay.

hth
  Reply With Quote
Old 10-06-2008, 03:46   #3 (permalink)
milani
Senior Member
 
milani's Avatar
 
Join Date: Jun 2008
Posts: 253
Thanks a lot. Really great article too, I'm going to give it a thorough read soon, but just reading the first paragraph is something of an eye-opener.

I must confess I have not put much thought into the typography of the site (also, that text was just copy pasted only for the purpose of showing what/where the stuff was going.

The problem is, I suppose, that my logo image/font was intended to be small. I felt that the client's designs ought to be at the forefront, and so I felt an understated, simple, but effective logo/logo typography was the best course. I guess, based on the fact that the logo text is set, I'm a bit stuck on where to go with the rest of the font.

I suppose color would be one thing I can control (perhaps drawing some blue into the text, to offset the blue graphic), and therein lessen the grey (which you correctly pointed out is a bit much).

Do you think I should consider using larger fonts for the text - even if that text's font would be bigger than the logo font?

Thanks again for the input! Very useful!
  Reply With Quote
Old 10-06-2008, 13:31   #4 (permalink)
karmedic
id
 
Join Date: May 2008
Location: Ottawa
Posts: 230
There's nothing wrong with having a small logo - you'll just have to account for it in the overall design. I have developed sites where there were very strict requirements for logo size and placement. Sometimes you have to get a bit creative to pull it off. Sometimes the requirements are just not realistic.

Your site is your handshake to the world of potential clients. Whatever route you take I'd simply suggest that you have them in mind while developing.

Good luck and have fun!
  Reply With Quote
Old 10-06-2008, 13:43   #5 (permalink)
Root Ninja
SEO Specialist
 
Root Ninja's Avatar
 
Join Date: Jun 2008
Posts: 231
Page looks good, all I would suggest at this stage is to make the buttons look like buttons. Most people will know that they are, but I still get people who are confused by anchor text, grr!

What about including your logo into the banner?? I think that could be a cool look?
  Reply With Quote
Old 10-06-2008, 17:45   #6 (permalink)
milani
Senior Member
 
milani's Avatar
 
Join Date: Jun 2008
Posts: 253
I never really thought of including the logo in the banner graphic. Actually, I might have considered it, but I wouldn't exactly know how to go about it. I'm not really sure what exactly I want with the graphical part, I think maybe just something to kind of draw your eye in. I have a feeling that the logo might get lost if it were inside the graphic, especially considering how small it is.

As far as working on the menu, that's a really good point. I was considering a few things, like maybe making a graphical arrow (similar to the page icon) to indicate what you're viewing, but I still need to consider how I'm actually going to indicate that those are links and not text. Perhaps I will try to fashion some buttons, or vertical tabs. I'm not exactly sure, but it might give me a chance to draw some more blue into the design.

(A note on that: I think that if I make the link font blue (for links within the page's text, it helps to balance the colors a lot better).
  Reply With Quote
Old 10-06-2008, 18:56   #7 (permalink)
karmedic
id
 
Join Date: May 2008
Location: Ottawa
Posts: 230
Good call - you'll definitely want to distinguish links from plain content.

Re: Root Ninja's idea about logo in header - you could always isolate it. I had PS open so very quick example attached ... would require work and your own personal touch.
Attached Thumbnails
wip-design-looking-input-uni.jpg  
  Reply With Quote
Old 11-06-2008, 07:49   #8 (permalink)
milani
Senior Member
 
milani's Avatar
 
Join Date: Jun 2008
Posts: 253
I've been playing a bit with what will be the css typography (its just a PSD right now, obviously. I like your idea for the logo, I might try it and see how it looks implemented, and probably come up with a couple variations. However, what I'm foremost concerned with right now is the menu area.

I decided that perhaps an icon (the overlapping page icon - see below) would be a good way to distinguish that A) its a menu, and B) that you're on said page. I don't know if it'll do the job perfectly, but I figure in combination with the title tags (About Us - ****; Services - ****; etc) it should do the trick. However, I also removed the "heading" text from the main box. I don't know whether I should put it back or not. To me, it seems a bit repetitive to have the title tag, the menu (as determined by the overlapping page icon), and a header all say "About Us" - it seems like an overkill to me.

I've also made a few cosmetic changes, moving stuff around a bit, and I don't know how obvious it is, but I drew some blue into the gray areas in the hopes of balancing out the blue/gray contrast a little bit more.
Attached Thumbnails
wip-design-looking-input-univoxv3.jpg  
  Reply With Quote
Old 11-06-2008, 08:06   #9 (permalink)
milani
Senior Member
 
milani's Avatar
 
Join Date: Jun 2008
Posts: 253
I also came up with an alternative to the above menu soon after I made my post. I actually like this one a lot better. I think it combines my desire to highlight which page is being viewed without necessarily having a header inside the text box area, and the suggestion of actually making visible buttons for viewers to help them recognize it's a menu.

Although the execution might be poor, the [ + ] box is 100% opacity, while the windows which are not being viewed (shown by [ - ] boxes) are at 65% opacity.

I think this works a bit better, and it also helps (in my opinion) to tie the box logo into the rest of the design a little bit more. All thoughts are welcomed! And thanks to the contributers to this thread! You've really been a great help, and I'm very glad I joined this community!
Attached Thumbnails
wip-design-looking-input-univoxv4.jpg  
  Reply With Quote
Old 11-06-2008, 11:47   #10 (permalink)
karmedic
id
 
Join Date: May 2008
Location: Ottawa
Posts: 230
The '-' beside the section headings would indicate that the section is open and is collapsible. Take a look at a menuing system on an OS or web app that uses pluses and minuses. Perhaps using something like a stylized arrow for bottom level menu items would be a better representation? Same goes for the '+' ... I expect it to open a submenus when clicked. Is that what the intention is?

Either way I think it's starting to look good - nice work!
  Reply With Quote
Old 12-06-2008, 07:24   #11 (permalink)
milani
Senior Member
 
milani's Avatar
 
Join Date: Jun 2008
Posts: 253
Good call on the +'s and -'s. I changed it a bit, and now I'm in the process of coding it/cleaning it up. I'll probably change aspects of the design, but for some reason I love to see something coded - even if it isn't done (although I realize it makes the job a lot harder later).

Univox Designs - Professional Web Development

Thanks a lot for all your help!

Last edited by milani : 12-06-2008 at 07:57.
  Reply With Quote
Old 12-06-2008, 12:09   #12 (permalink)
karmedic
id
 
Join Date: May 2008
Location: Ottawa
Posts: 230
lookin' good!
  Reply With Quote
Old 12-06-2008, 12:50   #13 (permalink)
mx
Global Visionary™
 
mx's Avatar
 
Join Date: Jun 2005
Location: in the boosh
Posts: 1,715
Quote:
Originally Posted by karmedic
There's nothing wrong with having a small logo

But having a logo that is too small is, and yours is.

At the size you've got the logo it doesn't identify itself as higher in the hierarchy than any of the other elements. It's doesn't have to be huge, but it does need to be bigger.

Further more it's central location doesn't work with the rest of your layout. Everything else in your site has simple left alignment, so why break it.

Overall the site is currently looking pretty bland...


But wtf is going on with your coding?

I was forgiving the bland design because your a developer, having looked at your code your clearly not. Tables? no semantic mark-up? You've got a long way to go before you can call yourself a professional.
__________________
  Reply With Quote
Old 13-06-2008, 23:16   #14 (permalink)
milani
Senior Member
 
milani's Avatar
 
Join Date: Jun 2008
Posts: 253
Point taken.
  Reply With Quote
Old 17-06-2008, 09:14   #15 (permalink)
milani
Senior Member
 
milani's Avatar
 
Join Date: Jun 2008
Posts: 253
Well I went back to the drawing board, and I came up with something that is a bit more of what I was after to begin with, and guess what, no tables either. Hopefully the recode will satisfy you, mx.

Univox Designs - Professional Web Development

It's still a WIP for sure, but I think it's moving toward the direction I had envisioned from the onset.
  Reply With Quote
Old 17-06-2008, 12:04   #16 (permalink)
karmedic
id
 
Join Date: May 2008
Location: Ottawa
Posts: 230
Although I still believe that a there's nothing wrong with a small logo under the right circumstances it's becoming painfully clear that this one just doesn't work. The shorter header coupled with the nav text snugged up illustrates this. You're effectively telling the world that your name is not worth the screen real estate. Perhaps when you're a design & devel shop of 100 with fortune 500 clients you can get away with something like this but for the time being you're doing nothing to help yourself. When a prospective client comes to your site and sees this they may very well assume that your ability to promote their name and brand is lacking and move on.

Quick question - is your logo vectorized?

$0.02
  Reply With Quote
Old 17-06-2008, 20:33   #17 (permalink)
milani
Senior Member
 
milani's Avatar
 
Join Date: Jun 2008
Posts: 253
Univox Designs - Professional Web Development

How is that for a bigger logo?

I slashed the graphic banner for now. I think it doesn't look very good with the bigger logo. I guess I'll just have to play with the size of the cube and the text, and hopefully find a balance.

EDIT: Alright I think I found the best compromise, and I also made the logo a bit more exciting as well. I think it looks a lot better, but I'll wait for opinions.

Last edited by milani : 17-06-2008 at 21:03.
  Reply With Quote
Old 18-06-2008, 13:19   #18 (permalink)
karmedic
id
 
Join Date: May 2008
Location: Ottawa
Posts: 230
I like it it more than your previous attempts. I agree - the logo has more character to it now.

Cheers
  Reply With Quote
Old 19-06-2008, 09:56   #19 (permalink)
milani
Senior Member
 
milani's Avatar
 
Join Date: Jun 2008
Posts: 253
Thanks. I guess I'm going to look at the font next. Verdana is good for the text, but I think I might want something more interesting for the logo text - otherwise I might as well just put regular text in place of the image-text.
  Reply With Quote
Old 19-06-2008, 13:37   #20 (permalink)
JLR
Registered User
 
Join Date: Jun 2008
Posts: 14
This may just be me, but I think it would be better if the buttons were split equally along the nav bar, so that when you get to the end button, the hover fits flush.

i.e. Button width = navbar width / number of buttons.
  Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search


Contact Us - Web Design Forums - Archive
vBulletin © 2000-2009 Jelsoft Enterprises Limited.
Search Engine Optimization by vBSEO 3.0.0 RC8