Why do people keep telling me my site looks awful?

Question

I've developed a website, and recently was looking for a job. Practically all interviewers, after taking a quick glimpse at it, told me my site was designed awfully (but liked the concept). I should mention I'm a software engineer, but I'm really trying to get the design part right as well. I've been trying to redesign it, but have no idea what's there to change.

Here's how it looks now:

I'd really appreciate any tips specific for my site, or on how to improve a site's design in general (I've visited some sites that explain how to design sites, but that doesn't seem to help :) ).

Edit 1: As I said, people tend to have a bad impression of it just by having a look at it, even before I introduce the functionality. That makes me think there's something wrong with the colors I picked or the layout. And I was thinking a specific site design can be helpful for designers out there, just like a specific story is educative for literature students, and specific algorithms are helpful for software students. Thanks.

A side note: Functionality: If it does matter, here's what the site aims to accomplish (very briefly): Users can add topics, and for each topic add questions together with their answers. The site create "tests" and "quizzes" for users to take and compare their results

Edit 2: Here's another printscreen:

Edit 3: Just to be clear, non of these screenshots are my landing page. They are topic-specific content pages.

Answer 1

First of all I want to emphasize that everything in this answer is just MHO, not some universal truth ;).

As a software engineer, you know what an important thing in every project it is to have a clear and well defined structure – the order. Pretty much the same is true for “visual” arts and design. I tend to see design as “visual encapsulation”. The designer knows the structure of information he / she wants to pass to its target audience. For instance: he designs a book. He knows this book is divided on chapters and each chapter into subchapters. He knows the main matter is annotated by some notes (margin notes, footnotes, sidenotes). Now he must use his “arsenal” to make this structure “visible”. He can use one font size and shape and fill all consecutive pages with a blob of glyphs, but that would mean the reader would have to read, interpret and understand everything to know the contained information structure. The designer can also “suggest” to the reader the importance/level of various pieces of information. One of the tricks is to use font size to show the gradation of the presented “data”. If this is done, the reader won't have to read (let alone interpret) text to differentiate between main matter and e.g. footnotes. The importance and reciprocal “position” of information is “described” visually. The reader is able to “decapsulate” information easily. One can also see it as a kind of serialization / deserialization process taking place in the visual domain (abstract information is cast to “visual” space). That's a greeeeat simplification but I think for starters it's good enough.

Now, as for your design. I, personally, don't know where to start looking at it. I have to read it all, understand it all, think about it all, and then put things back in the order I think is right. That's a lot of work for me as a reader. It's hard to define what's most and what least important here in one glimpse. Even when I'll take my time to get to know the content, still there's not a lot of visual “landmarks” helping me to find a way to some specific data. Think: when you leave your car at the lot you're looking for some “landmark” to help you to remember where your car is. Try to think for a moment how you use websites, how you are able to remember where are the options / links you're using the most often. Isn't it that you're looking for a link as a “second square to the right from this red logo in the upper part of the site”? No reading – just remembering image / location.

I think the biggest problem here is not the “uglyness” — I think it's the lack of importance gradation. Try to “lead” your website visitor through your data. What do you want him to see first? Where to go from there? This way you're creating “a readflow” / “a workflow”. You induce (incept maybe? ;)) a specific path which your readers will follow. If there are a couple of routes, try to make them as separate as possible (e.g. a “path” trough the menu – something like a table of contents / main overview / structure description, a “path” trough the login form, etc.). I think that if you'll fix this, your design will definitely improve. Maybe it won't get “beautiful” right away, but at least it'll be more accessible and comprehensible and by that, as a side effect, more pleasing aesthetically.

I hope that makes some sense to you :).

Answer 2

A few things that I notice that I don't particularly like are:

• This looks more like the "back-end" or "admin" part of a website, particularly some form of content management system, rather than the "front-end" or what people see. In particular, PhpMyAdmin pops to mind.
• Inconsistency in colors being used. The logo (which I find is a little bit too cramped) already has some colors in it, so those colors can be used to develop a color scheme for the site. This color scheme should apply to things like the banding for the tables, the color for links, and so on.
• There are too many contrasting visuals. I usually advocate more simplicity and standardization in design. However, in this screenshot, we see:
  • The "Everything" box is a hard right angled box.
  • The sidebar navigation uses rounded corners.
  • The subtopics uses a radial gradient.
  • None of the boxes have sufficient "padding": Note how cramped the words in the "subtopics" links appear; they would look much better if there were some space around them.

