Sketchbook

I didn't keep a sketchbook for this project. I have never felt the need to sketch my ideas. It always seemed a hurdle in the way of getting my ideas down. I could never use a sketchbook to brainstorm really. I had an idea of what I wanted something to look like and then sketching made it affirm my idea and then I felt as though I had to sketch other things that I ultimately didn't end up using.

In the third year the news that we didn't have to keep a sketchbook was a great relief for me. We still had to sketch but we didn't have to buy a book and fill it. Having said what I have said it is still necessary to sketch some things like brainstorms, flow diagrams etc. These are present earlier on in my blog. I did also sketch my homepage and a few of the designs I have on other pages on my site but I cannot for the life of me find them in my house as they are always quick little things on a small scrap of paper that is now lost. I would have posted them here but as I said I cannot find them. And I didn't want to re-draw them and pretend because that sort of defeats the object really I think.

So my wireframe and flow digram sketches are up in earlier posts I believe but the others are lost to the ages. I will definitely be sketching more in the next project however, and I will make a conscious effort to preserve them and show them on the blog.

Evaluation

This project has been a funny one. I have never swung in my opinion of a project so much until now. I started off quite excited to learn about Wordpress as I had heard of it before and knew it was an important part of modern web development and very widely used. I thought it would be a valuable skill to learn.

However, I then started to dislike it quite a lot. One thing I cannot stand in design and creative endeavours is feeling like anything is trying to hold my hand and make me compromise on anything to do with design. I don't like programs with presets and plugins. I would prefer to build something myself that is rudimentary and imperfect than use something pre-made. I think that it makes it so much more personal and interesting and almost always when something tries to build or do something for me it isn't exactly as I want it to work or something is missing. When I started out using Wordpress I had a horrible feeling that that was going to be what was in store for me. Buying a theme and dragging and dropping plugins seemed very impersonal. I didn't hold out much hope.

That continued for a while, then my site broke for a few days. I pretty much gave up hope and effort for the project then but after it was fixed and there was a bit of urgency to doing everything I started to get it. There were a lot of opportunities for creativity and design. Going in the backend to edit fonts and colours was actually quite liberating and was very reminiscent of messing around with CSS and HTML and refreshing the page to see what the changes did to the site.

Now here at the end of the project I think I am leaning towards having really enjoyed it. I'm glad it is over now as it was a lot of work in a somewhat short time scale however, I do see the potential and power within the platform. I'm not sure if it is for me in the long run and I do prefer coding by hand but I definitely will bear it in mind for the future. It was really valuable to get a glimpse behind the curtain and understand a little more about Wordpress at the very least and that was a good thing to come of the project.

I am really glad I managed to work in a lot of graphic design and illustration into the project though. That was a really fun side to it. Without that it had the opportunity to be quite a drag, Using graphics and Illustrator made it so that I could flex some creative muscles. Anyway all in all this project was a positive I feel.

Analytics System

The last part of the brief I needed to consider was the inclusion of an analytics system to monitor the site with. For this I had heard from classmates that Jetpack was a good plugin to install. It is made by Wordpress and so is extremely well optimised of course. It allows for many features but one of the main features I wanted it for was it's analytics system.

I had forgotten about this feature until recently and as a result have only just installed it. This means that there are no statistics to display as of yet as the plugin needs to be active and running for a little while longer to display any information but due to time constraints I need to post about it now. So at the minute the page is plank with nothing to display but this will obviously update and be handy as and when traffic starts to frequent the site:

Changes pt.II

This is the post where I address my decisions regarding the call to action. Now, I have decided not to change anything which may be a controversial decision. However, I feel strongly about how it is at the moment and I think that it works better for the grand, overall goal I had in mind at the start of the project. This is my final homepage design:

My tutor was worried about the information being left aligned underneath the logo and animating in. She suggested I should move the information up and incorporate it into the logo somehow. I was all for this and thought it was a good idea but after having a play around for a while I realised that nothing worked as well as how I had it. I had this exactly as it is in my mind from the outset of the project. I wanted there to be a central logo design that was big and impactful. I wanted that to be the first thing you see when you enter the site.

