Website features

Below is my album slider on the homepage.

Further down the website welcomes you to Shooshh

On my pages I have upcoming events on the side as I thought this is a useful feature to see upcoming events on most pages.  I have an interactive map also to see where a bouts it is.

On my Events / Tickets page you have to scroll to Shooshh nights or Djs to see my events calendar.  If you just click on the normal button 'events / tickets/ this gives you an overview without a calendar.

Below is my actual calendar.  You can view this a list, a calendar or however you feel is most convenient for you.

Below is where you can buy tickets to events.  Below shows Amine edge and dance and detailed information.

Another below is for Runway friday which is a shooshh night enabling you to buy tickets.

And Hot Since 82

Below is my shop.  I did not know what else to put into my shop so i've included one item.

I have added a register feature under My account.  A search bar to search everything within my site and a shopping cart to show what you've added to your basket.

New pluggin - Jetpack

A new pluggin that I have installed is called Jetpack.  It allows you to check your sites updates of views:

This shows the amount of views over a certain amount of time.  It also displays a chart.

Crit

For crit we presented our sites in class and to a client.

My feedback was as follows.  I had little content within my pages at this point because of problems with my theme.
I got told to look more into influential sites such as Ministry and other music websites to get some more inspiration.  I have now added my content and arranged it how I would like and how I feel the user would be able to use my website.  Because of my theme delaying my progress of my website building, I have not had time to take some user testing into account.  This would of allowed me to see what works and what doesn't.  I would have been able to see whats the most efficient way of getting round my site and doing what its been made for.

Pluggins Used

Here I am just going to show what pluggins I have used myself from the internet, off wordpress and what actually came with the theme.


Events Calendar-  

This pluggin is from Wordpress.  I wanted an events calendar to show upcoming events efficiently.  I originally tried to use a pluggin from the internet but I couldn't get it to work.  This calendar is more presentable and I like the way each window is transparent.  You hover your mouse curser over each day to highlight any events that are on.  A small window appears and previews a featured image and a short text about the event.  You then click on this that takes you to another page with more detailed information.

Woo Shop- This pluggin enables you to have a shop on your website.  A shopping cart appears in the navigation.  This is the shop.  In the corner of my nag bar I have the shopping cart which shows some products on my site.  

Revolution slider- This slider presents albums of Dj's playing at Shooshh.  The slider if you have enough, lets you scroll across the images and has the option to click on them to get some more information.

Website problems - Theme

For the last couple of weeks my theme hasn't been loading probably.  In every theme that you get for free or purchase you upload demo content.  Demo content is the basic structure of the website and what I paid £40 for ($59).  For 2 weeks I couldn't progress on my website because I didn't want to start styling and adding content without the basic structure I paid for.

Above here is where I purchased my theme from.  The theme is called Clubix.  I liked this theme because it was suited towards the clubbing music scene.  My event is for a club in Brighton called Shooshh and it seemed perfect.

Responsive - The theme is responsive.  Everything within this theme shrinks down to an appropriate size.

Ability to sell content - Since I am going to have a shop within my website, this theme comes with features such as selling music.

Pluggins - Theme comes with a few pluggins.  These are Woo commerance which is a shop, a revolution slider which enables image content to automatically slide. Visual composer - Which is meant to be able to help you add content easily.

After talking with George he has managed to fix a variety of problems I had such as the content not loading, my navigation was huge, with so many buttons.  After this, George amended some of it and get me on track to be able to start adding my own content. 

SEO

SEO stands for Search Engine Optimisation.  SEO recommendations are intended to help your site rank higher and more accurately in search engines like Google.  When you search for any topic on a search engine such as Google, at the top there will be an estimate of how many results have shown up for your search.  This can be millions and millions.  So you want your site ideally on the first page or as near to the first page as possible so you get more hits and your site becomes ever more popular making your more successful.  There are ways of making your site more popular, therefore ranking you higher in the results.

These are: Consistently publishing relevant work to your topic that is yours and not copied.  It has to be original and maybe different to what others have already published.  Another way is to promote your website in relevant and sufficient ways such as through other blogs, social media and so on.

