Friday 30 March 2012

Making the site

Now that I have finished my code and all of my pages, here is an example of what my pages look like. Unfortunately I have still not received any content or images for the site so it is still filled with holding text off of another site. This is the only page that accurately shows what PACES final page layout will be, as I have all the information needed to fill this page. The other pages will have to be a rough guide for what the content could look like.
 Here is a screen show of my website ready for crit, and the code that goes with it. 







Wednesday 28 March 2012

Making the site

Once I had all of my elements made in Illustrator and exported so that they could be faster on the web, I started building my site. The first thing I did was created my folders, I made a css folder with a document called styles.css inside, I made an image folder called images and then I created a document in TextWrangler called "index.html". In index.html, I started by making my basic structure consisting of a head, body, wrapper, navigation, scrollbox and a footer navigation.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PACES</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="wrapper">

<div class="navigation">
<ul class="nav">
<li><a class="home" href="index.html">Home</a></li>
<li><a class="events" href="events.html">Events</a></li>
<li><a class="team" href="team.html">Team</a></li>
<li><a class="prices" href="prices.html">Prices</a></li>
<li><a class="contact" href="contact.html">Contact</a></li>
       </ul>
</div><!-- end navigation-->


<div class="scrollbox">


</div><!-- end scrollbox-->

          </div><!-- end wrapper-->

<div id="footer">


                <ul class="bottom-nav">
<li><a class="home" href="index.html">Home</a></li>
<li><a class="events" href="events.html">Events</a></li>
<li><a class="team" href="team.html">Team</a></li>
<li><a class="prices" href="prices.html">Prices</a></li>
<li><a class="contact" href="contact.html">Contact</a></li>
       </ul>

</div> <!--end footer-->




</body>


</html>


It was in my CSS where these things started to come together in the shape of a website. As you can see my navigation has been made up of unordered lists, this is the CSS, I used to get them to sit on the page and look as they did in my mock ups.



ul.nav {
display:block;
list-style-type: none; (this is to get rid of bullet points on my list)
-moz-border-radius: 30px; (this is part of the code to get the corners of my box to curve in firefox)
border-radius: 30px; (this is part of the code to get the corners of my box to curve in other browsers) 
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
    margin: 110px 0px 0px 0px; (here I have used margins to make sure the box is in the right place on the page)
    width: 70px;
padding: 10px 10px 10px 30px;
float:left; (here you can see the div is floated left to make it sit against my content box)
height: 170px;
line-height: 32px;
opacity:0.7; (this is here to drop the opacity of my box to 70% on most browsers)
filter:alpha(opacity=70); (this is here to drop the opacity of my box to 70% on internet explorer)
}


ul.nav li a{
text-decoration: none; (this is to get rid of the blue link colour and underline)
color: #fff; (here I have set the colour of the font to white)




Below you can see the code I used to make each link have a rollover of a different colour

ul a.home:hover {
color: #e94445;
}


ul a.events:hover {
color: #f0e753;
}


ul a.team:hover {
color: #68b657;
}


ul a.prices:hover {
color: #5a6eb3;
}


ul a.contact:hover {
color: #ad68a8;
}



Friday 23 March 2012

Idea development

Once I had heard the feedback from my pitch, I realised that I needed to make my idea more gender neutral, so I set about drawing a background that kept elements of the original image but transformed it from being a pattered background to being more of a scene. Here you can see the original image I used in my mock ups.




I decided I really liked the style of grass and flowers so in Illustrator, I started creating my own version of this but making it have a blue sky instead of a pattern, making it more like a garden and less like a wallpaper. Here you can see my design starting to come together.



I added objects along the bottom and clouds along the top to make the scene complete and then added my scroll box, logo, navigation and footer to get a real idea of what the site would end up looking like.




Tuesday 20 March 2012

Pitch Feedback

I pitched my work to the class and client, showing them my development of my logo from research to final piece and my layout ideas. The feedback I received was positive and has given me confidence in my work so far. The main points I picked out from the feedback were,


Good research into logo, well developed and nice final logo.
Good layout ideas )the feedback on my layouts were very evenly spread between the two designs however the client seemed to have more of an interest in the second design.) 
The second design needs to be more gender neutral 


Through this feedback I can now draw up some more sketches and come up with some more designs based around what I have at the moment to make the site look more gender neutral while keeping the bright interesting feel the second idea has.

Saturday 17 March 2012

Layout ideas

Now that I have my logo and have decided what pages my site will feature, it is time to start looking at layout ideas. Here I have drawn up two basic wireframes showing the possible layout structure of my website. The one on the left shows the navigation attached to the content section, this was formed of an idea I saw on another website where they used what looked like tabs coming out of the content as navigation, the content section on this design is made to stay the same size and is to be fitted with a scroll box or similar to hold the content section at the right height, the header and footer navigation are separate from the content box. On the right hand side you can see my design where the content box is not restricted to a certain height, in this idea the content box is as long as it need to be, the footer navigation is at the bottom on the page and may be attached depending on how long the content is, the side navigation is separate and so is the header.



