1

I am trying to run a box-type theme for my homepage/FAQ. However right now the boxes just make the page look terrible. Could someone please offer me some example sites that use boxes/blocks for information, or suggest some different color palette's for me to use?

I primarily program so I am not very strong in visual design itself.

Here is a screenshot and as well as a url to the homepage. (this relates to JUST the homepage, no other pages)

Thank you!

URL: aawebapps (Note that the buttons will expand the box due to increased/decreased text per FAQ)

enter image description here

Improve this question
6
  • I'm afraid this question might get closed as it's very opinion-based. A couple of things though: How did you build this? Everything is wrapped in a lot of tables and that is not a good way to build modern websites. It also loads very slowly. Also, for your color palette finding needs I can greatly recommend Kuler.
    – gburning
    Jul 21, 2014 at 15:49
  • @burnso yea I was not sure where else to ask this question. It is in tables simply for bootstrap use-age, but this can always be changed. I am just trying to find something that utilizes boxes without making it all look awkward. Thanks for the link, I shall check it out.
    – Austin
    Jul 21, 2014 at 15:55
  • I understand. You might consider posting it to www.reddit.com/r/design_critiques . The community has its faults but mostly you'll get som decent critiques.
    – gburning
    Jul 21, 2014 at 15:57
  • @burnso Okay, I might do that later as I am sure all kinds of people lurk there to break down sites as well so I am skeptical of posting a public url, but will an image suffice for them you think?
    – Austin
    Jul 21, 2014 at 16:26
  • @Austin Add the "critique" tag to your question. you will be exposed to the relevant people in that way.
    – Simaar
    Jul 21, 2014 at 16:38

1 Answer 1

Reset to default
1

First off, I would say that you should follow the KISS (Keep it simple stupid) principle whenever in doubt. You have a lot of text to cover and the fanciness of the page is making it look horrible. Plus you text is too big to read.

What you want is a gird based website, There are lots of templates (both free and paid) out there for you to check out. Here are two examples of it:

RichGRID M5 Theme ,
30 Other grid style templates and if you want a running example, there is Cracked

Since you are a programmer my first concern is to solve your problem rather than telling you the basic principles of website design. Here is one way of doing it (Download the picture, I have put some other useful tips for you in there)

A better Gridstyle for your website

1) You have two menus, one primary and the other secondary, Push the logo from centre to left most side.

2) You will have to decide how much columns you want to show at full resolution of site (In example, I have done 3), on Lower resolutions/mobiles you will reduce them to two or one column accordingly. Divide the page according to those columns and use a standard unit of spacing e.g 25px etc.

Here is a snapshot of the page with Guidelines: Snapshot with Guidelines

3) Follow another successful blog to see how they use the different font sizes for different heading types. I will recommend TechCrunch for it. Your text sizes are way bigger than they should be.

4) Replace the background with a monotone or a very subtle one. which contrasts enough from your boxes. Its too messy to read.

5) Keep the primary and secondary navigation easily distinguishable and easy to find. In my design, I may have swapped your primary navigation with your secondary one but my point is keeping both of them different, Give importance to primary one.

And lastly, If ever you are faced with a problem of designing a website and have no experience of it. Using already available templates is the way to go.

Improve this answer
4
  • @Simaar_Charms Thank you very much! I shall take a good look at this tonight/tomorrow and get back to you. :)
    – Austin
    Jul 21, 2014 at 20:31
  • Couple of questions, but first thank you very much, this is very beautiful and informative! Question 1. We are trying to slightly emulate the game's theme and layout in order to keep things familiar and understandable, thus why the Logo is hovering over the buttons and centered. The secondary nav menu is simply my way of trying to "condense" information. Each button only AJAX updates the text, so I was just trying to make the site smaller/condensed with this, it isn't really a second nav bar. Knowing that, would you still change the navbar like that? Check the site and see how those btns work.
    – Austin
    Jul 22, 2014 at 12:50
  • Question 2, Unfortunetly due to Twitter auto-building widgets I "think" the height/width are locked into that long vertical strip, if I cannot force the CSS to make it smaller, where should that go? Those are my two main questions thus far. Also, this is a webdeploy meaning the first load takes a second but then the application should be loaded up for you.
    – Austin
    Jul 22, 2014 at 12:52
  • @Austin Yes, You should still the keep the secondary navigation menu, what you did is not a standard. those boxes are meant for a single type of information, not to act as a mini page. Secondly, Condensing won't help if it adds to the confusion for the user in the end. As far as question two is considered, Push it to the right most bottom and let it take the space it needs, In that way the rest of the page will look symmetrical.
    – Simaar
    Jul 22, 2014 at 13:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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