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:

Source:http://themes.fruitfulcode.com/fruitful/documentation/#import-demo

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

   

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.

Source: https://www.google.com/fonts#

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).

Source:http://www.elegantthemes.com/blog/tips-tricks/how-to-use-google-fonts-on-your-wordpress-website

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.

Source: http://www.mageewp.com/onetone/

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.

Source: http://themes.opendept.net/retro-portfolio/

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.

Source: http://demos.cryoutcreations.eu/wordpress/parabola/?colorscheme=Bleached%20Landscape

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.  

Source: http://demos.bavotasan.com/national

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).

Source: http://andersnoren.se/themes/hoffman/

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.

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. 

Source: http://demos.bavotasan.com/arcade/

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.

Source: https://wp-themes.com/parallax/?TB_iframe=true&width=1156&height=532

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.