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.
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.
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 :).