After drawing these up I did some sketches which you can find in my book and these developed into mock ups which you can see below.

This design is strongly based on the wireframe on the right hand side above, the navigation on the left is separate from the content box and matches the design of my logo, the footer navigation at the bottom also matches the rainbow colours and the background is a neutral polkadot pattern to give texture but not over power and this colour is also very gender neutral which is good for a site that needs to cater for both sexes. 

This is the same design but with a tab like navigation which has come from the first wireframe above. I made this change as I though the navigation in the first mock up looked too clunky and out of place.

This design is based strongly on the first wireframe I made, this design has a strong, interesting background with the scroll box content to hold the page at the right size and the tap navigation on the left hand side. I prefer this design to the one above, however I will pitch all three to my client and see which they prefer. 




Friday 16 March 2012

Navigaion

On the brief sent to us by Peggy, we were told that she wanted the following things on her site:

- Introduction to PACES
- Prices
- What children do whilst in their care
- Staff and Qualifications
- Management Structure
- Healthy Eating
- Keeping Safe
- Money Saving Tips

After looking at there, I decided to could break this down into five pages of the website, the pages I have broken this down into are:

Home- Introduction, and what children do whilst in their care
Events and extras- Healthy eating, keeping safe and money saving tips
Prices- Price list/hourly rate
Team- Team members and management structure
Contact- Contact details and location

To show that all my pages will be linked to each other in a complete circle I have drawn this navigation diagram. This clearly shows that the navigation on my pages are fully linked to one another and that wherever you are on the site, you can reach every other page from there.


Logo designs

As PACES do not have their own logo, I have decided to create one for them. I have been looking at various different logo's on other nursery and pre-school sites to see what does and doesn't work. The first thing I noticed was that a lot of the logo's look outdated and old and do the nurseries no justice, however they were all brightly coloured and a few of them had rainbow colours on them which I felt worked really well. I started drawing up some designs and came up with a variety of different things. The one that stuck in my head the most was the drawing of children's building blocks, here you an see the different design ideas I had for this idea.








The one I liked the most was the last one as it had interesting angles and shapes while still being very readable. I felt this was my strongest design so drew a mock up of this on Illustrator. Here you can see my black and white mock up of my idea.






I then had the trouble of deciding the colours, because of the rainbow colours I had seen in my research I decided to go with the same colours and keep them in the rainbow order. First I created a bright set and then did the same in pastel colours, after this I then made the stroke smaller to see how that looks, here you can see my three designs.






After seeing all of the designs together and asking a few people in my class what they though, I decided that the brightly coloured logo worked best, so I added what PACES meant underneath to add the final touch. I can now start designing my layouts with this design. 



Wednesday 14 March 2012

Usability

Usability is about how usable and user friendly your website is. There are a lot of things to take into consideration such as navigation, speed, layout and many more.
As more websites are made, users become used to the logo or company name being the first thing on the page, either in the top left hand corner or the top centre, this is often made to be a clickable link which will take you back to the home page. There are other rules with navigation, such as the 'contact' page holding contact details like phone numbers, emails and postal addresses, when you change these rules on your website, it confuses users and they are less likely to come back to your site as people who are trying to find information don't want to have to complete a quiz before finding it. because of this I will need to make sure I think about what will be on each page and wether that will suit my users or not.
Internet users are often looking for information quickly, if someone is looking for a phone number on the internet and by using your site they have to make 4 clicks, while on another its just 2, they will use the other site and forget about yours. It is very important to make sure everything is easily accessible through the whole site and can be found quickly and if anything needs to be downloaded either for the site or off of it, this also has to be quick, waiting for a large background image to load is not going to keep users on your site, they will simply go elsewhere for what they are looking for, to make sure this isn't a problem, I will make sure that I compress all of my images so they do not take ages to load and if I need any documents for my viewers to download I will also take into consideration the size of these and compress them accordingly. 
Another thing I need to be aware of is opening links in a new window, as around 60% of internet users, use the back button as their primary navigation, opening a link in a new window stops the back button from being effective and upsets a lot of users. 


The site below gives some great tips to help keep sites usable, I will try and keep to as many of these as possible when I create my site.
http://www.keyrelevance.com/articles/usability-tips.htm








SEO

"SEO is a technique which helps search engines find and rank your site higher than the millions of other sites in response to a search query. SEO thus helps you get traffic from search engines."
http://www.webconfs.com/seo-tutorial/introduction-to-seo.php

