Rebuilding Barn21: Visual Design
2nd February 2018A few days ago I completed stage two of five in my project of rebuilding Barn21 from the ground up. If you have not yet read the introduction or my summary of stage one, preliminary sketches, I would urge you to do so to get a feel for what I’m trying to achieve. Essentially, I am unhappy with the current design of the site which is constrained by WordPress themes, so I am learning to code websites in order to recreate Barn21 exactly as I’d like. I started the project in December 2017 and have assigned myself a deadline of June 2018. Hopefully if you’re reading this after that date the site is designed beautifully and an absolute dream to navigate.
Over the past few weeks I have created mock-ups of all the different pages on the site, which will act as visual references when I begin to write the html. As the project develops I will likely tweak the visual design depending on the difficulty of the coding or when I realise more successful solutions, however I am happy with the unified aesthetic shown in the mock-ups so would like to maintain the overall look and feel. I used Adobe Illustrator to create the images in this article due to my familiarity with the programme. Also, since it uses vector based graphics instead of pixels, it was more appropriate than photoshop for representing the modular layout of my design. In this article I am going to explore the visual design of the site and explain some of the rationale behind the decisions I’ve made.
HomepageThe design will make use of a grid system to display the different posts. As new posts are added the system will shift the positions of each module loosely from left to right. The latest article is given precedence on the homepage with two tiles of space. The most recent music playlist will always sit below it as shown in the mock-up, with the background colour changing from month to month. Alongside the “most clicked” list, a link to my portfolio will also have a relatively static position since I want to use the website to promote myself. Ideally I want to code interactivity into the site so when the mouse hovers over images they zoom in a little, however I’m not yet sure how difficult that will be to do.
The header is simple and clean with the categories displayed in a banner for easy navigation. The logo and site title will also be an everpresent in the header along with a search bar (which I have a feeling will be tricky to code).
Post GridThe post grid layout will be responsible for displaying in chronological order the posts in three of the categories: architecture & design, travel and technology. Whilst the images are all square in the mock-up, in reality I want them to maintain the original image proportions. This will add spatial interest as the posts stack and more accurately represent the images. When a particular category is selected, its name in light grey will appear beside the logo in the header, clarifying the location for the user. Also, when the mouse hovers over a category in the header it will be underlined in red. If possible I would like the underline to be animated so it starts in the centre of the word and gets longer on each side; we’ll see if that’s possible.
Photography GridThe photography grid is almost identical to the post grid apart from one small detail. Since the photography posts will open as galleries instead of articles I need a way to differentiate between single images and photoseries. To solve this potential confusion, photoseries will have two offset boxes behind them, making it clear they are part of a set of images. When the mouse hovers over post titles the text will turn red as shown in the mock-up.
Music PageThe music page is a little different to the others since it contains a different media. The playlists will be displayed in a chronological list with the featured artists beside. I want the band names to be clickable, taking the user to either the artist’s website or Spotify profile, for example. I have chosen to display the playlists in this way so users can easily listen to them one by one without having to navigate to a new page. This will make it easier for people to listen to Barn21 as background music. A paragraph at the top of the page explains Barn21 Music, whilst a block of text below the title of each playlist allows me to add a small personal message.
Portfolio PageI want the portfolio page to showcase my creativity and also be unique compared to the rest of the site so it will be memorable. Currently my favourite idea to achieve this is to “handwrite” the text in the first image as an animation, before fading into the following image. By clicking the message you will be able to see the pdf version of my portfolio in the browser or download it. Hints to posts that are directly related to my work or studies will be visible at the bottom of the page, prompting users to scroll down if they want to explore more. The format of these posts will mirror the standard post grid.
About & ContactThis section will contain a little information regarding the website and myself. I think it is important that the site has a human aspect to make it more personal. The text will be succinct and manageable, only containing the most important and relevant information. This allows the contact module to be partly visible without any scrolling which is important in terms of functionality. Whilst they are not on the image above, I may also include Twitter and LinkedIn icons somewhere on this page.
ArticleThe article template I have designed is relatively standard and will be used for the majority of the posts. I want to maintain the clean aesthetic found on the navigation pages. One feature of this mock-up that is unsuccessful in my opinion is the title image in the header logo; it looks a little messy so I will probably remove it in the actual site. I still need to work out the text sizes and fonts for elements such as the headers and captions, however this shouldn’t be too complex. Another aspect which I haven’t yet decided is whether image captions will appear in the article or only when users click on a picture. Despite some initial research, I am still a little hazy about how to create galleries. A column on the right hand side of the page will contain two or three related articles.
The gallery in an article. Image by Barney Sheppard A solo gallery post. Image by Barney Sheppard A gallery post with multiple images. Image by Barney Sheppard
GalleriesThree gallery types will be displayed on Barn21 depending on the situation, and each has its own subtle nuances. The first is the gallery which will appear when users click an image in an article. When this happens, a caption will appear beneath the picture and the user will be able to move between the other images in that set. The second gallery type is an individual photograph in the photograph category. It will open from its parent navigation page directly, with any written information such as titles or descriptions appearing below the image. The final gallery is that of a photoseries in the photography category. Like the single photograph it will open from the relevant navigation page, and from there users will be able to move through the series of images. I am currently considering how to display both the summary text and individual captions in a refined way.
Loading PageThis animated icon will appear when the main body of a page is loading. In order to increase the unity within the design it incorporates the Barn21 logo. Whilst I am not sure how I’ll implement this feature when it comes to the coding, I’m sure I’ll work it out.
FooterThe footer contains only a little information because nowadays they don’t tend to be used much for navigation. Alongside some contact links the only other clickable feature is the “return to top” button, which will scroll the page back up to the header. The footer acts as a bookend for the page, notifying the user that they have reached the end.
Now that the visual design is complete it is time to start coding the site. This will likely take months, so I will probably create a few articles documenting my progress. I am excited to begin learning and also little apprehensive, right now it seems like a big challenge. Wish me luck, and check back soon for more!