Does my very ugly website violate any general tenets of graphic design?

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.


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. I often go to this website for my research and reference when I starting doing web design layout. 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.

Source : Link , Question Author : alex , Answer Author : Untitled

Leave a Comment