December 5th, 2017
The Design Process – Web2
The Grid Layout
One of the recommended steps in web development and design is the use of a Grid Layout. Not only does this allow the designer to work on an idea for a website, it also allows us a starting point for the site.
It allows us to achieve consistency and effectiveness when done correctly. Given the layout an organized feel.
This article does not delve into much of the basics of grid layout, such as Units, Gutters, and Columns. There are a great many resources out in the world wide web that can explain those basics for those curious. This article is strictly about the methods AVectoredPixel uses to create their great works of art!
In the past AVectoredPixel has strictly created designs in Photoshop and then went to work breaking that design down and setting it up for web.
One of the downsides of this was the amount of work involved in translating the site from PSD to HTML. Items did not always lay exactly where we would want them and there would be minor discrepancies between what we wanted to achieve and what was the final product. And at times we did not realize how much of a hassle certain layouts would be in the end.
Grid Layout however allows us to think of the basics before the design takes place. We are allowed to think of methods that make the website easier for the user to read. The readability and navigation of the websites is of utmost importance. It also allows us to consider all factors for the landing pages, such as where the most important information goes and what sort of issues a user might face when navigation our site.
We present our basic Grid Layout to our clients. This allows us to explain what we are doing and how we think the layout will effectively relay our clients needs.
Take a look at the following image and you’ll get a better understanding of how this step is crucial to development.
Personally between all 4 options we enjoy certain elements of each and can not choose just one! We enjoy the width of the header on option 1, but like the header navigation on 3. Somewhere between 3 and 4 content are we do enjoy, and likely will go for number 3’s content area.
With this in mind we can begin setting up our design in Adobe Illustrator and Photoshop. We also will being to setup a “staging” location on our website.This staging area will be strictly for the clients to be able to view their websites as it is being built. Clients will be allowed to access this location when we begin the coding and layout portion of the design process.
Currently http://avpstaging.avectoredpixel.com/ has been setup and you can see wordpress’ default default new install. If we were working on a static website and not a wordpress version, then a staging area would still be created. However it would be just a blank page that says “Hi!”.
The only thing we have to concern ourselves with now is the art and style of our new site!
Leave a Reply
You must be logged in to post a comment.