# Website Design



## HaitiBrother (Feb 19, 2014)

I've been doing a little work on web-design, I dislike the bottom part text before footer personally, which I'll modify, but here's what I've made so-far:



My angle for this was a very simple, minimal design, easy to navigate, etc.

Please leave your comments/suggestions below.


----------



## HalfEatenPie (Feb 19, 2014)

Alright so I'm not trying to be a jerk or anything, this is purely me just being critical.

What you're going for here is called a flat design.  A minimalist approach to general design.

That's all and well, but I believe the following this can be improved.

- Place a border or something around the image.  Most pictures/images are (usually) vectors or images with solid colors (no real gradients).  The real image inside the design can semi-break it (unless it spans the entire page then by all means go for it).

- In Photoshop, everything looks fine, it looks simple.  Heck it's really easy.  What matters is how you break it down, how you code it, and how you put it all together.  

To be perfectly honest, I feel like that design is too simple.  Colors, while are pretty passive (sometimes not a bad thing), don't really add on to the design as much because there's nothing else.  I mean passive colors work very well if it was complementing something else (like another part of the design) but working off of plain passive colors for me is kind of a turn-off.  Maybe have the grey darker and the text darker, have the green brighter.

Also, make sure the font is web-ready.  It'll look pretty bad if navigation and all that remained as images (especially for incredibly simple things like that).


----------



## HaitiBrother (Feb 19, 2014)

Thanks @HalfEatenPie for the suggestions, I've taken in some of your suggestions, how about this?


----------



## marlencrabapple (Feb 19, 2014)

I tried to put together a minimal "flat" design like that a few weeks ago and ended up with a terrible web 1.0 esque nightmare. No idea how I screwed it up so badly. The worst part is the problem is purely visual. Markup wise its perfect, so there's nothing OBVIOUS that I can fix, it just looks "bad". I just have terrible taste in aesthetics I guess.


----------



## tchen (Feb 19, 2014)

Pay more attention to your padding and alignments.  Why center the block and then left-justify the body and miss-align the whole thing?

Minimal means you're going to have to focus and clean up on these basics more.


----------



## marlencrabapple (Feb 19, 2014)

tchen said:


> Pay more attention to your padding and alignments.  Why center the block and then left-justify the body and miss-align the whole thing?
> 
> Minimal means you're going to have to focus and clean up on these basics more.


What's the best way to vertically align text elements relative to each other? For example, how would I properly vertically center navigation links with a text heading? Obviously I could screw around with margins and padding, but fiddling at random isn't the best solution.


----------



## shovenose (Feb 19, 2014)

Well, it is Starbucks colors


----------



## tchen (Feb 19, 2014)

marlencrabapple said:


> What's the best way to vertically align text elements relative to each other? For example, how would I properly vertically center navigation links with a text heading? Obviously I could screw around with margins and padding, but fiddling at random isn't the best solution.


The only sure way is to put them in the same div.  Look on this page itself.  div#logo and div#primary_nav are children of the same div#ipbwrapper.


----------



## Amney (Feb 21, 2014)

So good.


----------



## NodeKid (Mar 4, 2014)

http://fltdsgn.com/

http://vandelaydesign.com/blog/design/25-incredible-examples-of-flat-design/

http://www.pinterest.com/search/pins/?q=flat%20design%20web


----------

