Webdesigntuts+ |
| Posted: 22 Aug 2013 02:56 AM PDT  Now you know all about colour, typography and various things you should undertake before you start a design project, it's time to start getting down and dirty with some of the basics of working with grids in your designs.  Grids aren't just useful for us as designers or developers – they're good for the user, too. All through this session I've emphasised the importance of creating a good user journey and a good user experience through your designs – after all, the user is there to consume your content and you want to make it as good an experience for them as you can. Having a solid grid system to use in your designs (and then carry through to the development phase) will allow you to do just that, by creating consistency and familiarity (and thus building trust) in your design. If your website is well designed, a grid will help you to project that confidence further to your users – however consciously or sub-consciously that projection may be. Using a grid system doesn't mean that your designs need become boring or boxy, either. Just like it has been said with responsive web design, the responsibility is with you to create a design that is unique and has something different to it – and a grid system should be seen as something that will enable you to do that, rather than restrict you. What is a Grid System?
In its most basic terms, a grid system is a structure comprising a series of horizontal and vertical lines which intersect and are then used to arrange content. In even more basic terms (which make it easier to understand!) a grid system is a way of providing a system that designers can work with to structure and present content and imagery in a much more readable, manageable way. Grid systems have long been used in print publications, but with their introduction into designing for the web and the many, many CSS grid frameworks which have since popped up, they're now being used almost as standard. Using a grid system in your designs is one way to achieve a level of consistency that would be otherwise extremely difficult to master and to portray in your designs. Again, uniformity and consistency are key to creating a website that your users will find easy to navigate, read and understand. A good user experience is created by engaging with your user and building a sense of familiarity with them – and a grid system helps you to do that by providing a solid base that you can grow your design from.  Although your grid system is something that will eventually be invisible to your final user, you can use it to aid you in creating layouts for your designs. But, like all rules when designing (and sometimes when developing) rules are made to be broken. You might not necessarily always need to stick to your grid formation, but you do need to understand grid systems, before you can commit to breaking the rules. On the web we have many CSS grid frameworks available to us, as well as many tools available to roll with our own grid systems that we can create ourselves. It's totally up to you which of these you would choose to use when designing – for example, a CSS framework may be familiar to you as a developer, so you may want to try your hand at designing with it, too – but let’s examine why designing with a grid system is good practice, and also help to make your mind up with which grid system to pursue further. Advantages of Using Grid SystemsThere are many advantages to using grid systems – this can start when you're first designing the website but can also prove useful when you move on to the build and development stages, as well as when managing both the website's design and build in the future. The good thing about grid systems is that they allow you to design in proportions, balancing between all of the different elements that you might have in your design. A grid system should always be very flexible, so that you can almost twist it to your needs when you're designing the different parts of your website.  Using a grid system in your design also allows for that sense of uniformity and familiarity – whilst it may work for some sites to have vastly different page designs, for many it will not be the case and you will want to have a uniform and more structured feel to the main layout. This also makes it a lot easier when you come to code the design up, as it will mean that you can pick out the uniform elements in your design and apply this modular effect to your code and CSS structure. Disadvantages of Using Grid SystemsFor the sake of balance, let’s look at some cons.. First up, many people – particularly those who are new to design or designing with grids – may find that grid systems are quite stifling and restrict creativity. Unfortunately, this can sometimes happen and – pardoning the pun – you may sometimes feel like you're being prevented from thinking outside of the box and are instead creating very plain, clinical designs. In those sorts of instances, I would encourage you to try and step back from the grid – instead, play around with the elements on a page until they feel like they look like they're in the right place, and then switch to looking at your grid overlaying your design (we'll talk some more about that in a bit), and see how you can make your ideas work to the grid structure that you have. If it doesn't conform to that grid design, then it may be time to start working with another grid system or design instead. Grid systems are also really, really hard. Not only do they take a lot of willpower to get your head around the first few times you use them (though you'll likely have an "aha!" moment not long after some good practising and playing with them) but they can also sometimes involve a lot of maths and calculations. I'm not someone that ever copes well with doing much maths – so that side of things I can personally find very difficult. It's also really hard just to simply get your head around the concept of grids and how they can help your design – but hopefully you'll start to see the effect soon after using them in your designs, just as you will have likely done with your development practices somewhere down the line. And while grids are damn hard work, they're most definitely worth it for the end result. Using Grid Systems in Your DesignsHere are a few simple, practical tips for using grid systems in your designs:
AssignmentsBy now you should have a pretty good idea about grid systems, what they are and useful ways that you can start to use them in your designs. The next article will talk about how to go about choosing your grid system – and whether you choose to create your own, or work with a pre-made framework instead. In the meantime, I’d you to do some more planning. Quite a short little assignment really (you're getting off quite lightly here!) but sketch around in your notepads, playing with grids and layout. Think all about structure, using the columns as an idea to base your content around the grid. What you create might not be any good come the next morning, but it will at least help you to focus on thinking about grids and seeing what you can do with them in a throwaway format. Further Reading
 |
| You are subscribed to email updates from Webdesigntuts+ To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No comments:
Post a Comment