The more you do this the higher you will rank within search engines.  You can also make your blogs/work as relevant as possible to exactly what your topic is so Google can recognise this.  When someone Googles 'Motor Racing' and your site is about this, you will also list higher if your site is more focused on specifically Motor Racing.     

Usability Testing Research

Usability testing is testing your website with It's respective target audience to receive feedback on how well the website works and how people react to certain features.  This way the designer can see how easy their system works and they can perform certain tasks to see how easy it is do accomplish something.  The usability testing system is a very important part of making your website work when it comes to launching.  When the tasks are being gone through, they are being observed very carefully by other people usually the designers themselves who set out the tasks to be completed.  They will take notes on every single thing that is being done by the tester.  They will be filmed by a webcam to watch their reaction when it comes to opening new page and see where their eyes first latch onto.  This could be done by a heat map, red meaning a lot of attention is being paid to this side of the website and blue very little.  This is helpful as If you feel your website's more vital information is not being noticed you can find out with ease.  These can range from where their eye looks first on a new open page to a pattern in which buttons are pressed.  The designers will then record what may need improving such as a booking system for example.  If they would like something to be completed within 5 minutes and it takes the tester 10 or even more they can re-arrange things to make tasks simpler and more enjoyable to use.  These issues would be recorded at the end of the testing session.
Different people will be chosen to take part in the usability testing methods as everyone is different in how the accomplish, react and generally complete tasks.  By this I mean maybe generally gathering your type of target audience and people from slightly different ages and gender.  Maybe even perhaps where they come from as well so you get the best and maximum effect from usability testing.  The effectiveness of using humans to test on products is vital in comparison to using computers.  
The target audience for my website will be 18 until late 20s.  Since my website is based on a night club it will need to be effective for young people and how they like to accomplish tasks in the most sufficient way possible.  This counts for being simple.
After exploring how usability testing affects a wesbite's functions I feel it's important I carry out my own usability testing methods with people.   

Shooshh Analysis/Responsiveness

I have been looking further into the Shooshh website and what I think personally needs improving.  I have been surprised by the fact that the website is actually responsive on every page but some better than others.  Here are some examples of them below.

In the screenshot above is what is presented to you after clicking on 'Whats on'.  You are presented with an average looking calendar that is completely blank.  There are events happening at Shooshh because under the 'Events' tab in the navigation there are events over the course of october and november.  I am guessing the calendar hasn't been updated or the website is broken.  However the calendar is ugly and does not show off the website or Shooshh at all.  The plain colours are dull.  Once the boxes are filled with text I guess the practicality of this design is very useful.

I was super surprised when I found the Shooshh website to be responsive. The navigation shrinks down to a common drop down menu which is useful on smaller devices such as smartphones.  It doesn't look good at all but it is practical.  The bar is centred unlike the non-responsive version which looks better.  

Here is a screenshot of the drop down menu once shrunk down.  More options are available to click on rather than the original menu which is strange because if anything it would be the other way round.  The text here is standard along with the colouring and blue highlighted background once hovered on, reminding me a lot of windows.  

This is the homepage of Shooshh at smartphone view.  I was pleasantly surprised.  The information is all there and correctly centred.  The logo is brought into the centre making it look more professional.  Photos from the gallery are still available under the drop down menu.  The text is more readable in my opinion on the responsive version as it looks larger.

Back to desktop view and this is the page for the 'Find Us' tab.  I was slightly disappointed as the map shown here in this screenshot is not interactive.  This is a still image of Google Maps with an added pin point locating where Shooshh is.  They could improve this page by saying how to get there from certain popular places in Brighton such as the Pier of the centre.  They could also make the map interactive and locating you if on a smartphone directing how to get there.

The gallery for Shoohh is rather well laid out.  Apart from the centred black strip with content laid within on every page, the thumbnails look interesting and make you want to find out more and look at these photos and see what Shooshh has to offer and what you could be doing yourself if you went.  There is a 5 column lay out each with a different date listing a particular event.  

Changes/Shooshh Analysis