SEO has become increasingly more important as search engines such as Google have grown, now when users are looking for something they just type it into a search engine and normally travel as far as the first one or two pages. If your site can not be found by a search engine, you will miss out on tons of traffic.

To make sure that your site ranks highly on Google, they have provided a list of things you will need to think about.


  • Make pages primarily for users, not for search engines. Don't deceive your users or present different content to search engines than you display to users, which is commonly referred to as cloaking.
  • Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link.
  • Create a useful, information-rich site, and write pages that clearly and accurately describe your content. Make sure that your <title> elements and ALT attributes are descriptive and accurate.
  • Keep the links on a given page to a reasonable number (fewer than 100).

Here is a very helpful site, talking you through each step of making your site SEO effective, I will need to consider a lot of this while building my site.
http://www.seomoz.org/beginners-guide-to-seo/how-search-engines-operate

Questions for PACES

After looking at the basic questions we would need to ask each client, we then broke off into our teams of four who were all working on the same client and devised questions we needed to send the client. This is the email we sent PACES.


Sent on the 13th March:

Please answer the following questions so we can effectively design a website to suit your needs:


Please give a short background or history of the company so we can get a better feel for what you do.

What is the main purpose of the website?

Who is the main target audience?

What pages would you like the website to have?

Do you have a current logo? If so would you like to have it rebranded?

Have you got a idea of what you would like the site to look like? For example colour scheme.

Do you have content and testimonials (ofsted report)?

Do you want a community section where parents and visitors can comment?

Do you want a “team” section? If so please supply required information

Would you be happy for us to visit the Nursery to get a full understanding of how your business operates?

Please supply all the content needed for the website, including prices and images

Can we email you with ideas, suggestions and further questions?


We look forward to hearing from you soon.





We received a reply from Peggy today saying:


Do you have a current logo? If so would you like to have it rebranded?

No we do not have a real logo we have a letter header but that’s about it, so yes a new one would be amazing

Have you got a idea of what you would like the site to look like? For example colour scheme.

I am very open to ideas; I would like it to be very user friendly, I am sure I can leave this in your capable hands

Do you have content and testimonials (ofsted report)? 
Yes I will attatch it for you . http://www.ofsted.gov.uk/inspection-reports/find-inspection-report/provider/CARE/EY342851

Do you want a community section where parents and visitors can comment?

That would be very good

Do you want a “team” section? If so please supply required information

Yes that also would be very good this could include some of our policies and procedures

Would you be happy for us to visit the Nursery to get a full understanding of how your business operates?

You would be very very welcome just name a day and time

Please supply all the content needed for the website, including prices and images

Poppy is going to be taking photos for us and currently we don’t have any I am afraid.

Prices are £3.50 per hour, telephone number 01273671675, 07841473049.

e.mail pacesforbrighton@btinternet.com

Parent And Children’s Educational Services that’s what PACES stands for.

We offer training places to parents wishing to complete NVQ in childcare and education. We work closely with B/H city council.

Address Valley Social centre Whitehawk way Whitehawk Brighton BN2 5HE

Are you happy for us to email you with ideas, suggestions and further questions?

Of course I am happy to provide as much information as I can 



Although we are pleased she got back to us so quick, she has missed a lot of our main questions which are important such as "what pages would you like the site to have?" and "what is the main purpose for the site?"
We do not have much time until our pitch now so getting on with designs is the most important thing at the moment. We will have to try and push for other information later.

Friday 9 March 2012

Questions

As a class, we put together a list of questions we would ask each client to find out more about their business and what they would like their site to look like, here are the questions we decided we would need to ask.




Nursery
Please give a short background/ history of the company.
What age range are the children you look after?
Whats the site for? Current customers or attracting new customers?
What do you want the site to feature? Events? Times? contacts? If so please
Do you have a current logo?
Have you got a theme or colour scheme in mind?
Do you have content, images and testimonials (offsted report)?
Do you charge? If so do you want your price list on the site?
Do you want a community section where parents and visitors can comment?
Do you want a "team" section?



Employability
What do you do? What are the project aims? What activities do you run?
Whats the project background and history?
Who else participates and who are your sponsors?
Whats the site for?
What do you want the site to feature?
Do you have a current logo?
Have you got a theme or colour scheme in mind?
Statistics of current success stories
Where do you operate?



Home Appliances
Please give a short background/ history of the company.
What and who is the site for?
What do you want the site to feature?
Do you want prices up on the site? If so please supply this.
Do you have a current logo?
Have you got a theme or colour scheme in mind?
Whats the turn around for fixing appliances?
Do you have a collection and removal service?

Thursday 8 March 2012

Brief

For this new project we have been asked to create a website for a live client, this means that the client has a real company and we will have to contact them throughout the project to gain feedback and collect any information we need such as images and content. I am very much looking forward to this project as I feel it will help me learn what it is like to work with a real client I don't know and web design is mainly what I enjoy doing. The only concern about working with a real client is the idea of having to wait for a response and the worry they will disapprove of your designs and what something completely different. 
Overall I think it will be a fun project and the challenges will be helpful to my learning. 


We have been given a choice of three clients,


Client: Clive Arnold
Project: Central Appliances
Description: Central Appliances are a small, local domestic appliance company established for 23 years. They supply and repair domestic appliances in the Brighton and Hove area.
Requirements: A simple design with just 2 or 3 pages. The client doesn't want a complicated site with too much content. This should be balanced with getting the key information and message across.
Target Audience: General Public, Lettings Agents and Landlords.

Pros and cons,
Clive Arnold has a good business which has a great hook of being local and having 23 years of experience, however I feel I would really struggle with having a site with minimal content as I do not work too well with white space.



Client: Clive Bonny
Project: Self Made Creative Clothing
Description: Self Made Creative Clothing supports, and acts as a catalyst for projects helping learners of all ages with creativity, innovation and entrepreneurship using low cost accessible clothing materials and other associated recycled resources.
Requirements: A media rich website to showcase project aims, background, participants, activities and outcomes.
Target Audience: Students, Employers and People interested in recycling, sustainability and enterprise.

Pros and cons,
Clive Bonny would like a site that is interesting and busy which I would find much easier than having minimal content like Clive Arnold, however his business is confusing and targeting both students and employers in the same design will be a challenge. This site could go one of two ways, it could look very professional and meet all of the clients needs or just look messy and overcrowded, I feel this site would be a challenge. 




Client: Peggy Fenlon
Project: PACES, Nursery
Description: PACES for Brighton provide a high quality care and education for children, primarily below statutory school age. They employ 6 staff and work with volunteers from Brighton City College giving them work experience and training. They aim to continue fund raising to keep costs for the community down.
Requirements: A regularly updated website is a requirement for the funding they receive. They would like to keep parents up to date with current PACES information and provide general advice from the website. Website content should cover:
- Introduction to PACES
- Prices
- What children do whilst in their care
- Staff and Qualifications
- Management Structure
- Healthy Eating
- Keeping Safe
- Money Saving Tips
Target Audience: Mainly single parents, often with limited reading skills. Looking to also attract new parents and families.

Pros and cons,
This is the sort of site I feel happy with as I feel it is a chance to really explore my creative side and create a site that suits the needs of the client, however a massive con to this is that the brief was handed to us late and this has started warning bells ringing in my head, going with this client I may well be setting myself up to a struggle with keeping deadlines and receiving information I need on time. Although the worry of this client being on time with replies could cause a huge problem, this is the client I have decided to go with as I feel I could make them a very good site which really suits the nature of the business they run.

Friday 2 March 2012

Evaluation

Having now come to the end of this project I am pleased with how it went. I feel the video I produced answered the brief fully and I am proud of how it has come out.
When I first got the brief I was unsure how I would be able to deal with the idea of not being literal and as the project went on I realised this only got harder. I really struggled to find an idea with a strong enough theme to stay interesting while not taking away from the speech or being literal. 
My first idea of filming water started strong but I was losing faith in it and struggling to take the ideas any further forward so decided to drop it before I wasted too much time on it.
I tried a few different things between ideas but none stood out to be great. I decided that I would scrap everything I had done including editing a piece of music which fitted very well with the speech. 
It took a few days but I finally got a new idea which I could take forward and would get me through the last part of the project. 
This is when I came up with my old film idea. I had a vision in my head of an old cinema projector turning on and beaming images over to a screen of abstract, obscure objects moving along to the speech, with this idea then came the thought that the only sound should be the speech and its crackle. After picturing all of this I then decided that as the speech is going to be the main focus of the sound it should be the main focus visually as well. So then came my idea of having the whole speech in text and the images in the background as more of an accompanying texture than a video clip. 
Once I had decided all of this I was set on getting it done so I filmed objects and foods and then in final cut zoomed in, cropped and edited them to look abstract and somewhat unrecognisable as they are meant to just be a background. I changed all of the clips so they were in sepia and added a clip over the top of film scratches and noise which came with a boarder which fuzzed and jumped around making it look exactly like I had imagined. 
When it came to showing the class my work, the feedback was good. There were a few changes that were suggested like lowering the sound of the beeps on the countdown and fading in the start of the video from black which I agreed with and changed. The other suggestions were to have different type faces to emphasise different words and also to change the last bit so the whole of the quote was shown not just one word at a time, although I can see that these changes might improve the video, with the time scale I have I cannot do it. I would risk throwing my whole video off time and therefore having it incomplete. For this time I will just have to put it down as something I would change if I were to do it again. 
So overall I am extremely pleased with how it went and feel I have really over come this literal barrier that was holding me back. 
Here is my finished film.