Brainstorming

Brainstorm Image

As you can see from my brainstorm there are a few areas in which I need to cover in initial research before I can start considering the technical requirements. A lot of the elements in the brainstorm I have already covered in my blog such as typography.

Something I found interesting was the flow of content, from a sales background I recognise there five major steps to closing a sale with a customer. I understand that it is different on the web as you can’t hear what they’re saying and you can’t talk to them, but you can still apply the same principles. The five steps to closing a sale are:

1 – Making sure you understand your customers needs, and making your service relevant to them. This is done by understanding your target audience which I have already done in my research.

2 – Come across as confident and trustworthy, as they will only put trust in you if you trust in yourself. In normal situations you would build rapport with the customer so that you become friendly and someone they can trust. As I can’t do this through the web, I will have to use other resources that available such as using colour, typography, content and design to create such an experience.

3 – Pitch your service/product to the customer, and as we don’t know anything about the specific customer I have to be very broad in how we approach this. This has to relate to everything single customer, essentially we are pitching blind, with umbrella phrases and statements that will relate to vast amount of people visit the site.

4 – Objection handling is usually where the customer would present their reasons for not wanting the service/product and you turn round and use hard facts to win them around. Again this is not possible on the web, so we have to consider alternative methods such as a FAQ page which is easily relatable and maybe a testimonial page.

5 – Closing the sale is the most important of all steps but also relies on the previous steps being completed properly. You sum up all relevant information, relate to the customer with the information you know about them all while making them feel like your doing them a favour, they are getting something valuable.

Using this approach you could turn a casual visit to the site into a lead for the company, and potentially a sale. Once completing all five steps you provide the customer with the telephone number so they can call the company.

So, explaining how the flow of the page works, I also need to work out the actual content of the site. Firstly the most important thing is the homepage with the contact detail, secondly the portfolio of work for the customer to be able to look at and see the quality of the service provided, this should have rollover images with before and after shots with feedback from the customer. Lastly there should be an about us page for the customer to read a bit about the company so they can decide themselves if they like the sound of the company. The about page should contain details the company, how many staff they employ, what year they were founded, their values and vision.

In line with certain sales techniques that I am aware of from a previous job, offering a guaranteed better rate than any competition is a good way to win over customers, also offering free incentives will mean the customer will feel like they are getting a better service.

Design elements that I need to consider are colours and typography, I need to make sure they are relevant to the client needs and appeal to it’s audience.

Advertisement

WEBSITE ANALYSIS 4 – DANGERSOFFRACKING.COM

dangersoffracking.com informs its user to the environmental damage, safety and health hazards caused by fracking, it does this with a great user-friendly experience with animation that takes the user on a journey from the city where the gas is being used to where it is being fracked. It’s aim is to bring awareness and essential get people to vote for the Fracturing Responsibility and Awareness of Chemicals Act which would “require the energy industry to disclose all chemicals used in fracturing fluid as well as repeal fracking’s exemption from the Safe Drinking Water Act”.

The user starts as a droplet of water at the top of the page, then as you scroll you travel as the the water drop in the the form of a truck towards the fracturing site. From there, you continue your journey under the ground, as a droplet of chemical, through land, oceans and finally to a an open air pit for evaporation. You can see the smooth transition of the animation with the images below.

1 2 3 4 5 6

The animation and fluid parallax scrolling takes the user on a journey describing every stage fracking goes though and the effects it has on them. After effectively selling the reasons to be against fracking the website jumps straight to the section that encourages users to take action against the ‘dangers of fracking’ by supporting local organisations ect.

WEBSITE ANALYSIS 5 – SONY’S BE MOVED CAMPAIGN

Sony’s ‘Be Moved’ campaign main focus is to allow users to look deeper into the products they create and the teams that work in them. They created an elaborate website with a fully immersive user experience using parallax scrolling, which is where the foreground images move faster than the ones in the background. This method of having separate layers within a page and manipulating the size and the speed they move you can create a sense of depth.

The method of having images and text moving alongside each other and flowing in front of and  behind each other looks like something that would be somewhat of a nightmare should it be attempted using code.