Then, definitely carefully read the answer from @thebodzio, since it is very accurate: A new visitor to the site would have a difficult time knowing where to look first, and that is generally a sign of "bad" design.

Answer 3

There are a few good answers here, so I'll point out a few concrete examples. For me, the basic structure of the page looks decent; as others have said, a three-column layout has been a staple of web design for years. Most of the problems are with the graphic design.

Having said that, the relative importance "Sub Topics" seems odd:

• Should the title be something like "Sub-topics"?

• It's off to the right and looks more important than the topic header; perhaps you could incorporate it into the main topic body to make it feel more subordinate?

• The weight of the "Sub Topics" heading makes it seem heavier (more important) than the topic breadcrumbs.

For graphic design, you can ask yourself about the basic principles for every element of the page:

• Contrast: Elements that aren't the same thing should look different enough that your users can immediately tell them apart.

• Repetition: Designs only look good if things that are the same look like it. In other words, aim for consistency. That might take the form of all your backgrounds having the same saturation and lightness, but varying in hue, or using gradients on all headings (or not using any gradients). For example:

  • the "Sub Topics" background is the only one with a gradient (the button is a different thing, so having a gradient on it makes it look different, bringing contrast into play)

  • the navigation highlight on the left has rounded corners while most other elements have sharp square corners

  • the colour for "Quiz Preferences" (spelt wrong) doesn't appear in the logo, which you were otherwise trying your colours to; try to get the same hue for page elements as the colours in the book

(In fact, there's an easy way to make sure that colours go together: start with a single colour then vary only one of hue, saturation or lightness. All the colours you generate by this method should look good together.)

• Alignment: Alignments make the elements connected into a whole, rather than looking scattered and incoherent. For example:

  • the "Remember me" box is lower than the other text next to it

  • "Quiz Preferences" is further to the right than the topic breadcrumbs above

  • the preferences are centered, while most other body text is left-aligned

• Proximity: bringing objects closer together makes them grouped in your user's mind, though leaving too little space around objects makes them cramped and difficult to see as individual items. For example:

  • there's no space around your topics breadcrumbs or the sub-topics (to my mind, this is one of the most common features that tells me that the graphic design hasn't been fully developed)

  • the spacing of your paragraphs below the main body heading is inconsistent

There's plenty more on design principles out on the web, but these are four of the most important.

Answer 4

I think the main problem with your site's design is not so much with graphic design as with user-interface design. Specifically, when I look at your screenshots above, the question I ask myself is not "Cool, what should I try first?" but "What the heck is this, and what am I supposed to do with it?"

This is a common issue with websites and other user interfaces designed by engineers (or other domain experts): they already know how the system is supposed to be used, so to them, everything's fine as long as all the features they need are conveniently accessible. Alas, this often leads to all the features being equally conspicuous and accessible, giving the new user very little clues on where to start.

Graphic design does have some effect here, insofar as bad graphic design can make any user interface confusing, whereas good graphics can enhance the user interface by making the meaning and relationships of different interface elements clear and drawing the user's eye to the most important elements. But fundamentally, the problem is more about what to present to the user and how to structure it than about how to make it look nice.

---

OK, let's get a bit more specific. My first piece of advice would be: simplify! You might want to take inspiration from Google's original front page design, which basically had three elements: the logo, the search box and two buttons (and one might argue that the second button was unnecessary clutter). Oh, and a few links to other pages with more stuff — which were clearly marked as being of secondary importance by being lower down, in a small font, and/or in gray — and a copyright notice, apparently added as a subtle hint to users that the page really did end there.

Or take a look at Doodle, another company with a noodly name and a simple but effective front page design. For convenience, I took a screenshot of their front page and added some red scribbles on top:

Doodle is a pretty good site to compare yours with, since their site, like yours, is basically a framework for allowing users to design their own content (quizzes for you, event schedules for them) and invite other users to interact with it. The big difference is that, unlike your design, the Doodle folks spend a lot of effort easing their users gently into the interface, instead of just tossing them into the deep end of the pool and waiting for them to sink or swim.

Looking at their front page, especially without my scribbles, the obvious thing about it is how little stuff — especially irrelevant stuff — there is on it. Sure, there's a whole bunch of little notes and links at the bottom of the page, but that's all "below the fold" and something new users will just ignore. The second most visible thing, in big friendly letters right where the user is likely to look first, is an eight(!) word blurb explaining what the site is about. The most visible thing is the big graphic showing, in simple pictures, the main steps of the workflow, making it all look easy and inviting. And right between them is a big button inviting the user to click it and get started.

In fact, in the top part of the page, there are only four clickable things (excluding the logo, which is clickable — as users expect it to be — but just takes you back to the front page): two links to the first step in the event scheduling wizard, one to a canned example for users not confident enough to jump right in, and one unobtrusive link in the upper right corner that opens a pop-up login dialog for established users. That's all.

---

So what about your site as it is? The first thing in your screenshot that jumps out for me as something that might possibly be worth looking at are the green headings, which at least are short, in large type and in the middle of what looks like the "content area". Alas, there's nothing much of interest there — the "Topic Information" section just has some trivial metadata that should be in small print in some corner, the "Sub Topics" section has a couple of links (to other similar pages?) which appear to duplicate those in the top right corner, and the "Resources" section is simply empty. And besides, even after reading all that, I still have no idea what the site is about or what I can do with it.

So, what can I do with your site? Well, you say that I can create and take quizzes, so how about putting some big and attractive-looking links/buttons on the front page that say "Take a quiz" and "Create a quiz"? (The former should be more prominent, since a new user is presumably more likely to take a quiz than to create one, but including the second one on the front page at least lets users know that they can do that too.) Also, a short explanation — from a few words up to a short paragraph — of what your site is about would be good too. (That could also be a good place to tack a "read more" link onto.)

Or, looking at it from the other side, what can you afford to lose from your current page? Well, I'd really say "most of it", but the obvious thing that jumps up (besides the metadata dump) is the login form at the top. Sure, it's good to provide established users with an easy way to log in, but that doesn't mean you have to actually show the login form on each page. Instead, do it the way Doodle does and just have a pop-up login form accessible through a link. (For users with JavaScript turned off, it's a good idea to also have a separate login page as a fallback target for the link.)

There's a bunch of other things you could lose too: for example, as a new and unregistered user, why am I seeing what looks like a "delete" link? Can I really delete the page? If yes, why? If not, why is the link there?

Similarly, the "(703 Available questions)" note is a pointless distraction where it is, as it looks like an interface element. If you want to impress visitors with the depth of your site, put that where it belongs: in a suitable impressive looking blurb in the content area. ("We already have 703 questions available, and more are coming!")

Finally, I should note that everything is relative. TV Tropes, for example, has a horrible user interface (much like yours, really), but it doesn't matter, because they make up for it with loads and loads of excellent and densely interlinked content, so that most new users won't have to touch the navigation interface at all. Actually, that's pretty common with wiki sites; Wikipedia isn't really that much better. The catch, however, is that you need to already have that load of content (or a user base committed to creating it) before that effect can start working for you.

Answer 5

Your "design" would be nice... in 1995. In fact it's outdated. It's a design that engineers always come up with :-) The easiest thing you can do is to use some css framework ie Twitter Bootstrap, Zurb, whatever. Framework helps you to protect you from your own "creativity" ;-)

Answer 6

From a layout point of view, there isn't anything really all that wrong with your web site. It's a standard 3 column layout with the logo in the top left. This overall framework has been in use for ages, and that's because it works. Most modern web sites still use similar principles, based on a handful of common layouts, but buried under much slicker graphics. (Be very wary of people who criticize based on how modern something is - just because a few years have passed doesn't mean how humans take in information is all the sudden wildly different.)

Some might quibble about whether or not the main navigation links should be on the left side or along the top, but those differences don't make or break a site.

