Website Design Tips – Wireframes and Grids


November 4, 2009

Designing your website from scratch acne be very challenging and it also makes sense ,when designing it is always a good idea to have a hand drawn sketch of your website design before you start creating the real site with your favourite software whether it be photo shop or what ever software you are comfortable with. Why using wireframes is good this gives you the freedom of expression and no need for a mouse or any graphic software at this moment using pen and paper has its advantage no need for any bulky computer to take around with you.

What do i need for my wireframes a pencil, paper and may be an eraser for any correction that needs to be made and don’t forget your A4 size paper or even A5 the choice is yours, i like using A4 paper because of the ruled lines this acts as grids for my guidelines when sketching.

Using Wireframes

The term Wireframes are often used by website designers when designing websites and can mean different things to different people but this is just the neater versions of sketching this then let you have a better understanding of what the layout of the website looks like before adding the contents,another good idea using the grid system this could either be one you created or one that is already  being around like the 960 grid system.

When designing websites with dynamic content the job at hand becomes a little bit more complicated because you are no longer designing pages you are now designing a system creating a website regardless of the level of skills you posses ask any website designers there is one piece of tool you will always need a “Web Browser” don’t worry it is a free tool this is where your finished product will be seen so it is only good practice to use your web browser throughout the design phases.

When i started designing my first website i started reading lots of Website Designing Tips and sketching i was not sure where to start then it darn on me to look at a website which was already up and running, What i learned from this was amazing i finally understand how the pieces were put together .never be afraid to think outside the box this gives you ideas and remember it is your website you don’t have to blend in you can stand out from the crowd.


20 thoughts on “Website Design Tips – Wireframes and Grids”
  1. You are correct that designing a website is very challenging.Your article is very informative Gary , thanks for explaining about wireframes and grids. No doubt that you have done nice work on designing your website.I think every webmaster / blogger should have a basic idea of web desiging.

  2. That is one thing i learned earlier on shabnam as website owners and bloggers running on small budget we must know the basics of html and css this will save us money and time

  3. Yes bro just trying to share some bits and tips with the community i always believe in helping on hand wash the other

  4. grid system really help me a lot in designing theme especially in term of time. no longer need to repeatedly write something similar, from div to div..

  5. Above tips are really very helpful for me.I will use them in building my own website.Thanks for sharing them.

  6. The beauty of these blogging engines and CMS platforms is the lack of limitations and ease of manipulation that allows developers to implement rich content and ‘skin’ the site in such a way that with very little effort one would never notice what it is making the site tick all without limiting content and effectiveness.

  7. If you don’t know how to code something in addition to creating a great design and layout, you aren’t a web designer. You are simply trying to design something you know nothing about – and that is a very bad thing. A website is a complete package & each part must work efficiently and effectively together.

  8. Interesting post. I’ve never heard of the use of wireframe grids in designing websites. I prefer to just dabble and see what comes out, refining as I go along. I’ll have a look at this approach though, anything that saves time is well worth a look.

  9. hi,
    simple line drawings that show the placement of elements on a web page. Learn the focus, … layout. grid method.

  10. Nice and informative. It is what really make the design easy and time saving.. Thanks for sharing your tips…..

  11. You are absolutely right. Designing a website is not an easy task at all. You need more than enough knowledge of each and every software or tools that you are using to design a website. You should have idea about how your website will look and then after you should start designing your website. And the most important thing is that you should use the tool or software with which you are comfortable.

  12. Hi very informative and good post.One way in which web designers give order to design is by using grid systems.Wire framing is also an important part of the design process, especially for more complex projects.Thanks for sharing a valuable post.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Good things come to those who sign up for our newsletter
Join our email list to get the latest blog posts straight to your inbox
Give it a try, you can unsubscribe anytime.
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.
Get the week’s best articles right in your inbox
Join 15K subscribers
Verified by MonsterInsights