Saturday, 31 March 2012

Coding - Gradients

Most of my website is going to use CSS graidents for the design. I am using CSS as it is much more practical than image gradients and work on almost all modern browsers.
This was the code I ued on my navigation bar to give the effect of a dark to light green gradient:

In the code, you can see that the code "left" means that it is going from left to right, there fore making it a horizontal gradient. the 0% and 100% are the start and end points of the gradient, with the hex numbers being the colours.

Starting to Code My Website

To start coding my website, I used the tutorials we were shown in class to lay out the divs, but have modified it to suit my own site design.
So far, I have made this:
There are still a lot of things that I need to add to the site, such as navigation buttons, a banner, a background and a footer. However I have most of the basic parts of my site here, such as the rounded news bar and the gradient on my navigation bar. Hopefully the website will look more complete when I add a banner.

Friday, 30 March 2012

Emailing the Client

So far, I have emailed the client twice, once before meeting them at the nursery, and the second one today. I did not receive and email back from them the first time, however they did show me that they got the email when I met them. I sent them the other email to get and opinion on the ideas I have made so far.
This is the screenshot of the email I sent first.

Thursday, 22 March 2012

Visiting PACES Nursery

Our website group visited PACES to have a look around and to get a feel of what the place is like. Whilst I was there, I took some pictures on their camera so hopefully I will get those soon.
We got to look around the facilities there and see what happens during the day at the nursery. We also got to ask more questions to the client, which was helpful for figuring out what to add to the site layout.

Wednesday, 21 March 2012

Pitch

Overall my pitch went well. The client liked my ideas, especially the foot idea on the logo. The mockups were also well received. As for criticism, I mainly got it on my colour schemes and on the logo. As the client wanted the colours to look gender neutral, I shall change my site colours in future mockups. They also said that the feet should be the other way around, so the logo looked more balanced.
When I showed off my website research, the client said that she linked the way the navigation was laid out on the Little Stars Nursery site, so I will take this into account when I make my new mockup.

Tuesday, 20 March 2012

Mockups

These are my two finished mockups:

The first design I made was for a horizontal nav bar.


The second one uses a vertical nav bar, and also features a news feed underneath the banner.

I am still unsure which design I should use at this point, and I shall wait until my pitch for extra feedback.

Logo Development

When I first started sketching up logo designs in my sketchbook, I was stuck for ideas as I had to think of a logo from scratch. I started by using wordplay on the word "paces" to come up with a foot or walking idea.
These were my initial ideas. The first one, in the top-left, was a simple foot. The letters were moving upwards to look like it was moving. I then went onto the the "parent and child" idea, as the name PACES comes from "Pant and Children's Educational Services", so I thought adding a parent and child together would work for a logo theme. The logo on the time was also based on the parent and child theme, but didn't use feet on the logo, but went on with a "moving on" theme, hence the arrow. I decided to scrap this idea and continue with the feet idea as I felt it was the stronger of the two.

After making the foot idea, I went to my current logo design. This included two different sized feet to represent a child and adult foot. I also added the meaning of PCES at the bottom of the logo.
This is my finished logo design. I aligned all the letters, unlike my sketch. I also changed with way the feet were ordered, although this design may change after my pitch.


Colour Schemes

I am unsure of where to go with my colour schemes, as I have not been given a direction for them as of yet. These are three different ones I have come up with that I can experiment with on my site layouts
They all have grey in the as I thought it would work well for a background colour, although all of these colours schemes can be changed at this point as I am still unsure of where to go with them until the client looks at them. For now, I am sticking with the bottom colour scheme as I can experiment with all of the different colours in it.

Fonts

For my website, I will be sticking to web-safe fonts for the main text, with the main font being Helvetica or Verdana.
Helvetica
Verdana
I decided to choose these fonts because as they are on pretty much all computers today, so they would work. If neither are on the computers, I will use CSS to make it go to the default sans-serif font, as san-serif is easier to read on-screen than serif fonts.


For my logo, I have looked at a font called Hobo Std









I have looked at this fonts since it is rounded and easy to read. 

Website Research

To help design my own website layout, I have looked at three different nursery websites for research.

The first website I have looked at is for "Little Stars Nursery'.
The things I liked about this layout was the rounded edges on the main content box, as it goes with the rounded fonts used throughout the site. The overall theme of the site goes well with the name of the nursery too, as the background and logo have stars on them. Although this layout does have some good points about it, I think that most of the website could ook better. For instance, the font used throughout the site is Comic Sans, which is an unprofessional looking font, even though it is a nursery website, this font should be avoided. I also think that the background looks a little too distracting, and that less colours could be used on the stars.

The second website I have looked at is for 'Happy Child Nurseries'.
This website looks much cleaner in comparison to the first website I looked at, and has more imagery to break up the amount of text that's on the site. I think that this site looks good, and the navigation is well placed on the site, and I like that they used small logos for the links to different sites. The Image used to break up the navigation and the page text is well placed, and works well to welcome the user to the site. However, I think that this website's layout is a bit too dull and grey for a nursery site, and that the colours should be made a little bit brighter to make it look more appealing.

The last site I have looked at is for 'Abbeywood Tots Day Nursery'.
This website looks similar to the one above, but I think that the brighter colour scheme works better for this site. The background colour works well, as it is simple looking, but not to plain, like a white background. For my website, I think I will use a colour similar to this in my design. The imagery is also similar to the one about, with the large picture breaking up the banner and the main site text. The navigation also works well as the page your are on is highlighted with bold text. I do think that this shade of green does not work that well for a nursery website, however.


Friday, 16 March 2012

Answers From the Client

Due to complications, we could not mee the client on Monday. However, we sent an email to the client that day, asking them questions about the site, such as asking for content and what the would like on the site. Here was what we got back from them:

"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.
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" 

Sunday, 11 March 2012

Questions to Ask

After breaking down parts of the brief in my sketch book, I devised some questions to ask Peggy (The client) for next lesson as she be here to talk to us.
From the brief, I have a small amount of information about what is needed for the site, however not much is elaborated on that. Here are some questions I have in mind so I can get some better ideas about the company:

1. Do you have an existing logo?
2. Do you have any colour scheme ideas in mind?
3. What kind of imagery would you think of using for banners etc?
4. Would a community section on the site be useful? eg: Where parents can comment
5. Any other info about the nursery we would need? eg: Ofsted reports
6. Layout ideas? Ease of access for parents?
7. Would you want your site to have a more personal approach? eg: Section about staff
8. Brief history of the company.
9. What are the prices for the nursery?
10. What would be on the page "Money saving tips"?
11. What is taught at the nursery?
12. What makes your nursery different from other ones in the area?

Friday, 9 March 2012

Brief From Paces Nursery

After the first lesson, we got placed into groups which would decide on which client we would work for. Out of the three, I got placed with the Paces Nursery client.


Client:
Peggy Fenlon
Project:
PACES for Brighton
Description:
PACES for Brighton provide 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.
Contact details:
PACES for Brighton The Valley Social Centre Whitehawk way Whitehawk Brighton BN2 5HE
07841 473049 01273 671675
pacesforbrighton@btinternet.com
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 & 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.

Web Design - Brief

"The Brief (general description of the course work requirements)
For this assignment you will be given a client to produce a web site for.  These clients are working with a company called First Steps, who have negotiated the individual briefs with the clients, so they will be briefing us on the nature of the clients’ requirements on the first day of this project (Monday 5th March).  During the project you will be liaising with the client and with First Steps by a set of agreed deadlines for research, ideas, mock-ups and a prototype.  A record of your correspondence with the client, including any feedback they have given you, must be presented in your blog. 

Three websites have been commissioned so you do not have a client each.  There will be groups of up to 4 students working on each project, but you are working competitively rather than collaboratively. Your tutors will allocate you your group and client. You will each be working individually to answer the brief and produce a website suitable to the client’s needs, though you may need to generate content for the website collaboratively. The client will ultimately choose one site they intend to use professionally (as long as there is one which is suitable to their needs and produced to a high enough standard). 

You will build your web site using html and css in a text editor, such as Textwrangler, and the graphics will be made in a Photoshop and/or Illustrator, then compressed for the web.  You will build and develop skills to provide a sophisticated interactive user experience in this website.  This will mean you can introduce interactive image display features such as remote rollovers and lightboxes, as well as enhancing the interactivity with features such as animated transitions using jQuery and CSS3 techniques.
For the typographic elements of your design you will use webfonts using either @fontface or Google Web Fonts.

You will have to use the First Steps initial briefing on the client and their requirements as the terms of reference for your visual research and the development of your designs.  It is important that you gather a strong set of visual references for the subject area with which you are dealing and that you can make clear and cohesive decisions about the appropriate visual language you use. 

You will need to demonstrate your approach to the creative process using methods that are standard to the digital media industries.  As well as your visual research, your sketchbook and blog should show sketches, ideas and experiments for the designs in development so the processes you used to reach decisions on such issues as wireframe layout, colour, typography and navigation are transparent.  Navigation must be planned using flow diagrams. 

Just as you will have to constrain your design decisions to the expressed wishes of the client, so too will you have to remember that you are making a web site and allow for the limitations of the technology. Your design should pay clear consideration to what you have learned so far about the realities of web design.  For example, you should think about the target audience identified by the client and consider what kind of computer they will have, what kind of internet connection they have, what kind of screen resolution they’re likely to be using and how that will affect the images and the design you make.  Your sketchbook and/or blog must include a section of research into these kinds of issues, including recent statistics on browser type and version use, proportions of different screen resolutions, platform, and internet connection speeds.  You should also comment on why this is useful information to you as a web designer. 

In the pitch you need to show the research process in order to justify how you reached your design decisions. The pitch must include navigation flows, wireframes and full mock-ups based on grids. 
You must produce a ‘Branding Guideline’ for your proposed design. This should include Logo design, typographical choices for headings and body text, colour palette, examples of interface elements, at least 2 page mockups and a sitemap of your navigation. You will also include a price for the project.
This Branding Guideline must be included in your pitch and must also be uploaded to the server as a pdf document and a full colour printed version supplied at the time of the pitch.
You need to show and justify where you are intending to include your enhanced interactivity.  You need to make any changes to the mock-up based on pitch feedback and send .jpgs of them to your client for feedback following the pitch.  Further changes may be necessary following feedback from the client, and on-going liaison with the client may guide your ongoing design development.
(please treat this as if you were competing for a paying job and prepare your presentation accordingly).  

The site you create must be optimized for search engines and accessible to people with disabilities. Your sketchbook and/or blog must also show research into these areas and your site must demonstrate the application of techniques helpful to SEO and accessibility.

Sites will display differently in different browsers, so the testing process is important. You will put your site online on the courses server and test on a range of browsers and platforms at a range of screen resolutions. You will record the testing process in your sketchbook and/or blog. " 

Friday, 2 March 2012

Evaluation

Overall, I think that this project could have gone better. I am not the best at video editing, so I struggled with some editing processes in Final Cut Pro and Motion.  As a result, my video doesn't look as good as it could have done. This is also reflected in my first crit, as I didn't get as good of a response for this project as my previous ones.
I also had problems with time on this project. I found it difficult to come up with the idea originally, and I didn't start editing my video until rather late in the project., as I was still a little bit uncertain about how I going to put together my video at that point. Hoever, I am pleased at how I managed to get everything done in a short amount of time.
As for positive parts of this project, I like the clips that I got for the video, as there was a good range of landscapes, especially since there was snow earlier on in the project, so I could get some nice clips from that.
I also think I did well with re-editing my video to match the criticisms I got, and that I tried my best despite my lack of knowledge on the programs I used.
In conclusion, this project was not my most successful, however I learned a lot of things about thinking outside the box for making design decisions as we could not make literal interpretations of the speech. I also learned a few things in Final Cut Pro that I didn't know before.

Changing my Video

After my crit, I decided to make some changes to my video.
The first one would be to reduce the text size of the existing text, and and add more text to other areas of the video. I moved the text to the edges of the video so it would show more of the clip. I also added more text near the end of the video so the would be text at both ends of the video.


Secondly, I rearranged the clips so the video would tell a better story. I put the snowy clips at the start of the video, and the clips transition to the spring ones later on in the video, when the music starts to pick up.

I also got rid of some of the effects that didn't work as well, such as the ripple effect.

First Version of my Video

Here are a couple of clips from my video that I am going to show before my crit. I am still not that fond of the few of the decisions I made on this video, but after I get feedback I can see what parts of it can be improved.

My Crit, and What I'll Change

After showing my video to the class, I got mixed responses from my classmates. Overall the clips were considered to be good, although the main criticism for them were that there were a few that were unfitting or abstract, My reasoning for having those was to break up the atmosphere of the clips somewhat, so my clips didn't get too repetitive.
Another main complaint for my video was the audio choice. I got many comments about the audio getting way too fast for the timing of the speech. As it is late in the project, I do not think that I could completely re-edit my video to be timed with a new song, so to make my video better, I would need to either lower the volume of the song, or get rid of the song completely. However, I am slightly against this idea as it may make my video a bit boring.
As for editing techniques, some of the effects that I put into my video were seen as looking tacky, such as the water ripple effect I put on the water dripping clip. I will take this out of my video entirely as I can see where my classmates were coming from about that. Another editing criticism is that the clips do not tell much of a story. However, I can fix this by reordering the clips so many of the winter clips are at the start of the video, and the spring clips are at the end, which represents change.
I also got some advice about my use of text on the video, as I was unsure about it from the start. I made the text too big, and it overshadowed the clips I had used.  I only have to make the text smaller to fix this.
These are the main changes I will have to make to my video, but I may also refine other parts of it.

Text

For text, I used a mixture of Motion and Final Cut Pro. After making the America Map text in Motion I exported it so I could work on it in Final Cut Pro. I then fixed it up so it would fit with the words more accurately. This was done by slowing down the video.

As for the rest of the text, I added it in Final Cut Pro as I found using Motion to be time consuming for me because I have not used it that much in the past. To add text on Final Cut Pro, there is a button under the viewer with has a text icon. Under the dropdown menu, there is an option for regular text. This is the one I used for my video, so I could add simple text.

After selecting to make text, there are a lot of options for editing the text properties, such as font, size position on the video, tracking, etc. For my text, I used Helvetica with a font size of 162. I had to change the origin point for each word f my text, which too a while. This was done by setting the numbers as co-ordinates, and it moved the number along the horizontal plane to animate my text across the video area. Syncing up the text with the speech also took time, as some of the words are said quite quickly.

On the last word of my speech, I made it go on for longer and get it a fade out effect to go along with the rest of my video and audio fading out.

Apple Motion

I used a little bit of Motion for my video. I used it make a text version of the America shaped word cloud, which I redid in a different font. This was slightly time consuming, as I had to rewrite all the text, rotate some parts and make them fit together in a new font.

After doing this, I added a camera to animate the text. This is done by selecting "Add Camera".
After adding the camera, I selected it and went to the inspector, where I could change the properties of the camera. From here I could change the points the camera was looking at by using the X and Y axis positions.

I wanted to zoom in on specific words, So I set a keyframe at the first word, so the camera would zoom to that point. After that, I left a keyframe a few moments after it so I would sync up with the words. I repeated this with all of the other words, so the camera would pan over to the different words.

Editing Techniques

After creating my storyboard and importing my clips, it's time to start editing my video. The first thing to do would be to place all of the videos on the timeline which is simple enough. For some of my clips that were longer, I selected in and out points to choose a certain part of the clip. This is done by showing the clip in the viewer, and selecting "Mark In" an "Mark Out" at the chosen start and end points. After doing that, dragging the clip from the viewer to the timeline will place it there.

To make some of my clips blend together, I used a fading technique. This is done by using the pen tool on the timeline, where you can add points and move the opacity level of the clip up or down at those points.

If done that the end of clips, It can give a fading effect. For some of my clips, I used a fade to black technique. This is simply done by leaving a gap between each clip, which results in a black space.

For some clips, I either sped them up or slowed them down so they would fit with my timeline. This was done my right clicking on the clip on the timeline, and selecting "Change Speed". From here, I selected the percentage I wanted the speed to be at.

For some of my transitions, I used special effects. These were under the menu "Video Transitions". There are many sub-menus for lots of different effects. The one I used was "Ripple Dissolve" which gives a watery effect.

Storyboards

 
This is a picture of the storyboards that are in my sketch book. This helped me figure out where to put my clips, and what transitions I should do between each clip.

Thursday, 1 March 2012

Importing to Final Cut Pro

After having problems with my video files, I can now work on Final Cut Pro. To start, I imported all of my files, where whey would show up in the "bin". This is simply done by dragging the files from their respective folder to the bin area.
From here, I could then edit my videos and audio.

Problems I Had With my Clip Files

As my videos were taken withe Sony camcorder, I faced some troubles when trying to import my clips. The file type of my clips were m2ts, which is not read by most software, including most video converters.

To bypass this problem, I had encode the video files in a program called ClipWrap, which encoded them as .movs.

Even after doing this, I would still get errors on Final Cut Pro, ad it would not play the files. However, I could now use these movs in other video converters, so I could re-export them as movs. For this, I used QuickTime Player 7, which has options for exporting movs.
These were the settings I used for my videos.
By doing this, I then got them to work with Final Cut Pro.

Getting more Clips

Here are some clips I have taken after the snow clips, to go with those clips.
These two pictures are from clips showing landscapes, which is what the majority of my clips are. I am using many of these as it is the main theme of my speech.

 
This is an example of one of my more abstract clips, which I filmed so there were some interesting breaks between landscape and scenery clips. I thought that it would make mu video look more than just a bunch of landscape clips put together.

Refining my Idea

Sine there was snowy weather, I decided to refine my changes idea to incorporate these videos. I am going to do this by showing the contrast between the snowy clips and the regular clips, as well as going with my original horizon idea. I think that I will replace my changing time of day idea with this idea as the clips are unique, and it would be easier to film and getting morning sunrise clips would be difficult.

Music Choice

For my music choice, I wanted something that sounded positive, that would fit the mood of the speech. I looked on Youtube for a song, and found one called "Dawn" from an uploader called craigsmusicchannel.

Font Choice

My main font choice for this project would be Helvetica, as it is an easy to read font, and is simple looking. Helvetica is a font that can be used with many different things, so I think it would work well for my speech video, as I wanted to choose a font that would be simplistic and not too bold as it would need to be for a video.
 This is an example of how text would look in my video.

My First Set of Recorded Clips

Because of the weather change, I managed to get a lot of clips of snowy areas, which I can use for my final video. This can go into my series of clips well, as I can show the idea of change through the changes in the weather, which I will get from my clips I will record later.
Many of these clips were taken around Lewes and the rural area of Cooksbridge, so there are some higher up areas which I can use for my landscape idea as well.
 

Minute of the Speech

This was the minute of the speech that I chose:

"The world is very different now. For man holds in his mortal hands the power to abolish all forms of human poverty and all forms of human life. And yet the same revolutionary beliefs for which our forebears fought are still at issue around the globe - the belief that the rights of man come not from the generosity of the state, but from the hand of God.

We dare not forget today that we are the heirs of that first revolution. Let the word go forth from this time and place, to friend and foe alike, that the torch has been passed to a new generation of Americans - born in this century, tempered by war, disciplined by a hard and bitter peace, proud of our ancient heritage - and unwilling to witness or permit the slow undoing of those human rights to which this Nation has always been committed, and to which we are committed today at home and around the world. "



I chose this part because when I put the speech in Final Cut Pro, it fit when I had to cut it down to a minute. I also though that using his most famous quote would be overdone, so I chose a part near the start of the speech so I would be a build up nearer the end of the minute.

Choosing Where to Get Clips

As I was progressing with the idea of horizons, I wanted to get clips of places that were high up so I could get a good view of the land and the sky. Another good place to go would be near the sea, as it is a good example of a horizon. For specific places, I think that high up areas such as Ditchling and Firle would be good areas to film for my theme. Any area with a sea view would do for that landscape, such as Brighton or Newhaven.

Drawing up my First Idea In Illustrator

 Before drawing up the ideas in my sketchbook, I draw a test picture in Illustrator to see what the horizon idea would look like. After getting some feedback from my classmate, I decided to go forward with the idea. Originally there was a dove in the picture, signifying hope, but I thought the idea was too literal so I scrapped it.

Idea - Horizons

From my brainstorms and word cloud, I have decided to expand this idea further. I wanted to look at idea of change between day and night, and the contrast between the land and sky. From this, I then drew up some pictures to show off my ideas further.

 

These pictures represent each time of day, along with using different types of horizons, such as land and sea. I have used silhouettes, as I got good feedback when I showed that idea to classmates.

Generating First Ideas

At the start, I was stuck for ideas. To start generating ideas, I went on wordle and put JFK's speech into it to produced a word cloud. This helped me think of words to start generating ideas. I then picked out words from this, and put them into a thesaurus to get even more word ideas.

This is what I got from my word cloud. The main words I got from it were the ones I put into the thesaurus.
The words I got were symbol, sanction, periphery, margin, spray, and graffiti. From these words I then thought of themes that could fit with this, and my main word was margin. From this, I went onto an idea about horizons, and sea/waves.