Mobile app version of vmapp.org
Login or Join
Moriarity648

: Trying to fix layout of a homepage 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

@Moriarity648

Posted in: #PageLayout #WebsiteDesign

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)

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Moriarity648

1 Comments

Sorted by latest first Latest Oldest Best

 

@Nimeshi706

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)



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:


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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme