Friday 24 October 2014

Content Gathering

Now I have my theme sorted (I had a little experiment with it and it all seems to be very easy to use and fully editable) I need to begin by gathering my dummy content to put within my site- because the actual content doesn't matter (aside from how it looks aesthetically on the page) I plan on getting all of my content from a variety of band and festival sites.

Content I need to gather:

Images

Images for the gallery
An image header/photograph to display on the Line-up page (one for each band 8 in total)
My image artwork to go on the home or about page
Merchandise images for the shop
A map for the where page
Logo/Logo Header
Possibly Venue/field/stage images
Food/drink/parking/ small header images

Text

Small intro homepage text
Snippets of news (taken from the band/musician sites)
Small sentences to go on the line-up splash page (taken from the band/musician sites) + links
Where - small paragraph
About- small paragraph

Plugins I need to include:

Although my theme may include some of these elements I'm going to list them I know exactly what I need to ensure goes into my site in order to fulfil the brief.

Ticket/booking system plugin
Paypal/shop plugin
Search bar plugin
Login plugin
Map plugin
Calendar plugin

Buying The Theme

I really liked the flexibility of the parallax theme so I decided to go ahead and buy it and although I didn't think the initial payment of £28.00 was too bad a fee I also decided to tweet about Themify in order to get an additional discount which took the total down to £26.80.

The Parallax Theme

The Parallax theme is a premium Themify theme- it is the one that I am exceptionally tempted to buy. I tried to use a free theme and got very frustrated by how hard it was to change and though was initially very against spending money on this project (it's not a live site, or a project thats really my forte) I think in order to generate a site that I can make into what I need (I can't code so its not like I can cheat by changing the code of a free site) then buying one is my only option. Before committing and buying the theme I wanted to first thoroughly scour the site options in order to determine what the features are and how much they can be changed as well as what is included within the theme itself. 






 Overall the theme itself seems to be very flexible but I think its made all the more appealing by the Themify features included below:





 The drag and drop builder included within the theme means that I can edit the layout and create my pages live on the actual site rather than doing it all through the page. The only widget that I think im going to have to include is a search bar which I'm hoping I can fix to the navigation.


Premium Wordpress Themes

Since I have done a lot of theme research and I know exactly how customisable the free themes are I have decided to look into some premium/ paid themes to see what they can offer. I realised when drawing out my wireframes that I would like to utilise some kind of parallax element within my site (some kind of scrolling front page that further enables the navigation to stick in place near the top). So I mostly looked for themes that contained these elements.


http://themeforest.net/item/move-responsive-onepage-parallax-wordpress-theme/6420454
$43.00
The theme above employed the parallax scrolling landing page element that I wanted to create- but it was a one page scroll theme- although I like the one page scroll layout (it makes it easier to design all the sections) after a discussion with Sue it was pointed out to me that One Page Scroll pages don't integrate as well with SEO and that it would be impractical to use for a large event site (it would work for a smaller event so it's still a viable option for my project) but I would like to find a theme that would provide both options (one long scroll and separate pages) or just separate pages.

http://themeforest.net/item/floyd-one-page-parallax-wordpress-theme/7081098

$43.00
Again the Floyd theme also used a one scroll parallax header layout  it utilises a nice clean colour scheme and is fully responsive. However I am not convinced on it overall customisation - it doesn't appear to be very flexible so I'm not sure if it's a viable candidate - even if the navigation and content look promising.


$43.00

The parallax theme above is another scrolling header theme but it can also be made into a separate page theme as well. Its got a very simple layout and I like the fill the page header and initial bottom navigation (when you scroll down this navigation bar sticks to the top of the page). Because its being sold by Themify it comes with its own incredibly flexible page builder I think this is the theme that's more promising. 

Home Page With A Free Wordpress Theme

Although I don't have all of my content gathered together yet- I have accomplished most of my pre-build planning so I decided to have a play around in Wordpress in order to get a better idea of how to use it. I ended up using the free Fruitful theme because it was one that I could completely strip down. Using the page builder plugin helped me to control the page layout (although my home page layout was incredibly simple anyway). Aesthetically the theme worked really well and I liked how easy it was to control the layout of the actual page. However there were distinct problems with the navigation, widget integration and footer. The navigation was directly linked to the header so I couldn't edit it as it's own entity which meant that I couldn't make the navigation sticky when scrolled without making the header sticky as well (which I thought looked a bit rubbish). As well as this ideally it would be good to integrate a search bar within the navigation along with some kind of login widget- but because the navigation didn't have its own element it wouldn't allow me to include these elements within them. I had similar control issues with the footer- it wouldn't allow me to include anything but social links and phrases on it (ideally I wanted my contact page and blog links to be included on this). Although I had these problems- I now have a much better idea of how to work Wordpress although I think choosing a theme that has easy to use and customisable navigation and footer is probably key.






Plugins

These were the plugins that I have found and used so far in order to create my tester site. 

Google Font/Font Setting Plugin