I think it creates a story and engages the audience. It is almost like reading a book or watching a film. I wanted there to be a large central, vibrant icon that draws the eye and asks a question. The viewer will wonder what the site is for and hopefully be intrigued the by the art style and subject matter of the image. Then when they engage with the page or after a very short time the information animates in. This attracts the eye and makes it so that the viewer can then read information about what it is, where it is and when it is. Then as they scroll down they get more and more information and more ideas of what to look at next.

I think that this is a good way of encouraging interaction/participation and that will more often than not cause the viewer to be more interested in what they are looking at and actually take in the information. All of these factors and principles however, do not impede on the feel and usability of the site though. They are subtle effects that do not get in the way of the user and hamper their journey through the site. The only effect they have is a positive one. 

I really strongly believe in my decisions for the homepage and although they are not popular opinion and my tutor may not a agree I really think that they are exactly how they should be. My site is for quite a niche event. It isn't something big and wide reaching it is for a tight knit community of people who are passionate about music and so I feel that gives me more creative freedom and artistic liberty to toy with the norm and test the boundaries of what a homepage should be. I think that my design engages the user and forces them, very lightly and subconsciously, into interaction and play.

I know it may seem like I'm making a mountain of a molehill but I really do believe that all of this is the strongest choice that I can make for the design and function of my homepage. I think that chances are people will know at least the main themes of my site either before they come because of a google search or at the very least by the logo on the homepage and so the creative choices I have made with the text and lack of in your fact call to action is justified and makes the page work better as a whole. Now I might be wrong but I really believe that I'm not.

Crit & Changes

Crit is always a valuable experience. It is similar to the post I made earlier about user-testing, it allows an outside, unattached view into your work and objective opinion based solely on improving the design and helping it reach full potential. This crit session was extra valuable as the client was able to attend and so we could get an educated viewpoint from someone who has been in the industry and is somewhat of an expert on the subject. We had one of the members of the class take notes for our feedback so that we could keep a list of what was said. This was my feedback:

• Bring drop in up and integrate into logo
• Too much space between logo and nav
• Brands are homepage are a plus
• CTA to buy tickets not prominent enough
• Bring ticket graphic onto homepage
• Make it clearer the bands are playing on the homepage
• Graphics are all good
• Colour in boxes on calendar

So overall everything was positive. People seemed to like the strong art style, the bold use of colour and typography. In fact everything to do with the visual/aesthetic style was very well received the only thing people found issue with was the functional side to the site. And even so there were only minimal issues and minor changes suggested.

There were a few major points I needed to address. I shall go through them here and how I addressed them:

Calendar Boxes

The calendar app that I used was a free plugin. It is a great plugin, there is extensive options and functionality controls that can be controlled however, I could not find any way to customise the look of the calendar or the page it sits on. I found that a lot of my class mates had downloaded the same calendar plugin and had found the exact same issue when they went to customise it too. So unfortunately I couldn't change this aspect. It is annoying because I agree with the feedback that the calendar could do with a little customisation. The calendar I didn't see as an essential part of the site though as it is only a three day event and so I could forgive it looking funny as if the site/event was real I don't think a calendar of any kind would be included.

Make it Clearer Bands are Playing on the Homepage

This was something I had completely overlooked. I hadn't thought about it at all until I went to crit. The second I sat down to present it I instantly realised it as a major shortcoming myself. It was later pointed out by my tutor and the client too so this was something I definitely had to address. This was brought up in conjunction with another point. I had my contact form on the homepage. So I thought I'd have a little double whammy of a re-jigg. Firstly I removed the contact form from the homepage and placed it into my about page.

The page used to be structured with the about page graphic at the top followed by a little information. Then after that was a little strip of white for the sponsors then the venue information was at the bottom in a black strip. When I added the contact form into the about page I also thought I'd re-arrange the page a little too as I felt it to be a little strange and sparse. This is how the page looks now:

I moved the venue section up into the white sponsor section. The sponsor section was a lot thinner and seemed isolated whereas now it seems included more into the site. This is how it looked before:

It sits accompanying another item so that it doesn't seem so abandoned. It also fills out the middle section with white making it look nicer. The contact form of course makes more sense this way.

Now, the homepage. This is how it used to look with the contact form:

