2

I am a programmer, design is not my forte. I attempted to create a design and am stuck on where to continue to with colors, location of pieces, text choice etc.

Here is the website so far: Design (for some reason the text in the banner changed)

It is supposed to look like so:

enter image description here

Some questions:

  1. What could I do to make it more visually appealing?
  2. Where should I put main page content?
  3. What is a good way to work with black and white contrast while keeping eyes at minimal strain?

Could you provide me with some expert advice for how you would go about changing the layout?

|improve this question
  • 1
    The first question I'd ask is "what is this site about and who is it for?" I get that it has something to do with Kayaking, but that's about it. I'd think about the primary message you want to communicate on the home page first and foremost and work from that. – DA01 May 2 '14 at 6:11
3

Layout Thoughts

This layout may have been fine last decade, but these days it screams amateur. It doesn't take much to rearrange this layout into something neat looking, current, and dynamic. Something that will leave your customers impressed, rather than wondering whether or not to trust your service.

Faults in this Design

Cold and Dark: For a site like this, forget it. A generally positive color scheme will be far more effective in the area of gaining the trust of your visitors.

Boring Header: Let's get creative. A basic text header with an icon-free navigation on top of a simple image might be alright, but heck, you can do better, I know you can!

Design Improvement

Content is king. Everyone seems to agree. However, all of the content in the world is still shaky without a solid design to back it up. Especially for a small company or brand.

That means that you can throw in fifty great customer testimonials, but without a design that says "I'm professional, organized, and worthy of your business.", they won't matter much at all.

Suggestion:

A layout for your header that incorporates:

  • an enhanced, more creative version of your picture, featuring various curve and filter alterations.

  • a dynamically positioned setup, featuring a fixed header with a scroll-and-catch body div, stopping with the title and navigation at the top.

  • A full-width, light colored page without the black background.

Home

enter image description here

Transition (with scroll)

enter image description here

Catch

enter image description here

Conclusion

By no means do I suggest that this is the perfect layout for you, but I do implore that you Google "Best Websites 2014" and have a look at what great designers are doing in web design. It may offer you the spark of creativity needed to improve your design in a way that you like.

|improve this answer
  • beautiful! Can you send me a link of how to get that picture effect? Also a link to that font would be great! Love it! – unableToCompile May 10 '14 at 16:35
  • 1
    @unableToCompile Font: dafont.com/tiza.font Image Edit: Duplicated the image twice, for three identical layers. Ran a Gaussian blur on the middle, cleared the kayak area of those with a mask, leaving the first, non-blurred layer visible in the center(so the kayak stays clear), and finally I used a splatter filter on the top layer, and made it transparent based on what I wanted splattered and how much, and what I wanted blurred. You can do it a thousand ways man, make it your own. Finally, some color and curve adjustments go a long way in any image. Good luck – CuriousWebDeveloper May 11 '14 at 10:38
  • I attempted this somewhat and am unable to make it as good as yours, Here is my attempt Can you recreate what you did using the original image here? I need the image to be large enough for the web main page, also no text would be great. If you can do that I will be forever grateful and could offer you something in return :) – unableToCompile May 11 '14 at 18:53
  • @unableToCompile Actually, your version is very good. If your title blends with the background too much, the only thing left to do is to increase the strength of the Gaussian blur and mess with the opacity of that layer. Mainly though, yours is almost exactly the same. If you'd like to do something else with it, make a critique question for the image stating that you want it to appear more vivid, or whatever it is you're aiming for. Good work though. – CuriousWebDeveloper May 11 '14 at 19:50
  • @unableToCompile one more suggestion I have is that you either create, or hire a designer to create a really good icon representing your bsiness to sit to the left of the title. If you aren't good at making icons, don't just wing it. Go to deviant art, find artists that you like, and ask them for quotes. You're looking at between $30-$100 for a really nice one that will allow you to start earning some consumer recognition for your company. – CuriousWebDeveloper May 11 '14 at 19:54
2

If I were to judge the purpose of this site based on its appearance, I would say that it is a photography site. Is this what you wish to convey to your users? Yes, pretty much everyone can appreciate beautiful pictures... but unless that is what your users are coming here for, it should be deemphasized.

One thing that really stands out is that the margin to the left of your logo is noticeably larger than the margin to the right of your navigation element. If you squint (or open the full version), you can see the guides from Photoshop showing how the elements should line up with other content on the page:

enter image description here

Your logo should be an image. You've clearly put a lot of effort into adjusting the positioning of the elements involved, but it's just going to fall apart when someone either has a non-default font-size or is using a browser that doesn't support custom fonts. Not all browsers render custom fonts well, either. An image would eliminate all of these problems. Though if you want to allow your logo to scale gracefully, you might want to consider using an SVG.

|improve this answer
0

Go bigger. - Your text and logo get lost against that huge picture. Leave some breathing room around everything.

Don't add the CSS for the background colour to each individual element if they're all going to be the same colour. Add a gradient to the body itself, that's so subtle you don't even know it's there until it's pointed out to you.

As stated by many others though, content is king. You must understand that, and focus on it. Make sure you've got plenty of text to justify the need for 6 pages.

enter image description here

|improve this answer
  • Why do you think negative margins are a no-no? It's the only way to accomplish certain techniques, especially when you're looking at responsive designs or where you have content of unknown sizes. – cimmanon May 2 '14 at 11:25
  • I thought we were talking about negative margins? Individual CSS properties cannot be "semantic" nor can they be "unsemantic". I agree that the logo should be an image but my reason has nothing to do with semantics and everything to do with having it render faithfully everywhere. – cimmanon May 2 '14 at 14:28
  • So the problem is mixing relative font-sizes with fixed width margins? That's not a reason to not use negative margins, its a reason to use consistent units. – cimmanon May 2 '14 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.