The google fonts and font setting plugins were particularly helpful in customising my specific fonts- the font setting plugin essentially allowed me to upload and apply fonts to specific elements (excluding navigation) which was really handy because it meant I could use the font I used within my logo.

Page Builder Layout

The easy to use layout builder - it was really easy to use and allowed me to control the entire layout of my pages (including adding in rows, sliders and images). 

Parallax Scroll 

I tried to make my header scroll upwards (whilst making my navigation stick to the top) using this parallax but it was incredibly confusing and didn't work very well.

My Sticky Header

Again this was another plugin that I used in an attempt to control my header and navigation but again this was confusing and it didn't work.

Widgetize Navigation Menu 

I tried to use this widget to see if I could put a search bar within my navigation - but it wasn't compatible with my theme so again it didn't work.






The Fruitful Theme

After much research I opted to begin by experimenting with the Wordpress theme Fruitful- I had previously examined all of it's features and determined it highly customisable. This is the theme I plan to explore.


Below are some instructions on how to use the theme which may come in handy when building:

Thursday 16 October 2014

Colour Scheme

Before beginning to build my site I wanted to clarify my colour scheme. My logo colour scheme is very much inspired by the eighties decade (a throwback to two or my main headline artists) so I have included these colours along with lighter and darker shades (with an additional darker mint green- as a darker shade to offset the light turquoise shade). Lots of event sites that I have looked at employ a simple black and white colour scheme with accents of colour - so although my colour palette looks pretty vibrant as one - I am planning on using the colours to brighten up a black and white base. I have also included some lighter grey tones just incase I need something to further soften the black and the white.


Below are some of the images that inspired my colour scheme
   

Wednesday 15 October 2014

Fonts

Stylistically I want my main fonts used on my main page to match my event branding- Since I know that fonts that match my branding won't be available in any standard package I have opted to look into google fonts.

I would in no way use these fonts together - I just wanted to explore some different options to test out what they look like and how they work with large amounts of text content (it needs to be readable in order to ensure usability). The Amatic font found above is very close to the font I used within my logo- although I wouldn't use this for main content - I'd like to use it for headings.


I need to find a font thats thin and similar in style to the Amatic font above as a clearer lowercase version.  I plan on experimenting with the Loved By The King font and how it works with Amatic- I may need to continue looking for a lowercase font because I am not convinced that its going to work well or be clear enough.
Plugin


