Week 3 – Grid Systems and Layouts

Part of the research surrounding our campaign for the freedom festival is how effectively we can design a home page using a grid system to arrange certain assets. Through this research I have learnt how using this tool can be a great blue-print aid to organising text, image, buttons etc. in order to create an engaging website for the user’s experience.

Here I have looked a various other festival’s website homepage to see how a grid system would apply to a professional design. The majority of them conform to the rules where the main image and navigation bars sit nicely between the pre-determined columns. The Reading and Leeds festival homepage takes a slightly different approach where they have broken the constraints slightly by placing iconography outside of the grid layout to create a more dynamic feel to the design, however this still works as they have used their text and important information still sits within the borders to maintain that visual hierarchy.

I designed a quick mock-up of what the homepage for the freedom festival could potentially look like and used Adobe XD’s grid layout to to make sure each asset was assigned to its relevant column and that the alignment between them was even. I also took inspiration from websites that seemed to be more expressive with their placement as I think it makes for a more interesting viewing experience as the user. For future development I’ll increase the size of the main images to put emphasis on what happens as it’s usually easier to learn about an event visually rather than huge bodies of text.

I also looked at responsive design and formatted my website homepage to fit the layout that of a tablet and mobile size. This is important as many users will only see the website through their phone due to how widely used they are in comparison to a desktop in this generation. I tried to keep the same colours and iconography in the smaller versions so the brand look is cohesive but just shrunk the size down and included mobile-based buttons such as a burger menu and search button