Now I have removed that I had some space at the bottom to market the night side of the show. The performers and shows in the evening were only found after looking for them which is wrong. It should have been on the homepage from the start. I thought the best way to show it was to create a graphic. I was going to use some of the graphics I had previously created. But I thought that they didn't stand out enough for the homepage. The homepage needs to grab the attention of the viewer and get them interested right away. The only way to do this I could see was by using the bands logo's as apposed to my chosen fonts for the bands names. So I designed an image to go at the bottom and added it in and now this is the final homepage:

Not only does this make it more obvious that there is a night show and build interest in the event I also think that it makes the homepage work much better overall. There is a much stronger sense of graphical identity and the page grabs the eye a lot more.

Bring the Logo Closer to the Top of the Page

This was something that was a subtle change for me. I really wanted to keep the logo with some room to breath. It really created a sense of showmanship and impact. The user is greeted with a strong, vibrant wash of colour with a sharp cutting image. So I did bring it up a little to compensate for people who may be viewing it on a lower resolution screen:

These are the before and after. As you can see it is a very subtle difference. I didn't want to impact the visual style of the homepage too much. However, this slight adjustment does account for lower resolution screens.

Conclusion

These are the changes I have made. As you may have noticed I haven't addressed the call to action points and comments about the text on the homepage. This is purposeful. I will address this in the next post. This post is already beginning to resemble a short novel so I thought I should break it up a little. However, these changes are all really important things that have effected the flow and success of my site quite a lot I think. I am glad they were pointed out and I think that they all have made improvements.

The homepage is now a little more accommodating and a lot more visually impactful. It grabs the eye and attention and makes the viewer want to engage and learn more.

Shop

The shop was quite straight forward to construct as all the functions and pages are auto built and populated by the plugin itself. The challenge was creating the products. This was one of the problems with creating the site from scratch and not using an existing brand. There was no existing merchandise with the logo I had created on it, and so I had to create some.

So I took to Google to find some blank products I could add my brand to. I wanted to have at the very least a T-shirt, a hoodie and a guitar pick. So I found the following images:

These were my blank canvasses. With a little Photoshop jiggery pokery I managed to turn them into 4 different branded products:

I was pleased with the look of the products. I was worried they would look blatantly faked but especially at smaller sizes it's very tricky to tell they were made in Photoshop. I used the difference blending mode to add some detail and texture to the logo on the picks at the bottom there. That went a long way to add some realism.

With that I then constructed the products on separate product pages within the WooCommerce plugin. I found that by making them "Variable Products" as apposed to "Simple Products" meant that I could include the variable of size and allow for people to choose their size for the shirts and hoodies:

That was an important step I felt in the process that I almost overlooked. After that it was just filling in data and attributed like stock amount, name, description and price. Once that was complete I had a functioning shop complete with PayPal purchasing!

Below is a step by step journey of purchasing an item through my Store from shop to checkout:

And so that's that. I am really happy with how the products turned out and the shop looks and feels like a real shop. It's an amazing plugin that can be simple when you want it to be and intricate when you need it to be. It made creating a shop easy and fun and the end product I feel speaks for itself.

Booking System

This was a tricky one. I struggled for a while with what it was that I could include in a booking system. I didn't really find it applicable. Then my tutor suggested the ability to book a stall on the show floor or allowing performers putting themselves forward to be booked into play at the show.

I liked this idea but found it difficult to pursue. None of the plugins I came across really fit the bill. Then one day whilst playing around with the contact form plugin I had previously installed I noticed a whole seem of options that could be included. I saw it as a form of booking system that is commonly seen on big events and for major cooperations that have the wealth to employ a team of people. I could create some custom contact forms that could only be put through if you fill in certain fields. The fields that I made mandatory would be contextual depending on who was applying for what. The idea being a company would tick certain requirements they had and a performer would be required to upload a sample track. I discussed this with my tutor and she said that it would fulfil the requirements for the brief so I went ahead with it.

Manufacturers Form

This form is fairly straight forward. The required fields are marked with asterisks. The extra field required by this form is the checkbox at the bottom. It is a fairly standard list of questions that may be common for a form regarding this sort of subject matter. The checkbox will send the relevant information through the form and that would then theoretically be processed and would return an appropriate answer.

Performers Form

