Website Design Tips – Wireframes and Grids

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. Avatar of Shabnam Sultan

    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. Avatar of admin

    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. Avatar of izzat aziz

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

  4. Avatar of Horse

    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.

  5. Avatar of Web Design London
    Web Design London

    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.

  6. Avatar of Basic Websites

    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.

  7. Avatar of sydney website design
    sydney website design

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

  8. Avatar of website design

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

  9. Avatar of Web Design Los Angeles
    Web Design Los Angeles

    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.

  10. Avatar of web design

    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 Comment

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.

Scroll to Top