After having a chat last week about my website and how I will create this I have made some changes.  I have decided to re-create an existing website but stay within the same category of event which is clubbing/Dj set.  I have recently been to a club in Brighton called Shooshh which is a VIP club hosting dj and events alike.  I have checked out their page along with several other websites I considered for adaptation.  Shooshh's website at first looks very inviting, exciting and makes you want to look at more pages and info they have available.  However, parts do look slightly naff and out of date to today's current top website layout and branding.  Below I will show some examples of what I'm talking about.

In the screenshot above shows the homepage of Shooshh.  The biggest and first thing on this page you see is the photo.  There are a bunch of photos from the club showing people having a good time and entertainment.  These photos are in a slider and automatically switch so you don't have to.  This is a good idea and I found this to be extremely popular with club websites and event pages.  It shows what that place has to offer and what you could be like if you went, all without having to click the next picture.  I like the fact of having a photo in the background to just lay your content onto.  This works.  The photo seems to be a photo from inside the nightclub or a random photo of some sort of party event.  The black and white scale works otherwise it would clash with the photo content laid over the top.  For me, the logo does not work in that position or that size as well.  It's too small, it doesn't reach out to you and say 'this is the best VIP club in the city' as whats said on their site.  The logo could be improved, it isn't the worst but it could be adapted and changed to make the viewer think more of this place.  I may see if I could change this.  The navigation is also a problem for me.  It does not sit anywhere near nicely in the header of within the boundary guides.  Even a simple change as to putting all the buttons on the same one line would make it looks neater, more professional and easy going on the eye.  I feel the buttons and text need to be larger, creating more of an impact when the site is first seen.  I would want to adapt the navigation.  

     

Scrolling further down this page is some basic info on Shooshh.  I think this short welcoming text is written well to make want to go and experience what Shooshh has to offer.  A problem though isn't what is written but how it is presented. For me, I would want bigger text, something maybe shorter as well but bigger is a must.  On the right hand side you can see social media as this is Twitter in this one.  Shooshh's most recent tweets are shown, keeping you up to date with whats happening.  This is obviously a good thing, but I am un-sure weather a small right handed box in the corner of the homepage is the right place for this.

As far as branding goes for the footer I really like it.  The main colours of Shoosh seem to be Black, purple & white.  This keeps it simple and identifiable easily.  The purple background works, and the content presented over the top is social media.  From left to right theres Facecook, Connect with us and Shooshh tags for archive tags.  I agree having social media at the bottom here however, the layout is clumsy and is not centred nor uniformed in such a way.  I would change this for sure.  

Overall the Shooshh homepage has a decent layout in terms of content and it's order in hierarchy.  I feel the most important thing here to change would most defiantly be the logo.  I feel at least the logo needs to be repositioned and resized.  I would not rule out re-designing the logo either.  It seems bland, and almost 'word arty'.  The logo has a purple gradient through making it look flat and boring.  The style of font face is nice and resembles a certain quality about the club with its swirly tails.  I do feel this could be improved to a better standard though.  The navigation on the homepage needs to be re-aligned, centred and resized also.  Overall I think elements need to be larger, grabbing the viewer's attention more.  This is a basic analysis of the homepage.

Festival/Events Content Layout Research

The photo above is from artists Avicii's webpage.  Their theme and style is very clear.  Only using 2 colours on their 'Gigs' page makes this simplistic.  I am not sure if this works because all the other pages are in colour and give off a whole other style in my opinion.  I like the navigation system at the top of the page.  It's simple and easily readable.  The text is also all in capitals making it stand out at the top of the page and especially on a black background.  The Avicii logo in the top left is in white just like the the other tabs in the navigation.  When you hover over one of the tabs the background of that particular button turns white and the text becomes black.  I love how this works but I am not sure about the black and white colours for the content on the rest of the page.  

Above here is the webiste of the club Ministry Of Sound in London.  Once clicked on the drop down (burger) icon you are confronted with the following options in this style.  Again the black and white colour theme is being used.  The texts is rather small and organised in a rather strange way.  Next to each link there is just a blank black space that looks empty.  All the tabs are orginised underneath each other.  The logo is presented at the top of these which is also really small.  The logo isn't exactly simple and in my opinion and logo needs to work small and large and in this case it doesn't.  You can still recognise it but I'm not sure it works. 