No, the problem isn't with your choice of positions of things. It is with the graphics, colour choices, sizing of things, and so on. I differentiate the terms layout, which is all about placement, the design, which is all about feel and look. I'm not sure if everyone would use the terms in exactly the same way as me, though.

Having said your layout is essentially fine, but your design is problematic, is, unfortunately, the harder situation to solve. If your layout were the issue, we could give more concrete advice, like "move your search fields over here", or "place your logo there". Layout is really the implementation of usability.

The design, though, is about feel and style, which is of course much harder to comment on. While I can say that you've simply left a lot of the colour choices to be default (the background is white, the links are blue, very few interface images), it's a lot harder to say what colours and graphics should be there instead. It depends a lot on what kind of feel you want. Boring and safe blues and greys for a corporate feel, pinks and yellows for an innocent and childlike feel, hot reds and blacks for an exciting night club feel... And even then, just using those example colours won't necessarily lead to the feels I've attached to them. The devil is in the details.

There is some overlap between the more concrete layout issues and the more ethereal design issues, such as what thebodzio says in his/her answer about varying font sizes for headings and footnotes and so on, in order to emphasize importance and help guide the site visitor through the information you want them to have. You should heed his/her advice.

However, I'm afraid that if your goal is to not partner with a designer but learn yourself how to apply a compelling site design, you are not merely acquiring an answer, you're on a journey. There are about as many routes to becoming a good designer as there are designers, and tons of resources out there, so there's no lack of opportunity to learn.

For the shortest route to acquiring some design sense for this one particular site, I would look at other sites you like, and other sites that offer a similar service to the one you're making, and start comparing and contrasting what you like and about those and what is missing on your site.

Unfortunately, that's about as objective as one can be, and only the top most point of the tip of the iceberg. Hope some of what I've said helps, though.

Answer 7

Here is why I think people react negatively to your site: It raises too many questions!

Like you said, before you introduce the functionality. Which tells me people do not understand what it is about. Which should be the first answered question by the website. Because if it's on the web, you can't stand next to them and explain it.

"All the knowledge in the world" doesn't exactly communicate what you can find on the site (or isn't very believable for that matter) or why you should login. So, your design is percieved badly because it doesn't support answering those questions.

So, firstly you need to answer "what is this site about?". E.g. with a mission statement. It might be obvious to you, but not to everyone else on the web. What is the main purpose? Take quizes or create quizes? What is the first thing you want people to do? Login? Answer a quiz? Create one? These are things you should answer if you want people to remain on your page.

Then you should organize your information. What is content, what is meta (logo, navigation, login). Take a look at stackexchange. Content (light) is clearly distinguished from meta (dark).

Group the things that go together. You have breadcrumbs that are diconnected from the navigation. Visually as well as wording. I don't find "Everything" in the main navigation. How can I get there?

Why all this? The quicker people understand the information presented to them, the more likely they will stay and interact. If they are confused and confronted with questions that they cannot answer, they will react negatively.

Answer 8

Because it does. That was mean, wasn't it :) It was just a joke, my best answer would be to work with someone on the design part, if you don't have someone to work with get a freelancer, if that doesn't work also just start again from scratch, but try to keep things more simple, and allow the content to breathe...