I looked into how I would integrate these fonts into my Wordpress site and I found that there were two options- using a plugin and integrating small strips of code. As far as code goes- I am not confident at all but looking at what I would have to integrate it looks pretty simple so I'm not ruling out that option. Using a plugin would be simpler for me so I think that this is the option I'm going to try first - theres a Google font plugin which I think will satisfy my needs - it provides a certain amount of Google fonts for my usage (obviously if the font that I need isn't included then I will insert into the code or find an alternative specific font plugin which are also available).


Further Wordpress Theme Research

Although initially my plan was to use a multi page layout for my site I still opted to look into a few one page layouts as well (because they are more usable) and it would be simpler for me to only have to deal with one page.



The Onetone theme above employs a sticky navigation and a one page long scroll layout, as themes go it runs very smoothly - the overhead navigation scrolls down to the desired segment, the entire site is actually very simple, colours have been used to divide up the content areas and there are clear images, icons and alternative grid layouts included within the theme and of course it is also fully responsive (I think the one page scroll layout works better on a mobile platform because additional clicking isn't required). However I tested out this theme and it doesn't come with any content which makes it harder to understand how it works- none of the navigation is in the same place and none of the segments are clear so for this reason I don't think that its a theme I plan on considering.

The Retro theme above isn't responsive so it's not a viable candidate for my event site, but I really like the styling - its got a very textural and arty feel to it - although I'm making a professional event site rather than a portfolio site I plan on integrating as much individual and unique style as I can. I am very concerned about making my site eye catching and fun (design and illustration are more of my forte so I want to input as much of this as possible). I'd really like to integrate my hand-drawn illustrative style into it not least because its my branding, so I may end up making some additional elements to include as and when I need them (small dividing banners, additional headers) anything to ensure overall continuity. The site above proves that I can heavily stylise a Wordpress theme.


Much like the Fruitful theme Parabola also seems incredibly malleable- I tested it out to look into some more of the features - its a little too boxy in comparison to Fruitful but again its responsive, employs a sticky navigation and includes a range of layouts and sliders. It's very customisable which is really what I am looking for.  


National is another one page long scroll theme- unlike the Onetone theme it's seems to be pretty malleable (although it was lacking in some of the content sections which would have clarified what was what) from what I could test out there were a lot of changeable features. My only concern about using this theme is that it is better suited to long and thin horizontal logos rather than my vertically wider design. Having said this the navigation remains at the top, its responsive and its bland enough for me to brand (although the downside is that it hasn't had many reviews so it could be unreliable).


Hoffman is a very clean scrolling theme, its not one page because when I tested the navigation there were a few additional links to other pages but I think with a few tweaks to some of the settings it could be a one page site. Its incredibly basic, but it includes clear content segments and uses a very simple layout. I think with a few tweaks it could be made to run a lot smoother (it hasn't had many reviews so again it could be unreliable) but it may be worth considering as a base theme. 

Wireframes

Before looking into additional Wordpress themes I decided to come up with some basic overall wireframes so I know what I am looking for in a theme. I've come up with several different wireframes so I have a variety of layouts to look for in a theme. 

Important aspects to consider when looking for a theme:

It needs to be very customisable
Employ a sticky navigation top menu bar
Be compatible with a variety of plugins
The ability to incorporate Image sliders/Gallery's 
Include a footer  


 I have adjusted my information architecture flow diagrams- I'm now including a footer section and I plan on putting the contact and the social elements on this - so I am not condensing my pages within the top navigation I'm going to keep it simple and separate the different categories into their own pages which will keep everything clear and usable.


I have designed a one page scroll wireframe as well just in case I find a theme that works well but each or the wireframes could be applied to a multipage layout theme.




Tuesday 14 October 2014

Basic Wordpress Theme Research

I wanted to look into some basic theme layouts before designing my wireframes so I know what's available for me to use and what is feasible for me to make with the tools available. 

I started by looking for a basic top navigation, logo and image combinations (standard event home page layout) and came across the arcade theme. I mostly liked it because it used a big image at the top of the page and employed a sticky navigation. I briefly tested the theme out - and it seems fairly customisable but the free version is limited in terms of layout- there aren't any grid or column options and it doesn't allow me to integrate a logo on the individual pages. It may be one to consider but overall I am not convinced on it's malleability.


Thought that I would look into a parallax theme because they integrate a sense of depth and texture and seem to be a very modern and current aspect of the web. However there are very few decent free themes that use this, the only one I found was the mail chimps theme above.  I don't like the way the parallax works on this one -it's a little bit clunky and its almost too much because its entirely photographical. I also don't like how the images sit atop of the parallax and I don't have the technical knowledge to integrate solid blocks of colour to rectify this. The main navigation is not sticky which isn't good for usability especially on long pages. 



                                         Source: http://themes.fruitfulcode.com/fruitful/


So far out of all of the themes that I have researched fruitful seems to be very promising. I tested this theme out because the preview wasn't very extensive and I have found that it's a really malleable theme and its bland enough for me to brand and change radically. Theres a lot of different column and layout options and it compatible with a lot of Wordpress plugins and widgets which is going to be useful when I begin building. The theme has also received a lot of positive feedback (a large amount of people have used it) which also means that I should be able to find support online if I choose this one.



Monday 13 October 2014

Other Event Sites.... Layout and Navigation Inspiration

Before designing my wireframes I wanted to look at some other event sites for layout and navigation inspiration. Though Reading and Glastonbury provide me with a good basis to add to I wanted to see how other events have designed their sites in order to cross reference.




The Reasons To Be Creative website employs separate but long pages, and whilst the home and speaker pages rely heavily on images there is a great deal of text (I think because theres only 6 separate pages all of the information has been very tightly condensed), this does admittedly fill the space but it also means that theres a lot of visually uninteresting content.The main reasons logo banner remains at the top of each page which ensures the overall continuity. The simple black and white colour scheme keeps everything very clean, only small flashes of colour (pale blue and orange) interrupt the black and white which helps to clarify the various sections and subtitles. As a general rule images occupy the top section of the page before columns of text are introduced. The text itself has been carefully divided into columns which means that its more readable (something that I plan to consider in order to make my event site usable). Although it's not perfect Reasons To Be Creative manages and divides a lot of content and it has a well balanced layout and easy to use navigation and I particularly like  the speakers splash page which looks really well ordered and visually interesting. 





The Offf site utilises a long one page layout- the top navigation scrolls down to each section, sections that are heavily reliant on images. Each of the headings/subheadings are emphasised by different coloured backgrounds which adds some additional points of interest to the clean black and white colour scheme. Black and white seems to be a common denominator in a lot of the sites that I have previously researched  (I think it's because it allows for clean professional design that can be made visually individual through the introduction of additional colour). Though I like the one scroll page layout - the splash sections with the artists images look very cramped-so If I decided to use a scrolling page then I would have to very careful with the amount of content included.


Source:http: //ymuno.com/en/lineup

I love the overall styling of the YMUNO site (a Welsh festival)- its professional and clean (again a black and white colour scheme) but the fonts used along with the bold images and overall layout gives the site a quirky and individual almost folky country esc theme. I like how images segment small sections of text everything has a nice amount of breathing room and they have also employed a parallax (on the home page- which is a long scroll) on parts of the background which integrates some nice textural photographical elements- breaking up the off white block background which also simultaneously generates a striped effect. It uses separate pages but it works because aside from the home page they aren't very long and the content is easy to read.