The website is complete with animations of shattering glass, assembling of products and visual scenes of underwater, forests and the universe. It looks very professional and an extreme version of a parallax scrolling site, at first glances this website seems extremely complicated to build, but doing a bit of research I came to the understanding that it was much more simple than how I’d imagined.

By creating a video sequence that lasts 1306 frames and allowing the user to flick between the frames by scrolling is essentially all that is needed to create a website as creative and professional looking as this one. It then creates a website that looks like nothing else on the market as it would be extremely difficult if not impossible to create the movement of some of the objects in 3D space with just normal code. Looking at the code;

img_source-code

the .frameloads is a function that makes the display move on the the next image when thhe user scrolls, and the small_256,small_512 and large_960 are for the different size images for the different sized displays.

Screen Shot 2014-10-27 at 14.15.20 (2)Screen Shot 2014-10-27 at 14.16.21 (2)

Screen Shot 2014-10-27 at 14.16.56 (2)

As you can see it is very visually appealing, the textures and layers just create this completely immersive experience for the user, telling the story of how they engineer and design together.

References

http://subtlepatterns.com/thumbnail-view/page/16/

http://discover.store.sony.com/be-moved/

https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/

The future of Web Design

A website is designed to be a centre of information for businesses, indivuals and marketing purposes. Mostly websites are there top create action from the user, whether thats to purchase, share information, visit their pysical store or even use the service they provide. It must become easier for users to understand how a website works and how to use it. This will be done by making sites like their print counterparts by using full advantage of the technology that is available. Becoming interactive, using sharing for easy marketing and pageless designs for simplistic use. Many people try to second guess what the market is doing but given I am studying a three year course not only do I need to stay current and research what media is doing now, but by the time I finish my course some of the design elements will be dated and looked down upon. Therefore it is vital that I constantly try and work out where the Internet is heading, and use that to my advantage to create work that incomparable to anything else that is available at the moment. Audiences loose interest very easily and the average attention span is on average 7-10 minutes, online users spend a lot less time and will simple move on to the next site if they do not find the information they are looking for. People do not want to spend time reading a lot of information of a website and a 2013 study carried out by The National Center for Biotechnology Information, U.S. National Library of Medicine, The Associated Press discovered that users won’t read all the text regardless how many words A website that contains less than 111 words the user will read 49% of the text on average, this is a moderately small ammount of text in comparison to the average webpage that contains about 600 words on average, the user usually only then read about 28% of the text and then spend a further 4 seconds for 100 words on a page. This indicates that webites are doing themselves a disservice by creating a page with lots of text. Through other research I have conducted tht is available on my blog, white space with less text is key. While our attention span last for about 7-10 minutes on average, you can guve users a ‘break’ from your content, allowing their attention span to ‘reset’. While you don’t want users to take a break from your site, it might be easier and more intuitive to include a form of break on the site. In terms of being in a presentation where you address your audience pysically, you can ask questions, do something interactive, tell stories or move on to a new topic. While some of this is an alien concept to using a website, I think that taking advantage of the information I have just researched and implementing it in a site in a new, user-friendl way may capture the audiences attention for longer periods of time. Another interesting and key factor in creating a website would be to allow users to understand the website as soon as they visit the site without scrolling or clicking anything, ‘Above tthe fold’ is a phrase used for the area that users see before they scroll. Jakob Neilsen noted in 2006 that 77% of users do not scroll on a website and only 22% actually reach the bottom, this means something is going wrong with current design of websites. It would be considered important, given the facts, that summary of the page and its contents is provided above the fold. Benifits of pageless websites are that they can created with responsive or adaptive formatting meaning they’re much easier to use on a range of different devices. They are less common and leave a better impression on the user, making it something thy will want to share through word of mouth. Tell a story,, following a timeline down of a ficticious character that needs his/her roof fixing. water drop starts leaking through the roof, follow the waterdrop through the house, following the steps as you go, explaining the services. A visual journey that takes the user from the problem to the solution.

References:

http://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web

http://www.statisticbrain.com/attention-span-statistics/

http://www.mrmediatraining.com/2012/08/23/how-many-minutes-is-the-audiences-attention-span/

http://en.wikipedia.org/wiki/Above_the_fold http://firstresponsive.com/pageless-design-future-web-design/

http://www.google.com/nexus/5/ http://www.sequence.co.uk/media/278589/fowd.jpg