I need some advice on how I can add some depth to a design I am working on for the company I work at. I do not consider myself a designer and often have a hard time managing the typography and subtle details that really make a site great. Everyone here at work seems to like but I still feel like it is somewhat "flat" and devoid of character.
The primary goal that I was going for is readability and compatibility with mobile devices. Both are issues on our current website. The other goal was to make the page feel open and unrestricted. I would really appreciate some feedback in the following areas. Please keep in mind that it is a mockup only, so the images aren't optimized, and there is a lot of placeholder text/images.
Typography, does it fit the theme correctly and how do you feel about the readability?
How do you think I could add some subtle details and character to it?
What are you overall impressions?
Some of the links in the main navigation are functional as well of some of the sub navigation links in products and news. http://mockup.b3cfuel.com/
Any advice you could offer would be greatly appreciated.
I really like the bold imagery and uncomplicated structure of the homepage. On my (admittedly small) laptop screen, you don't quite see the headline above the fold, this might need to be tweaked - albeit only fractionally. The top navigation is clear, the product page is simple but effective. I think my only gripe, as a former copywriter, is that there should be an apostrophe in "World's First Complete..." within the headline But overall first impressions are very positive, colours are good, content is clear (even with lorem ipsum).
Hi Jeremy, Personally, I wouldn't use Myriad Pro for the headings as it's a default web font and looks amateur. Much better to use Google Web Fonts, PT Sans for example?
ON the blog list you need to put more space above and below "January 18 2013 by Mike Goad" it's too near the headline.
h3.detail-heading needs margin-bottom of at least 20px – same as the body text.
Text running the full width of a web page is generally considered to be too wide but maybe your only concerned with smaller devices in which case it would be oK.
Product shots images need to be reduced to thumbnail size and re-optimized. Not a design issue, well, not strictly a design issue but usability.
I think it looks nice, but the text in the header is going over the dark colors on the guy's hat, so it doesn't stand out. Too dark. Maybe the text could be white with a drop shadow?
You have an ok start here but there are some things you should tweak.
The first is your banner. It’s way too big and drowns out everything else on the page. Don’t make it the entire width of the page but instead maybe 80% or so give or take. I like the article headlines you have on the banner but the black text is hard to read. I would make it a different color.
Your logo is easily missed. This should stand apart from other elements of the page. You have it in the correct space in the top right corner but there should be some space in between it and the top of the page and the banner. I would get rid of the entire black background on the main navigation all together.
Which leads me to the main navigation. It’s hard to find when it is on top of that banner and on a black background. Maybe it’s because of the black headlines or because the banner is so big. I would experiment with bringing it down below the main banner image and adding some type of effect to make it stand out. Like a gradient or something. You could leave the “dealer locator” at the top of the screen however if that is supposed to be a search function, it does not look as such. You should make it look more like a search bar if that is its function.
As for the lower part of the page, you have way too much white space going on. A good way to combat that is to make a white “wrapper” that runs through the center of the page that has all of the content on it and the banner image centered with in it. It can run top to bottom. Then have a different background color for the page overall. This helps all the content to pop off of the page and also gets rid of some of the white space. Don’t get me wrong, white space is good however too much makes the site look un-professional and leaves users wandering.
For your font, try something like Century Gothic. That should look pretty professional. Also, don’t center your headings, align them to the left like your paragraphs of content are.
If you have never read the book “Don’t Make Me Think” before, I highly recommend it. It gives a lot of great tips on web design and usability conventions. I would also recommend looking at other sites that you find appealing and see how they do it.
1) The Text Headline over the images look a little too big, gaining too much attention. Also, trying using a font like Titillium and see if you like that.
2) Why not try making this headline, vertically centered over the image? and move the Read more link on the right side.
3) You'll have to do something about the Logo, it does fit well in the top menu and to be honest, I'd ask you to redo the logo, if possible.
4) The line-height of <h1> tag in the "container element" looks huge. Maybe reduce that bit along with the margin at the top and bottom of this heading.
Let me know if you need more clarification on any of the inputs.
Your site seems to be fine... good design, simple and beautiful navigation, no complications to explore your site. Some times competitors come up and other sites go down, don't worry you need more efforts, like in SEO, in quality (content). More focus at quality. And your site will come back at same visitors.
I think the site looks good, it's very clean and easy on the eye. The fon'ts may be a bit to big but that's just personal preference, maybe bring them down a notch. The colour scheme looks good and i can see that you have spent plenty of time developing the site. I like the picture of the man on the mower at the top with the blue sky, i like blue so i instantly liked that. The navigation is clean and precise and it's obvious about what the aim of the site is just by looking at the picture at the top ie something to do with machinary, and with a bit more navigation it's easy to see what the full objective of the site is.
You give good efforts to your site It look very nice, the coloouring the text, products all is looking great but if possible then please change your background color.
Last edited by Stevie D; May 9, 2013 at 04:26.
Reason: Fake signature removed
I think you're off to a good start, but I can see where you're coming from re: the flatness of the design. Don't worry, there are ways to combat that!
The thing that really jumped out at me for this design is the hierarchy seems all wrong to me. You've got this great, striking banner at the top which grabs the attention, but really does nothing to help explain what this site is about. Yes, there's teaser text that reads well for an advertisement, but it you don't want to force your readers to click a button to find out what this site is about, you want to tell them in a nutshell and then give them the option to read more IMO.
I think @smanaher is onto something suggesting you reduce the impact of the banner. You don't necessarily need to reduce the horizontal dimensions, but I'd definitely look at reducing it's impact on the vertical space of the page. (incidently, nice work with the banner solution for small screen sizes!) I'd suggest that you increase the impact of your H1 at the same time. It's your H1 that should have the bold, striking appearance that your banner text currently has.
1. Typography
Your font is not optimal, but not because of legibility. What is this company about? It's about engineering, powerful machinery and reliability. I don't think your choice of fonts represents that well at the moment. The kinds of qualities you probably want to look for are strong (i.e. dark, or 'heavy' - you're getting there in your banner heading, more geometric than humanist), solid (less thick/thin variation) and simple/clean (so probably a serif although you could look at a semi or slab serif for your headline if you found one that worked). Look for those qualities in the font you choose and you'll automatically get a lot closer to the 'theme' you're looking for with your website.
2. Subtly and character
I think your site works better at smaller sizes, so perhaps some of the solution is to reduce the monumental horizontal scale of the larger screen view, as per @smanaher's wrapper suggestion. I think you could introduce more subtlety in your colour scheme. Think of it as a spectrum: at the moment you have black, white, a bright blue and a bright yellow. Black and white are opposites, but the blue and yellow are also fairly 'extreme'. If you introduce some tints inbetween all of these points you'll gain a bit more harmony (I caution you not to soften the website too much though, that contrast also helps to convey that sense of strength I was talking about earlier). Have a look at the Makita website as they're using a similar colour palette: http://www.makita.com.au/ they've used shades of black everywhere, and just allowed small parts of colour in to really emphasise areas. They've also introduced textures to the colour so it's not so flat and vectorised.
3. Overall I actually think you're doing well. The imagery is engaging, the colour scheme will work when used effectively and that headline style on the banner does a good job of conveying the sense of what this product is about.
It looks like I still have quite a bit of work to do. I'll have to take time this weekend and start experimenting with different things.
@smanaher & @cheli: With the wrapper I'm assuming you mean to wrap all of the content area and get rid of the blue bands? The blue bands are one thing that I really like about the design but I do see where there is a lot of whitespace and why that could be bad.
@cheli: Thank you for the suggestions regarding the typography as well, that is one area that I particularly dislike working with. Also, I will do my best to try and add some different shades in there, but for me it's like randomly grabbing paint cans in the dark and trying paint something that is attractive . There is way too much right brain usage required.
@JeremyC what I meant by the wrapper is to wrap all of the content area. The blue bands I view as a heading style, so they count as content as far as I'm concerned. I wouldn't anticipate that wrapping the content would change the view for smaller screens either, just for larger (i.e. desktop) ones.
@cheli typography is not an easy thing to pick up! I spent three years learning it at uni and it's only after almost a decade of working that I'm starting to feel like I can set type nicely. Remember that visual design is there to speak a language - you wouldn't expect be able to speak Spanish quickly or easily, and when learning a language we often learn how to listen or read a language much faster than we learn to speak or write it - visual design can be quite similar so don't beat yourself up, but do remember that continuing to try WILL be making you more skillful, even if you don't notice it at the time!
With regards to the colours, you'll learn fastest by observing what others have done. Look at how the tints in the Makita website (or any other site you think does this well) are applied, work out how that technique could be applied to your own situation and work from there.
Reply With Quote
But overall first impressions are very positive, colours are good, content is clear (even with lorem ipsum).
. There is way too much right brain usage required.
Bookmarks