Rebuilding Barn21: Preliminary Sketches
24th January 2018
As outlined in the introduction to this series
, I’ve decided to rebuild Barn21 from the ground up. Alongside improving the site’s appearance and usability, the project will expand my skill set into the domain of website design and creation. Through update posts at each checkpoint along the way I will describe my trials and tribulations from the project, hopefully providing entertainment, help, or inspiration to you, the reader.
The first stage of my plan involved sketching my initial ideas to explore their suitability, and creating a site map to establish a hierarchy of pages and visualise their relationship to one another. This fast, messy work has allowed me to improve my ideas on the fly, and define a loose visual concept for the scheme. Scroll down to explore the notes and sketches, which are listed in chronological order.
The site map is relatively simple, with only a maximum of 4 levels or so. I think it is going to prove invaluable when I start coding the site in order to maintain control over which links go where. After creating the sketch site map, I took to Microsoft Excel to make a digital version that I will be able to alter more easily if the site changes in the future. You will notice the website Wired
coming up a lot in this series, as it is the inspirational basis for my design. I highly recommend you visit it to get a flavour of how I want Barn21 to look and function.
The homepage will be the most important part of the site, with relevant links to all the other areas and an aesthetic that draws visitors in with a range of articles. As with my current blog, I am going to use a grid system. The challenge in creating an engaging homepage will be maintaining the order of the grid whilst also tweaking it to accentuate specific areas and reflect the variety of the posts.
From a personal point of view, the portfolio section of the site is also very important, as it is a chance for me to demonstrate my own design ability. Through the use of a quick animation, I aim to make this page memorable and unique, whilst also reflecting my own character and setting the tone for the rest of my portfolio. The about and contact page will use a clean and simple layout with concise useful information about the site and myself.
The photography section of Barn21 has a lot of potential to improve, especially the gallery view when a visitor clicks on an image. In my head I imagine a more elegant and light aesthetic than the WordPress gallery that will complement the minimalist design of the rest of the site. Also, since this year I am trying to improve my own photography ability I would like the category to play a bigger role on Barn21. Articles will look similar to the WordPress format, however with some slight changes to improve image proportions and text hierarchy.
One of my favourite parts of running Barn21 is creating the monthly music playlists, and whilst they are a bit of an oddball within the site I want them to have a similar, refined look. The vital factor in achieving this is how I deal with the Spotify player which will be embedded on the page. I have read that a white player can used as opposed to the standard black one which would be an ideal solution. I also want the music page to support the artists found on each playlist, so might include links to their websites or Spotify page somehow.
These two pages show my ideas for the loading gif and homepage modules which will fit to the grid system. Using a variety of modules will increase the interest on the homepage, differentiate between categories and allow emphasis to be placed on certain posts. A feature of other sites I would like to replicate is a subtle animation that executes when the mouse hovers over an image/link, for example a slight zoom into a photo or a spinning music record. Designing a unique loading icon for the site seems like a fun creative project, and it will increase the unity in the design as well as making it more memorable. I have no clue how I’ll embed it in the html code, but we’ll cross that bridge when we come to it.
Organising the order of posts on the homepage is particularly difficult because I want to achieve a balance of recent, random and popular pieces. It is vital that my regular series such as Barn21 Music and the Architectural Trio are always on the homepage, and I am also going to shamelessly plug my own work with a link to my portfolio. The footer will have a simple design so as not to detract from the images on the site, with useful social media links and a link to contact me. I have decided not to use infinite scrolling as I think it can appear a little basic and unprofessional, and it would render the footer essentially pointless. Instead I will either use a pages system or rely on the use of category links for navigation of the site in its entirety.
With the preliminary sketches complete, it’s time for the most fun and familiar part of the project, the visual design mock ups. These will be my guides when I begin coding the site, so I must ensure they all match the desired aesthetic. Check back on Barn21 soon for the next update!