Targeting Specific Audiences

Trust people with similarities – Taylor homepage with welcome using local ‘lingo’ is a statement I made in my initial research after I had read Nathalie Nahai’s “Webs of Influence” (https://akbrodie.wordpress.com/2015/02/05/notes-from-reading-books/.) This is something I decided to carry through to the final version after going through the wire frame stages. What we did was research the language and the things in each us state have in common, things they all know, and have common knowledge about, then use them in the welcome message to them when they land on the website. The idea is that the website can track the location of the user based on their IP address, which would allow the page to be displayed differently users from different states. Therefore, using information we gathered from our font research about the relevant fonts, we were able to create an ‘el paso style design, note the packaging of the el paso box here;

then note the images we created for the different states below.

Advertisement

Acorn roofing – finished site

This is the link to my finished website:

http://newmedia.artdesignhull.ac.uk/akenyon/index.html

SEO – Search Engine Optimisation

Understanding how meta data was something I made an effort to learn, since I had changed my design based upon the fact it is not SEO appropriate. I found that meta data is the content that is not visible by the browser but only search engines only. I needed to apply the basic searching techniques from Google into my design.

Search engines like google use “crawlers”, a web bot that follow links on the internet for the specific aim of creating an index of all the sites on the web worldwide.

I learnt that having multiple internal and external links to the site helps the website get a higher ranking, but this is along with the other parts of the how the search engine makes sure your page is most relevant to what the user is looking for.

Making sure that the hierarchy of content is obvious to search engines is essential as it means you get the relevant pages listed, you can do this by creating a sitemap. A sitemap lists all the pages connected to a webpage so that the crawler can easily list them. You also need to have a robots.txt, to make sure that the crawler knows it has access to the page and is meant to list this page.

Design of Multipage website

The final design was mocked up taking the best parts from previous designs and creating wireframes to begin with to arrange everything in the best manner possible you can see these here:

  You see here I have been influenced by some design work on Apple’s website;

Next I created a visual design with every detail covered so that when it came to coding the site it would be as straightforward as possible. You can see every page here;

Fourth Design Stage

This final design stage was basically for me to iron out any small details that I disliked about my design, to allow it become the perfect design without any flaws. To begin this I added the last bits into the design that I thought were required. The first one was the images of the president Bush and Kennedy, I decided I wanted to make them look even more liker a picture so I thought the best way to do this would be to frame them in an old fashioned Polaroid, you can see here the old and the next version of these sections.

The next change was at the end of the page, I currently had a page making the customer aware that there was an exhibition and how they could get involved, you can see the old one here;

I decided that the whole purpose of the site was to get people to go to the exhibition, therefore I should try to drive sales as much as possible. I did this, by building into the page, a way of purchasing the tickets that didn’t take them away from their current experience, and was easy and simple to finish. The reason for this is that I found in many purchasing devices, in an application, there are in-app purchases, so I thought I should take full advantage of it and implement it into my design. You can see examples of in app purchasing here;

So the original page has lost the prices of the ticket prices but has had the arrival of a “Buy tickets” button;

The next three steps are as simple as possible to make it easy for the customer to complete the purchase without too much hassle;

instead of boring white boxes I have opted for a design that fits in with the page, with the text inside the boxes so the customer is aware that it is indeed a text box. To make the customer aware of how easy the experience will be I have added a steps section at the top of the page so that they aware of how much more they need to do to complete the transaction. With total of just 9 boxes to fill in, the form is super simple and escalates the potential customer to a customer really quickly, without taking them away from their experience therefore giving them no chance to forget or think against the decision of purchasing the tickets.

For the final page, I have opted to use emotive language rather than sales talk like “Your sale is complete” the reason for this is because of the overall experience I want the user to have, and I believe this way it is much more immersive by making it more of an experience than just spending money. I have added an image in the background of a few important politicians looking smug with the caption “It’s time see the truth for yourself” indicating that they do not represent the truth, this would follow the sort of bias perspective the exhibition is giving the viewer. I have also told the the viewer that they will receive a starter pack, again language is important in being consistent with the overall experience for the user, rather than saying they will receive the tickets in an envelope, they will receive a starter pack which contains other information about getting involved with the exhibition campaign, which would raise awareness of the exhibition & website generating more profit for the exhibition owners, which is, other than informing the user, the overall aim of the site.

Next important step was to start arranging the content using a grid so that it has consistent layout throughout the design. I found a 12 column grid which I arranged vertically, and the duplicated it and made it horizontal, I therefore had a modular grid with which I had to be able to layout my content the way it needed to done. you can see this grid here;

Next, I created vertical guides within Illustrator to split the page into eighths, I did this so that I could have multiple ways of scaling and position objects within the design. This meant my design was consistent throughout and you can see these guides with grid on top of design below

This meant I had a grid for the sizing of objects and the vertical positioning of the objects within the design while I used the guides to align the content horizontally.

Next was an easy but time consuming stage of going through the entire design resizing, reshaping and reorganising the entire design to make sure it fit in the grid. This meant the design had a much better hierarchy and the content flow was much better and allowed the viewer from get from to the top to the bottom much easier. You can see the grid on top of the final design here;

I also redesigned the interactive sections to fit the grid and you can also see these here;

 

I also added in couple of addition faded images to give it consistency with the other sections and you can see all these here;

The Final Design is here;

The End/A New Beginning – Pageless Design

The final stage of building the site was to open Dreamweaver and actually create the site.  as you can see below, I reached an almost complete site with a html file linked with a css file. As I was working and writing up the alt tags and the meta data I realized that it was limited for the search engines to find my site and that my listing would be compromised due to the lack of these. I thought before I continued, I would research the downsides of pageless design and then decide whether to continue with this design, below is the progress I have made so far.

Understanding the importance of file hierarchy took an important role of setting up the site, I knew that should anyone else need to come and work on this site, they would need to understand what all the files were. Therefore I made sure my files were labelled correctly and tidily. You can see the structure below;

The site is constructed correctly so that the layout is fully in order, I used Lorem Ipsum as filler text to begin with as that is a fine detail that can be changed in a later stage. The images in portfolio section of the page have a rollover feature so that you can see what the property looked like before the work was done. This was done using a <table> element to allow the images to be laid out correctly on multiple screen sizes. I set up code to allow the user to press the “Contact Us” button on their phone and would automatically start calling from their phone. These were both two things I do think work really well, so these will definitely be staying in the design.

There are two faults I have made so far though, In the .textbox div that overlaps the people on the roof, I have made the mistake of using attributes (position:relative and top:-250px;) This is a specific fault as you shouldn’t use these as it will mean the following content will not follow it’s normal flow, therefore, I must research an alternative method. The same can be said for .textbox2 but this one hasn’t been adjusted to the full extent to be over the top of the image.

This means I need to research an alternative method, which doesn’t break rules of html and css code, my research indicates that an z-index attribute would create a layer over the top of the other sections of the page, this is exactly what I need so I will be researching Z-Index.

This is evidence of the website I created;

DESIGN

HTML

CSS

Wireframes & Designs.

A wireframe is like an architects ‘blueprint’ but instead of a building its of a webpage. It is the general hierarchy of the content, it excludes the images, buttons, colours, style, colour and graphics an focuses solely upon the functions, hierarchy of content and the different scenarios the site can be seen, desktop, tablet and mobile. Much like designing a logo for the first time, you must make sure it works in both black and white. The wireframe is drawn up in black and white, this can be done in multiple ways, there are many resources available for developers and designers on the web but you can also draw on paper, whiteboard or even a mockup within photoshop itself. Due to the simplicity of the concept of making wireframes, they are very quick therefore allows you to create many concepts in a small amount of time.

I also created physical designs with colour and images to help me visualise and decide which one would be best. I used colours that would best portray the business based upon the colour research, to provoke certain emotions in the user.

Here are my three wireframes & their physical design…

Number 1.

This wireframe gives the user something relate to, it tells the story of someone who comes home to discover their roof is leaking, then called acorn roofing to get it fixed. You get to see as as user the result of using the company, this tries to my brainstorm researching the sales techniques, having interested the user, now at the end of the page, a telephone number to contact the business. This method works in theory but comes across as cheesy, childish and unprofessional. I decided not to use this as my design.

Number 2.

The most professional and easy to follow wireframe, this is the one i decided to take through and actually design as a final website. It gives the user what it wants, a description of the company, confidence with using their services because of previous customer’s comments on the work that had been done and finally the contact details. This wireframe cuts to the chase and gives the user what it wants.

Number 3.

Very similar to wireframe number 2 in the sense that it is designed to cut out clutter and give the user what it wants, its style is also very similar. The drawbacks of this wireframe is that the ‘above the fold’ section of the site is simply an image with the logo and contact details which doesn’t particularly entice the user to scroll. The contact section of this page seems to be quite messy also.

References:

http://en.wikipedia.org/wiki/Website_wireframe

http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399

http://uxmovement.com/wireframes/the-importance-of-tying-personas-to-wireframes/

http://wireframes.linowski.ca/wp-content/themes/darwin/images/PersonaTemplate.pdf

Selecting the Logo

The Selection Process

I decided to create the website logo to make it look truly professional.

These are the initial designs that didn’t get chosen:

It was a tough choice turning down some of these ideas as they were designed to represent a roofing company, middle right looked to clip-arty, second one down on the left didn’t work as you shouldn’t have gaps in a roof, so having a gap in the logo just was a silly idea. While I thought it was a good idea to have a visual with the text, I didn’t think any of them worked enough and that they all overcomplicated the design therefore I chose this design;