This is the performers form. This is a little more different and engaging than the other form as it has a required file upload at the bottom. I specified it must be a .MP3/.WAV file. So it has to be an audio file and no bigger than 100MB. That makes it a demo track or just one song as apposed to a full album. 

I think that this is a good alternative to an outright app that houses a bookings system. It's something I've seen before on bigger sites. It is also not as tacky or intrusive as most of the booking systems usable in Wordpress, especially the free ones, don't tend to be very customisable and so I like keeping to things I can customise fully and keep within the theme. It's one of the reasons I don't like the calendar page. It is functional but somewhat glaringly out of place.

User Testing

User testing is a really handy tool for designers in all areas of creative work. It offers an invaluable glance at your creation through somebody else's eyes. You can objectively analyse your work from a purely functional basis without any prior knowledge of the product by allowing someone with no prior connection to it access. 

Companies and designers will do this throughout the design process at multiple stages. It is a powerful process that can shape the path that a design will take. 

"Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system." Source: en.wikipedia.org/wiki/Usability_testing

It forms an integral component of user-centric design as it allows you to ensure your design is accurate and functional. You can gather opinions and outside viewpoints before any unnecessary time is put into an idea or path that may end up being redundant or counterintuitive. 

It would have been a great component to have incorporated into this project for me however, time escaped me. One problem with my theme ended up deleting the foundations of my site and corrupting it for three days. This meant I was stranded and without any way of continuing on with any work. Because of this set back and a load of other smaller issues dotted throughout the project it was tight enough just to get the site built.

The user-testing process should also really be started a lot earlier in the process as it will shape the outcome but the brief was quite specific in what had to be included and how so it seemed kind of redundant there too.

Obviously if this was a real brief for a client then user-testing would be obligatory. It is an important and imperative step in shaping every aspect of a site. There are certain aspects of the design and structure that do not usually change but certain specific exclusions and ordering of items are important to consider and user-testing helps to ensure that those decisions are correct and recommended by people who fit the target audience for the project or possibly even end users themselves.

Gallery

A gallery is required in the brief. To create one I used one of the plugins that came included with the purchase of my theme. I decided to use the essential grid. It was a pretty easy build as all of the responsivity and navigation is taken care of for me. To build it I just had to import all the images into the plugins grid builder and choose some responsivity settings:

Once I had assembled the grid and put all the images in I played with the settings controlling the responsiveness of the grid:

I just set the amount of columns I want displayed at each screen size. This is a simple way to control the responsiveness and make sure that the grid looks nice at all screen sizes. Once I had edited those settings I had to choose a skin. I didn't like any of the kinds that came with the plugin and so I made my own:

I called it clean lightbox and just made it a really simple. All the ones included in the plugin were filled with movement and looked very cheesy and showy. So I made one that has a nice soft white overlay to brighten the image and one button with a magnifying glass which allows you to enlarge the image:

Once thats all together the gallery looks nice and has a good sense of continuity. The one problem is it takes a while to load initially but thats the problem with using high resolution images.

Branding

One of the major benefits that came with the Shore theme that I purchased was that it came with essentially a drag and drop, do-it-yourself branding editor. I could instantly and painlessly upload images that would be automatically integrated into the site. These images would be used as the logo in the navigation and also as the favicon for the website. The builder is really self-explanatory, clear and helpful. It offers you a list of things to upload and exactly what size and format would be best. Giving you two sizes for each object so that retina devices and standard devices would both be covered. This took such a major headache out of building the site and also really helped to create a strong brand identity/consistency. This is the branding builder included with the Shore theme:

As you can see there are step by step instructions and exact measurements to look out for. It tells you where and when each asset will be displayed and gives you recommended file formats. It is really helpful and like I said previously great for brand identity.