Some first look tips/advice/recommendations: Make the h tags(Titles) fonts bigger than the p tags, much bigger(something in the ranges of title font size 30-48, and paragraph(11-max 13). Allow at least 20 px margins or padding between blocks of content(for example a maring-bottom:20px; for the login bar would allow it to be more separate and easy to read.

Get someone to design you a proper logo, the one you have now is... not good. Try different fonts, maybe a sans-serif font(like Open Sans, free on google fonts, or.. just Arial-Helvetica ).

Don't use gradients if you have no sense of colour just because its cool or just because it looks better to you, try to stick to plain colors and maybe at the end, when you are done try and experiment with gradients only on CTA(Call to action) areas(on the buttons for example).

There is a lot you can do... but these things usually come over time, you get a trained eye by looking at a lot of great designs and trying to understand how was that result produced...the best way to that is to try and recreate the same result yourself, in that process you will gain some knowledge and insight on why and how things are done/made to look/interact and experience UI's.

Book recomandation: Smashing Book [the first and the second book] and the website:

http://smashingmagazine.com

and another one: http://www.bamagazine.com/

Answer 9

Wow! You really generated a response! At least you know your design doesn't go unnoticed ;)

Here's the short answer to your question: The site looks like it was designed by a software engineer. That's what you do and I'm sure you do it well. Now you need someone who does UI design to make your idea approachable. There's no way around that. You aren't going to learn design in a weekend and fix the problem.

Find a student or young designer looking to fill out their portfolio and give them some freedom. You want someone who's work is clean and uncluttered for this project. See if you can find a designer who favors minimalism.

Answer 10

I'm not a professional designer, so from an user's point of view and from the experience of browsing various web-sites may I point out a few things?

1. The background colour of the page is white, but the section headers/highlights are in shades of yellow or white, you could try a little contrastive colours, you could design the level of contrast to match your element hierarchy(more high level header = more contrast) or an fixed header-content colour scheme (e.g. deep Orange as in the second page of the book shown in the logo for header, white for header text and dark-Gray for content-text).
2. Too much free-space in your page, free-space is good to give users a place to breathe but too much free space makes your page look like back-office/under-maintenance. e.g. the "Sub-topics" section in the first screen could have been spanned the whole space under "Everything" section. Also why two redundant sub-topics sections?
3. IMO distribution of content should come under a hierarchy. If you take any of the sites like Google code pages (which looks very similar to your site), Wikipedia or this site as an example, they all spend a significant amount of space for the site header, then comes the content. Also now a days many pages use a toolbar like header which has a distinct colour, general menus and the site logo embedded in it, but you may say your logo is too big to do that.
   Take the sub-topic section in the rightmost part of the page for example, do they really look like farther specialization of current content? Rather they looks more like random tags or related topics. You could reflect their hierarchy by making a tree-like structure like in various documentation pages, it would also make the breadcrumbs unnecessary. Also IMO the right place for that tree(navigation) would be in the left-sidebar and the rest of actions would go in the place of breadcrumbs.
4. Uniformity is as important as distribution. Your buttons can have different colours according to their purpose/importance. But their structure should remain same. Your "Login" button is sharp-edged while the "Take quiz now" is rounded-corner. You may want to get rid of either of those approach.
5. Links and actions are not same, you should name them accordingly, too. Like the "Delete" menu in left reflects deleted items or the delete action, can't be said. Give the users a delete button and a deleted item menu/tab just like in GMail.
6. Fonts are very important to reflect the purpose. If you are creating a art-page or any literature serif family is good for that, but to make an e-learning site you have to choose a font which is comfortable to follow in different sizes and has less augmentation(like elongated edges), Sans is good in that. Wikipedia uses it for example. The choice of size and weight is also important. Where statistics are important(and changing) make the numbers in boldface(e.g. 703 available questions). Like you've done for choosing number of questions in the second screen. Italics in headers IMO don't look good, why don't use boldface instead?
7. This is very much like my personal opinion but I think some more rounded corners would relieve users from the box-like feelings.

Answer 11

I'm a professional designer and developer. I think the most important thing to do with a design is to use a graphics program -- such as Fireworks -- to create a design before you implement it. That makes it easier to change things and experiment easily. Coming from a development background, I know the importance of that.

I don't know what positions you are applying for. If you are applying for a graphics design position, you may want to take some time to learn professional graphics design. If you are taking a development position, it may make sense to pay a professional designer a bit to make a nice design, or do a quick fix instead of taking months to learn.

If you want to do a quick fix, I'll try to give some specifics to get you a start. The answers here are good -- but they aren't very specific. I'll try.

Note that a variable width design is always a bit more tricky than a fixed width design. I think you're right to choose a 3 column design. The content is correct, the design isn't that great (in my opinion).

Here's what I would do (it would probably take less than a day):

1. Start with the logo. It looks very busy -> try to make it simpler. Use more vibrant colors; the yellow is dirty looking. Try a simpler font.
   • After doing the logo, you can match the site colors to it
2. Everything about the website should be "airy". So don't make things cramped.
   • the left column should be much wider. 1.5 times it's current width
   • the top should have more spacing around the login fields
   • the right should have the sub topics each on a new line. Make them have larger spacing around them so they aren't squished into each other
   • the sub table can use tons more padding on cells, the title divs can be padded more, etc.
3. The entire content should flow instead of being choppy. This means align as much as possible, use uniform fonts and proper sizes.
   • The center column "All the knowledge in the world" looks out of place with the rest of the content. Perhaps float it left, remove the underline, and for sure make it smaller than the title.
   • The page contents are not aligned. It would look better if you left aligned the sub contents with the sub titles.
4. The login fields on top can be done nicer.
   • You can put the labels inside the text input boxes (greyed out). That would make it cleaner.
   • You could make the remember me checkbox / font much smaller. It isn't the most important feature, so it shouldn't be as large as the important part.

This won't make your site the most awesome site on the internet, but it will hopefully polish it enough it would pass inspections. :)

Answer 12

wow... that is pretty bad lol.

I don't think you can learn to redesign something in a few suggestions if you don't have any sense of design, so really i think you should get somebody else to do the layout.. approach a local art college and see if a class will take it on as a real world example.

But failing that, here are my few suggestions. The index/landing page despite its name, needs to function more like a billboard or a magazine ad. It needs to convey its message FAST, in a few seconds. Note that I said "message" not information. The information needs to be there for when the viewer looks for it, but it needn't all be laid out like a slightly scrambled table of contents.

So, as for message... first thing to think about is WHAT are they looking at.. web page, yes, but web page of what? Even reading your categories, it's not clear to me what that page is.

The 'what' is it will be conveyed by color scheme, overall layout as well heading titles.

After you have solved the what is it question, decide what you want them to see first. My choice would be the Practice makes Perfect logo and i would increase the size of that and pop it out of the header. But you may have reasons to have them focus on something else or a call to action of some kind.

I am guessing that your most important thing is 'All Knowledge in the World" because you have centered it (bad idea) made it italic (bad idea!) and given it lots of space around itself (good idea). But except for the words themselves... it's not clear what that IS or does, try something more descriptive and less goofy.

Try to break the overall landing page into 3 design elements AND 3 levels of information importance. Ask yourself what is the FIRST thing they should see, FIRST thing they should do? what is second, third? and try to redesign accordingly.

Use fewer colors and have them make sense.. why 3 different clashy blues sprinkled randomly around the text??? Use more font sizes (!), again breaking this into 3s is a good start, LARGE font for most important, medium for secondary etc.

My last suggestion is do your design FIRST and well in advance of writing the code. I suggest starting with PAPER and pens or pencil to block out a page.. just quick sketches, do NOT write the actual words when you do these, just block in areas as you try to decide how large the content area should be versus the header, how big is the sidebar and so on.

Then do a more finalized design in a graphics program. MOVE things around and experiment with placement. Remember you are designing a page that needs to function like a magazine page. Make your viewer pause, try to SHOW them what you want them to see, try to lead them to DO what you want them to do.

And start LOOKING at and for design. Just LOOK. don't evaluate the content, instead LOOK for what messages are being conveyed by web pages. How do they use spacing, color, font size? Try to emulate good design. good luck

and consider the art school suggestion. graphic design programs are frequently looking for real world re-design projects for their students.

Answer 13

The main problem I glean from this thread is that you are more interested in debating and defending your "design" than you are interested in learning how to create something that is appealing. Typical of a software engineer. You think you can break the page down into component elements, test and vet these elements and then once you integrate the components you believe that the elements should mathematically enumerate a good design. Then you think that by posting this question that again you can chop up the page to components and argue the merits of each one and argue how it does follow what the answer provider has said.

Until you are willing to accept that you suck at UX you will continue to have this problem. As said above, graphic design is about feel. Graphic Design is not equal to engineering design. You can't mathematically construct something, integrate it with other "mathematically correct" things and expect a good outcome. You will never be good at UX (probably) because you simply don't look at the world the way a designer sees it. But if stop measuring your page and comparing it to something else - open yourself completely to learning realizing you know nothing about graphic design, then you might start getting it...