Site Thumbnailing and development

This morning I began to draw out a series of thumbnail concepts for my website. I drew out eight various concepts as wireframes, each showing the home page, about, portfolio and contact page. My aim in each concept was to explore utilizing the space to fit large imagery yet still have white space to achieve balance and breathability between the elements on the webpages.

I explored using various types of grids and columns to see what I felt would work best when it comes to displaying my portfolio of work. I feel that I am more drawn to the idea of having breaks of white space in between image elements, rather than having the images touching side by side. In my fourth concept, I played with having black negative space. Although this can be very effective, I do not feel that such a dark colour will suit the image of my brand, which I am already thinking of imbuing as a light, natural and honest personality.

This slideshow requires JavaScript.

I also think that creating balance by placing boxes of text amongst white or coloured space and alongside an image work well. I want my website to have a vertical scroll down system, like Facebook, because in this generation we are used to scrolling down to view more. Therefore, I have drawn all my concepts with this flow in mind.

As well as this, I have started to think about the interaction of my site. I am interested in applying fade in/over type animations to image boxes or text. After sitting back and examining all my concepts, I am thinking of developing upon the idea of having white space rest between the imagery elements to create a much more prominent grid and organized layout.

I am going to do away with tight grids and close-knit images. This idea would be very good if my portfolio work all married together due to the similarity of its content, however this will not be the case because I am looking at placing up photography, illustration and design work.

With these thoughts in mind, I drew up a more detailed development with an explanation for how each section could work. In this development, I have used a large hero image as the focus on my home page as well as on the introduction to each part of my portfolio: Photography, Design and Illustration. I have considered the use of white space by creating a boarder around the edge of my webpage; this will frame my site and keep the elements contained in an organized manner. The space between boxes will also create balance and breathability; the opposite of a cramped cluttered feeling.

site development page

By having sub-menus for each portfolio section (Photography, Design and Illustration), I feel that I am making my site more organized, clean and easy to navigate between specific topics of work.

The about and contact pages can be seen when scrolling down the main home page and when clicked on at the menu, will make the page instantly scroll down to view them for you. A footer page will be included to re-navigate users back to the top, as well as to once again display my logo and name and perhaps any widgets for other websites in the future, like an Instagram feed or Redbubble page.

I felt rather happy with the layout and functionality of my development, so then I began to look at templates on Wix to see if I could find anything with similar ideas to my own. After viewing about 30 different templates, I narrowed down my options to a select few. Below are my top final choices that I sifted through and played around with editing their layouts.

site template ex

From these twelve layouts, I found the ‘Prickles and Co’ template best suits the developmental idea that I have drawn out due to the large amount of white space I can work with, the hero image placement, the text placement and overall layout of this template. Now, I am going to move onto making a logo and establishing more of my brand identity before customising the template.





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s