I used Illustrator to create all the assets and made up a neat little trick to make it a quick and painless exercise. I started by creating two art boards (Illustrators equivalent to canvases). I used the first one to create the logo/retina logo. That was pretty straight forward. However, as you can see there are a myriad of sizes required for the favicons and mobile icons (there are more favicon sizes requested further down the page I just couldn't get the screenshot low enough to get them in as well). This presented a lengthy and potentially not exact problem. I envisioned it being difficult to get all the variously sized favicons to look exactly identical. Then I came up with a method.

I started by selecting the Art Board tool down on the left hand side (it's the one highlighted 3 above the magnifying glass near the bottom):

I then selected the second art board which I had made at the exact size of the smallest favicon I required after creating the favicon as I wanted it and exporting it at that size:

Then if you look at the top of the screenshot you can see X, Y, W and H values. These are X and Y for position and then Width and Height. So all I had to do was unlike the link feature between the W & H values and adjust them to be the exact size of the next largest favicon I needed to produce:

Once the art board was re-sized I simply grabbed both the background and the letter N whilst holing shift. I could then use the bounding box to scale them. Whilst scaling from one of the corners I held shift to keep everything in proportion and held alt to make the scale occur from the centre. This meant I could avoid having to re-position the graphic each time and made it easier to get to fill the art board each time. Once I had done that I could export it at that size:

I exported them all out as PNG files just as the theme suggested I do. I had to make sure that at the bottom of the dialogue box I ticked the "Use Artboards" option and then selected "Range" and typed the number 2. This makes sure that I am only exporting the second art board each time. Once I had done that I was given another dialogue box:

It is important here that I make sure that the resolution is set to "Screen (72 ppi)". This is the resolution that screens commonly use to display everything and is the accepted standard. As a result it is also the resolution that I created the document in. If I had accidentally chosen another, higher resolution it would have the effect of scaling up the image a few times rendering it useless for that particular favicon. Keeping it at 72ppi ensures that the final exported image remains exactly the intended size.

Once exported I could then upload it and fill the branding sheet appropriately. As I mentioned this is a hugely helpful feature and after discovering this handy quick tip for resizing the favicon and quickly re-exporting it, it flew by.

Fonts and Colours

It has come to my attention that I haven't yet addressed the fonts and colours I have chosen to use across my site. 

Colour

Well, let's start with the colour choices I made. I started out wanting to go with a dark theme as I made clear in a previous post with the original images I created. It was a dark grey background with a golden yellow logo over the top. I liked this but I thought over the whole site it have the potential to look to bland, corporate and cliché. It looked good as a logo/poster but when it was all there was to look at and engage with across the whole site then it would get a little drab I felt.

So by chance whilst playing with the logo I had I created a variant with a blue background whilst keeping the yellow original logo. As I mentioned that logo later changed to the new one but I still really liked the blue background. It was a really striking, engaging overall colour that could lead to a wealth of design opportunities. So I then decided to refine it to be a hexadecimal colour that would work with web.

Hexadecimal colours are numerically defined colours designed to work with HTML and CSS back in the earlier days of coding. Now HTML5 and CSS3 support wider colour formats like RGB and even just names (like "red" or "green"). Hexadecimal colours, as the name suggests, are colours defined by six digits comprised of both letters and numbers. It allows for a wide array of colours to be used on the web quite simply however, it is naturally limited. You cannot access the millions of colour variations possible when using something like an RGB colour space but it is still open and varied nonetheless.

Anyway. I decided to play around with all the colours in particular the blue value, as that was just a random value I picked out. I decided to refine it and choose one that worked hexadecimally as that would make my life a lot easier as I could define it within Wordpress rather than having to import custom backgrounds exported out as JPEG's and taking up unnecessary space. I had to fiddle with the grey value too to get something the right lightness as to separate it from black but also work hexadecimally. These are the values I settled on:

I think they all work together really well. They create bands and they also stand out. A lot of times you'll see this kind of a scheme. Black and white paired together with another bright, vibrant colour thrown in to add definition and life. The colour is used sparingly to highlight things or inject vibrance to a page. It looks really nice and is a classic style. I wanted to try and throw a twist into that by doing the opposite. Black and blue are the two main colours with white thrown in to accentuate and inject vibrance. I am really happy with how it turned out too. As I showed in my previous post with the graphics I created the white does really well to inject interest. The blue is a nice was over the whole page too.

The blue was actually tricky to pick out because I initially thought a pastel blue would look nice but I quickly realised it wasn't terribly suited to a sharp, vector landscape. A more vibrant, deeper, richer blue was required which for me was counterintuitive but I think it works really well and was a welcomed surprise.

Type

The fonts were a little easier. I had a strong idea of what I wanted to do from the beginning. Recently I have had a strong fondness for serif fonts. They look delicate and regal. I have been pairing them with unconventional things and colours and enjoying it immensely. However, that was not what was required for this project. I went with something tried and true. A consistent sans-serif font scheme.

For titles I wanted to use Knockout. Knockout is a beautifully designed font by Hoefler & Frere-Jones:

The font is a really nicely shaped one. It is primarily designed to be displayed in the style present at the top of the above image. A thin, tall style of font that looks classic and yet modern. I used it at a heavier weight within the font called Welterweight. It thickens up the font completely and also spreads it out a little. It just packs more of a punch for a logo and page title I think.

Now onto the body/subheading font. This one was one suggested by Shore. It is called Roboto Condensed and it is a Google font:

Source: http://assets-www-dtelepathy-com.s3.amazonaws.com/wp-content/uploads/2013/12/condensed_fonts_julia_roboto.png

This font is also lovely. Knockout looks great as a title font but there are drawbacks for it's use elsewhere. Some of the letters look a little weird when not capitalised, the number 1 looks really odd and it isn't a web friendly font unless you pay Hoefler and Frere-Jones for the privilege.

Roboto looks great un-capitalised and small as a body font. It also works well as a subtitle font due to it being condensed. It pairs fantastically with Knockout. It has a slight hint of the tall, thin style that Knockout has been known for but it is a lot more subdued and as a result naturally attracts less attention initially. This is perfect as the eye gets naturally drawn to the logo/title on the page written in knockout, then to the body text written in Roboto. This creates a great subconscious flow to each page and there is no jarring break to consistency due to the various similarities between the two fonts. There is enough separating them to look like two different fonts however, enough similarities to allow for a strong sense of uniformity and consistency.

I also used a little bit Open Sans here and there (mainly in the shop). This font just performs well when really small and tightly packed and is ever so slightly more instantly readable. 

So there we go. Those are the fonts and colours I used. I think that they all pair with each other really nicely and allow for a strong brand identity. It also allows for good separation of elements along with a strong sense of hierarchy and flow to each page. I am extremely happy with how it all works together as one and it makes for a great set of tools upon which to build a site.

Plugins

Plugins are an integral component of Wordpress. I knew that this was going to be a huge part of this project and finding the right ones would make or break the site. This again makes my choice in theme all the more important. It came bundled with some really exciting and useful plugins. These are the plugins that came packaged with the Shore theme:

Essential Grid

Source: http://www.wpexplorer.com/wp-content/uploads/essential-grid-wordpress-plugin.png

This plugin allows for the easy creation and customisation of grids. You can add images into grid arrays and have them look and respond as you see fit. It also allows for an extensive array of elements to be placed into the frame of each grid. For example a magnifying glass to enlarge the image or a "Add to Cart" button.

Revolution Slider

Source: http://cdn.wpmayor.com/wp-content/uploads/revolution-slider.jpg

This plugin is fairly self explanatory. It is a slider plugin that allows for the creation and customisation of sliders. They can be displayed as beautiful full-screen elements within the page and also have text and other elements layered atop them.

Contact Form 7

Source: http://premium.wpmudev.org/blog/wp-content/uploads/2012/12/contact-form-7.jpg

This is a really simple contact form builder that looks really simple and modern. It is a great plugin and really took all of the hassle out of what could have been a horrendous task.

The Extended Visual Composer Sutie

Source: http://vc.wpbakery.com

This I have already covered but I can't overstate it's value for me in this project.

WooCommerce

Source: http://firsttracksmarketing.com/wp-content/uploads/2014/10/woocommerce1.jpg

Lastly is probably the most important plugin that came bundled with my chosen theme; WooCommerce. This is a plugin that allows for the creation of a shop. You can design and sell products and control every last element with exacting standards and efficiency. It is a lifesaver and having it bundled with the theme meant that it came with some custom layouts and styles that are otherwise impossible to achieve. This is an awesome added touch.

So these are all the plugins that came bundled with the Shore theme. They ticked a lot of the boxes I needed to tick for this brief however, there were still some holes that needed filling. To do so I took to Wordpress' plugin section and set about searching for some plugins.

BuddyPress

Source: https://buddypress.org/media/buddypress_logo.png

BuddyPress is a plugin that allows for custom users to Log In and Register. This is something required by the brief and this is an easy solution to the problem. It only takes a few clicks to set up and then as if by magic it is done. This seems like the best balance of function to ease of use that I can find and so this is my login plugin.

Duplicate Post

Source: http://lucianobraga.com/wp-content/uploads/2014/06/duplicar-posts-no-wordpress.png

This is nothing to do with the brief this is just a nice time-saver plugin. I encountered many times where I had much the same content on a few pages I perhaps just needed to change an image or block of text. To do so I would have to have started a new page from scratch which seemed silly. There had to be a better way and so I did a search and found this plugin. It adds a duplicate button to Wordpress allowing you to duplicate a page exactly then rename it and edit whatever you want without touching the original. It is a HUGE timesaver.

The Events Calendar

Source: http://mooxidesign.com/wp-content/uploads/2014/09/the-events-calendar-2.png

The brief requires a calendar with sections and tags. I felt it was kind of redundant on a three day event but this project is more about showing your capability to build a functioning event site as pose to focusing on the content and structure of the event itself. So this is the plugin I am using to create my calendar. It is simple to use yet packed to the brim with cool features.

Wordpress SEO (Yoast)

Source: http://www.wpexplorer.com/wp-content/uploads/wordpress-seo-by-yoast.jpg

I have already mentioned this plugin before so I won't go into too much detail but this is what I am using to manage the SEO across my site.

So there we go. All the plugins I am using. I think with all of these I can comfortably cover all the bases I need to cover and I also have a few more for flair and for personalisation. I will mention any other plugins I might find and use in later posts but I think that I have everything I need right here.

Home Page Complete

I have finished the home page for my site. I am really happy with it. I think that the graphic I have created has a huge impact and really stands out. It looks exactly as I imagined and has accomplished everything that I hoped it would. I wanted to try and steer clear of the various clichés of the modern web whilst avoiding making something too complicated and cluttered like a lot of other music sites. I feel like I've balanced out those two things really well. This is the page:

This demonstrated the idea of the bands that I mentioned in a previous post. It works well to separate out the content into sections and divide things up nicely. It has just what it needed on the homepage. I carefully evaluated what my target audience would want from a homepage to a site like this. 

First thing is a bright, vibrant, exciting image. This draws in the eye. Straight after that is what the show is about, when and where it is and finally a link to buy tickets. This is all assembled in a block of text and that block of text animates in when the page is scrolled. This draws attention to it and pulls the eye towards the information that needs to be read. The left aligned style creates a nice, subtle border to the site and the words resemble audio levels you would typically see in a music player.

After that is a search bar, a quick resource for people who are looking for a specific item and don't want to have the hassle of over extended navigation to get there. After that is something I felt very important to include. It is a list of all the major brands attending. This is something I would be looking out for. If you see the name of your favourite guitar manufacturer or amp manufacturer you will be far more likely to pull the trigger on a ticket.

I ended with a contact form as I imagined that, for some people, the homepage could potentially be the only page on the site that they visit in the initial sitting. The contact therefore allows for any questions to be asked simply and upfront and could possibly lead to repeat visits and even ticket sales.

Visual Composer

Source: http://vc.wpbakery.com

Visual composer was one of the main reasons I wanted to buy the Shore theme. It came bundled in with the price of the theme and saved me having to spend a further $28. It is basically a user interface that allows you to build pages with a graphical interface as apposed to with text. It allows for a much more fluid experience. You can instantly update your site with a few clicks and all the spacing/responsiveness is handled by the theme. It added a lot of speed to my workflow and took out god knows how many problems before I even had to think about them. This is what I would have to work with if I did not have visual composer:

Very confusing and cluttered. It is just like a unnecessarily confusing text editor coding in a language I do not understand. This is my view with visual composer:

Much better! As a designer by nature this is absolutely essential for me. I can make sense of what it is I am doing and how everything will interact together with this view. It allowed me to breeze through the creation of the pages with relative ease. Of course with this being a web project there were the inevitable hiccups here and there but I cannot imagine attempting something like this without this feature. It is 100% essential for me.