3

I'm learning how to use AngularJS (a Javascript framework used in web development), so I decided to throw together a website to test out some of its features. The website is mostly comprised of static, expository content, with a few examples of the framework's features in-action.

My problem is that the website looks really ugly, and I want to develop a more comprehensive understanding of exactly why this is so ugly. Here's a screenshot:

enter image description here

These are the steps I took to produce this somewhat hideous-looking website:

  • I looked through the Google Fonts database for a nice-looking, simple sans-serif font to incorporate into the project.
  • I wanted to find a balanced color scheme (I don't know anything about color theory) so I started with a simple olive green, and used variations of the initial color (based on its hue/saturation/lighting values) to style distinct sections of the website, navigation links, and headers.

I think the end-result looks pretty sloppy.

Are there any general tenets of graphic/web design that my website violates? Perhaps with respect to the text, color, and/or layout proper?

Note: The horizontal rule is especially ugly, but this was just a test to see if I could make a custom <hr> against a transparent background-image.

Improve this question
3
  • 11
    Dijon Mustard yellow is generally not a great color in a monochromatic layout, just my opinion.
    – Scott
    Jan 29, 2015 at 18:59
  • 1
    Coloring, padding, the fonts, lots of things could be improved. It might be better for you to read through resources here on GD and analyze it yourself before we critique
    – Zach Saucier
    Jan 29, 2015 at 19:12
  • 1
    Shadowed text must be some sort of CSS trick. Loose it. It's already bigger than everything else. The top text can be your light "mustard" shade (thankyou Scott!), the heading inside the frame can be plain black, or possibly the farkest possible shade of mustard.
    – Jongware
    Jan 29, 2015 at 19:29

4 Answers 4

Reset to default
5
  1. Try to not use border and hr to add style and color.
  2. Is more important the Content rather that the Design. Not confuse it. The Design is foundamental for the readability of the content. But first think at the content and after design over it!
  3. Keep it simple! Essential! = Fast Download
  4. Avoid trends. They will go away quickly, your site is forever.
  5. The colors are not ugly, they are unbalanced. Try new gradient or combination. Trust your taste and daring with colors. It'll do you good. I use https://color.adobe.com/
  6. is your design responsive? you think mobile first? it's a must for the future responsive web design
Improve this answer
1
  • I also think the colors are alright, it's very fancy actually to use olive, brown, khaki, oat, etc.. Good designers can do anything with any colors, as you said, balance is what's count. +1, that's all good inputs
    – go-junta
    Dec 24, 2015 at 17:20
2

Here is just my personal opinion, I would reference some of the websites which base on their design on typography, if you don't have any particular colour you want to use in mind, you can always just stick with black and white, although I am not saying you can't make a beautiful piece by using olive green colour.

This site may suffer with these problems: indistinctive look between tab-bar menu and body paragraph, can be solve by creating different style by using the same font (e.g uppercase, letter-spacing, bold, italic) outline drop-shadowed title make it looks too different from other content without integrating with the design as whole. May be h2 tag can be added for 1. the shttp service/ 2. expressions etc. in order to create a hierarchy for your content, I am guessing you use those little black dot mark for decoration purpose, then again this graphics are not related with your page design. Blue submit button is not working with olive green.

siteinspire.com I often go to this website for my research and reference when I starting doing web design layout.

slashfavorites.com for example this is what I have came in mind, if I am the one who want to re-design this, however this is only base on what I saw from your screenshot since I don't completely understand your website structure or design brief.

Improve this answer
1
  • This doesn't critique the site asked about at all...
    – Zach Saucier
    Jan 30, 2015 at 1:13
2

Good design is less about decoration and ornamentation and much more about careful management of spacing, fonts, and color.

Just as a starter, this design might be better if you removed or desaturated all of the color. Maybe just go grayscale. At the very least, the design won't get in the way of sharing your creation.

Improve this answer
2

I think that your choice of fonts and general layout was very good! The only things that you should change are the horizontal rule (kind of ruins the look) and the colors (the olive is a little bit drab...)

For the color scheme, I suggest visiting www.flatuicolorpicker.com. This website has a many nice colors to choose from and expiriment with! I used this website to choose the colors for my own website.

Also, I think you should add some images that have to do with the topic, in this case, maybe something like computers with code on them.

I hope my answer is useful!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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