The above screenshot is the website of a music festival in Portugal called Boom Festival.  It's a festival of techno, drum and bass and dance.  The artwork on this website is very full on and detailed.    I love how they have a background scene of artwork and I feel the artwork is also very drug influenced.  For an events music website they have 8 tabs for the navigation.  The text is fairly small and washed out against the colourful artwork.  The font choice is quirky and reflects the music festival but  is too stick like and thin to work with the other content.  Black background is shown here again.

This is the homepage of Boom Festival.  There is no scroll within this page or website as its just one big page spread.  The title of the music festival is down the left hand side which i found strange.  The first part of text you read on this website is 'Thank you Boomers!' and this is I guess a thank you to the people who attended last years festival as a thank you note.  I do not like the way theres two navigation bars that don't fit together well.  The more important bar where news, programme etc is involved is too small and isn't centred to the page.  The above links are social media tabs such as Facebook and Twitter along with other random buttons like site map.  This is oddly placed to the upper left of the page and some of the tabs don't belong in that bar such as site map shouldn't be along with Twitter for example.

The screenshot above here is a website from Dj's Amine Edge & Dance.  The popular dark background is present again in this website.  I think this is used so any other bright colours used over the top really shine out.  In this case yellow.  It also represents Dj and club lighting and the black could be the background in a club.  This website is fairly bland and simple.  Something I haven't come across yet in my research is a bottom placed nav bar.  There is one at the top as well as well as a log in/register button but I feel the most important infomation such as tickets and a bouts tabs are more important and need to be at the top.  White is also used as text.  A large picture of one of the dis is on the side which is the most noticeable thing here.

Brief Breakdown

First Ideas

For my first ideas for this project I feel I would like to concentrate on a music RAVE festival.  My chosen music genre would be House and dance.  I have chosen to concentrate on this type of music because I feel there is a huge target audience for my chosen music.  This audience is mainly my age and i can relate to this.  I would like to use the colours of bright lights and Dj's as my main attraction for my web page to attract people's attention.  I would like this event to be a couple of nights and mix of deep house Djs and dance artists.  Giving that I am not that confident with web projects I feel like I have to be carful because I don't want to plan too much work that is not possible within the time space and my basic knowledge.

Homepage:  On my home page I would like to grab the viewer's attention with bright colours and large text.  An example of some basic research is below:

This photo above is from an Avicii gig.  I love the mix of colours and how that reflects the type of music.  

This photo above is just demonstrating the strobe lighting.  I would like to include this in some way on my website.  Perhaps on the header/banner.  I want to catch the viewer's attention.

These are just basic ideas to work from at the moment. 

New Project: WordPress Website Design

The start of the new Project Brief is as follows;

Design and produce a WordPress content management website for an event. You can choose any event, for example a conference, a music festival, an arts festival, an awards event etc., however this will need to be agreed by your tutor. You can take content and logo’s from existing events but the design of the site must be yours. You can use existing WordPress Frameworks and/ or themes but these must be modified to suit your purpose and design, or, you could design your own theme. You must research your event genre and produce suitable information architecture and designs, along with consideration of your target audience.

The site will need to be responsive and you will need to consider and implement SEO for WordPress, usability and user experience, producing wireframes and user testing in order to test your user journeys. Detailed research into the above, along with evidence of research into your choice of plug-ins, i.e. why did you use particular plug-ins, what do they cost and what are the ongoing fees, must be evidenced in your blogs.

Your site should also contain at least the following:

A home page with some information about the client.

An about page with detailed information.

A booking system

Detailed information about each event.

A news area

Contact info and a map.

An events calendar with categories.

A shop selling some merchandise using PayPal

A search bar.

A gallery page.

Ability to register and log-in.

A blog.

Links to social media, including some live social media feed.

An analytics system.

Method of Assessment

What you must produce:

The Learning Outcomes will be met by submission of the following items and will be graded using the specific criteria listed below:

Research blog and sketchbooks demonstrating appropriate theoretical and visual research and idea generation 

must contain all the sections stipulated in the brief

·       Wireframes and evidence of information architecture planning

·       Functional WordPress website