SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    70
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Please give me some advice.

    Hello,

    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.
    1. Typography, does it fit the theme correctly and how do you feel about the readability?
    2. How do you think I could add some subtle details and character to it?
    3. 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.

  2. #2
    SitePoint Member
    Join Date
    May 2013
    Location
    Portsmouth, UK
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jeremy,

    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).

  3. #3
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    Hope this helps.

  4. #4
    SitePoint Member
    Join Date
    Jun 2001
    Location
    Nashville Tennessee
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Jeremy,

    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.

    http://www.amazon.com/Dont-Make-Me-T.../dp/0321344758

    Hope all that helps,

    Shawn

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2013
    Location
    New Delhi
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jeremy,

    A nice design. Here are some suggestions:

    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.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2013
    Location
    New Delhi
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ZHANG FELIX View Post
    I think your suggestions are very good!
    Thanks!

  8. #8
    Non-Member
    Join Date
    May 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Zealot Siick26's Avatar
    Join Date
    May 2013
    Location
    England
    Posts
    113
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    Keep up the good work, site looks good

  10. #10
    SitePoint Member
    Join Date
    May 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey Jeremy,

    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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    70
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for responses.

    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.

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @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.

  14. #14
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    MURICA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey! very nice design. It follows good standards and I like how it guides the eye in a simple fashion. A couple of subtle things I noticed is:
    The search bar doesn't seem to disappear on blur. Usually, when people click away from a search bar, it should fold back up.
    Also, if you're looking for something subtle to boost the look, try adding some noise texture to the navigation bar (look at the background of this site) It would definitely add a nice touch.
    Another thing I recommend is having the navigation bar follow the view window in an unobstructive way. I once saw I design that detected when a user was scrolling up and that triggered the navigation menu to pop up at the very top of the window, it's a good idea.
    You're buttons don't exactly match the theme of the page. I suggest rounding the edges and removing the border.
    Another subtle addition: have you tried out css3 transition? It's real easy:
    to make all links fade in and out whenever you hover over it:
    a {
    transition: all 200ms ease-in-out;
    }
    transition is fully supported by both chrome and firefox, with I think firefox having a bit of issues with width and height transitions.
    If you have the time, check out my website: nightstuffs.com
    I LOVE THE INTERNET, ALL OF YOU!!!! :3

  15. #15
    SitePoint Member arkumar's Avatar
    Join Date
    Jul 2013
    Location
    India
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have seen your website it is good but some pages are not working like resource and company. and your website dont have social awareness now a days all website should have social signal to their website

  16. #16
    SitePoint Enthusiast Janeth's Avatar
    Join Date
    Jan 2004
    Location
    Colombia
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now here’s an opportunity to get your hands dirty. This is a product that solves some real problems any home owner in a country or state that experiences the four seasons is aware of.

    The problem is the site was designed either looking at the competition or internally. The reason I say this is because it focuses on a lot of things I don’t believe the consumer cares about.

    Let me explain:

    The websites job should be to engage the web visitor. Since we already know that the web visitor is only concerned with themselves, then how awesome their life will be after they purchase our product is about all we can safely talk about.

    This would mean creating a list of problems your site solves and then creating landing pages so packed full of benefits for each of those problems that the web visitor is able to envision his/her new life with your product.
    After all, it’s not until they can envision their new life that they are willing to make the purchase.

    If you split test I think you would find the home page should be created just like the other landing pages focused around a problem your web visitors are facing.
    You see. When you start creating the landing pages you will find that there is no way to create a landing page without knowing more about the web visitor, this causes you to break the landing pages down even more.
    Now you have to figure out exactly who you are designing the page for.
    We have the problem and the solution?

    We have the guy that knows about the problem but doesn’t have the first clue about the solution to the problem.

    We have the guy that has the problem and is aware of all the different solutions but he’s just not sure which solution is best for him.

    And there is another guy that knows about the problems and the solutions and he’s decided you’re the right product for him.

    All the pages are designed with the same goal. Engage the web visitor and get them to click through to the next logical step towards the sites end goal.

  17. #17
    SitePoint Member
    Join Date
    Jul 2013
    Location
    Hertfordshire, England
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First impressions are quite positive - it is simply laid out, it doesn't get too caught up with fancy design or navigation gimmicks to appeal and it tells you straight away where you are and how you can help. The problem with being too simple is that your brand perhaps gets lost in the simple message - i.e what make you special? It is a balance. I'd consider splitting the two main sections you have into two columns under the main text header that lead off to other content pages that go into more detail. This would eliminate the need to scroll the home page down which many people will not do. Good effort though, good luck.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •