First set of mock ups

Design Elements

Navigation & Pages

HOME
Quick overview of the project
Couple of testimonies/success stories
Images of clothing
Blog feed
money/job opportunities to interest students

ABOUT
that the project is about
about clive bonny
contact details
who has it helped

AIMS
the aims of the project
in-depth about the project
Testimonies/success stories

ENTREPRENEURSHIP
Show to employers the skills they have obtained
how the project demonstrates practical skills

PROJECTS
Pr, press releases
documents
projects where it has

GALLERY
images of clothing
students
designing

Web Content

– Target Audience –

Students of all ages recycling and business( sustainability and enterprise)

- Recycling logo

- Students will want to see clothing to interest them

1. Images of the clothing, bright amazing pieces
2. Before and after clothing
3. Video of process, designs

 
 

 

 

 

 

- How they can make money

1. Amount of money made/distibuted (few hundred pounds to further develop the project new materials etc, to develop other parts of the school, money given to students to buy materials.
2. What happens to the money (to further develop the project new materials etc, to develop other parts of the school
3. How it relates to real life business (making money from waste products, making profit, showing how disregarded items are still valuable.

- How the project helps the environment

1. What can be recycled (clothes, buttons, shoes, off cut fabric, sewing accessories, bags, jewellery, hair accessories, 
2. Statistics on whats thrown away (page9 blue book)
3. The effect of all the waste
4. Where materials are sourced and from where (charity shops, businesses, people, parents, recyclers)
5. Who can donate clothes (anyone)

- Process of the project

1. Each phase of the project from paper design to recycling materials
2. What they can learn from each step (brief blue book)
3. What they can expect to see at the end, skills etc
4. What they can take away from the project
5. what they can do if they take part

- Outcomes- how it can help them personally - what it teaches students

1. Skills gained by the end of the project
2. How it will help with employability in the growing search fro jobs
3. What employers are looking for and which ones can be obtained by taking part in the project
4. Social skills, new friends
5. opportunities they can get - professionals coming in, trips

Attract new schools to engage

- how it can benefit students

1. New friends, social skills
2. learning outcomes
3. Enjoying learning
4. Extra activities
5. A lesson to look forward too
6. Fun

- How it can benefit the school

1. Energetic enthusiastic classes
2. Extra skills to give to students
3. Shows parents other activities than just standard lessons

- What it teaches students

1. The skills in what it teaches
2. How these skills are used in the workplace
3. Higher chance of getting a job through practical assessment

- Making education more fun

1. Practical work
2. Practical assessment, portfolio of work

Attract businesses to engage

- how the skills can be carried on into the workplace

1. What skills they will be learning
2. How they will be learning these skills

- what skills they will be learning - how this will help them

1. How they can apply those skills in the workplace
2. How the skills will be assessed/documented

- How they can participate

Employers who want to recruit people with proof of practical skills.

- what skills the students will learn

- how its different from standard lesson (remembering things)

- How the skills are assessed/grades

Should attract blogs from existing stakeholders 

The current slogan is "success breeds success when values sustain value"

Testimonials

Examples of redesigned items

Press releases

Press reports on entrepreneurship and action learning methods

Site personality would be like Leonardo Da Vinci as he epitomises the creative sciences

Onsite blogs/reports participants

Photos from participants

Logos to be used are my logo and RSA logo

Participating Schools and businesses should be able to add their details

Requirements:

Media rich website, showcase product aims, background of the project, participants, activities and outcomes.

SEO keywords are: Employability, action learning, recycling, resource management, creativity, innovation, entrepreneurship.

Q&A Design

The target audience is students of all ages who wish to learn about recycling and business( sustainability and enterprise), employers who want to recruit people with proof of practical skills.

The site should attract blogs from existing stakeholders and new schools and businesses to engage

The current slogan is "success breeds success when values sustain value"

Content to be featured is testimonials, press releases, examples of redesigned items, press reports on entrepreneurship and action learning methods

Site personality would be like Leonardo Da Vinci as he epitomises the creative sciences

Colour scheme should be rainbow

I want onsite blogs/reports and photos from participants
Logos to be used are my logo and RSA logo

Participating Schools and businesses should be able to add their details


Requirements:

Media rich website, showcase product aims, background of the project, participants, activities and outcomes.

SEO keywords are: Employability, action learning, recycling, resource management, creativity, innovation, entrepreneurship.

Q&A - Clive Bonny

Questions re Clive Bonny Director of Strategic Management Partners

1. Could you elaborate on what do you do as an organisation?

Work collaboratively with other specialists to develop organizations and individuals

Our main aims are to ensure business continuity, facilitate risk management and maximize the potential of people’s capabilities. 

1.     Is this a training scheme for managing a project and in how to create products from recycled material?

Yes the project is called Self Made Creative Clothing. The aim is to boost a persons employability.  The project encourages students of all ages to acquire used clothes and textiles to redesign, reuse and recycle into other items of their choosing. 

1. What are the project aims?

The short term aim is to engage students in practical activities around recycling and the management of materials and resources. This improves skills in teamworking, design, innovation and planning. Medium term participants develop practical skills around the cycle of business, designing usable items from low cost accessible resources. They can show their tangible results, including photos and videos to potential employers to win future work.    

1.     Who is your target audience?

Students of all ages who wish to learn about recycling and business, and employers who want to recruit people with proof of practical skills.

1. What is the project background and history?

The Royal Society of Arts www.thersa.org awarded me £2000 last year to test the concept. This grant was used to buy used clothes allowing 500 local students in 3 schools to have a go. Feedback was positive with students reselling items locally. 

1. What activities do you run in order to enhance the person/s skills?

I let them choose their own raw materials and designs to give them responsibility and a greater sense of achievement

1. How long has the project been running? Do you have any previous success stories, testimonies available?

This project which began in February is a follow up from the first last year which ran March to July. Testimonials:

Sophie Gaston, school head of Entrepreneurship at Brighton Aldridge Community Academy, is planning more events to bring successful business people back to school to mix with the new generation of students. Sophie says “Organisations want young people who can show real evidence of enterprise skills. Practical skills in recycling waste are already in great demand by private and public organisations. These activities will equip students with more rounded confidence and competence to meet employer needs.”

Darren Fell MD of Crunch commented: “Crunch is very proud to support schemes that help build business skills for the next working generation. With youth unemployment recently breaking the one million mark, it’s vital that employers share their knowledge and experience with local young people. This group of highly ambitious students will now have the skills to continue to manage their business and the knowledge on how to set up a new enterprise in the future.” Crunch is founded by online entrepreneur Darren Fell, with investment from Bebo’s co-founder Paul Birch and former Skype Chairman Michael van Swaaij. 

Duncan Cheatle, Founder of The Prelude Group, Start Up Britain and Rise To The Enterprise Challenge, says “we support such innovative projects to make Britain the most enterprising nation in the world”

£800 obtained 1.5 tonnes of used clothes for Brighton Fashion Week’s 10 textile design graduates. 200 hours made a world record 1.5 tonne PomPom to Jubilee Square publicly promoting recycled clothing. Published stories ran in the Argus, So Brighton Magazine, Brighton Town Talk, Festival News, Fringe and Brighton Fashion websites, Business Community Partnership, Going Green magazine, Radio Reverb, U-Tube and others. Reader circulation was over 250,000 plus 60,000 radio listeners plus thousands of U-Tubers on 

http://www.eventfulbrighton.org/2011/05/14/the-worlds-biggest-pompom-brighton-fashion-week-brighton-festival-fringe-2011/ 

£400 each went to 3 schools. Shoreham Academy said  “ 27 pupils attended Fashion Club over the term. We have made a mood board, fashion drawings, make up bags, a box of garments made from recycled fashion. All of year 7(258 pupils) & 8 (227 pupils) made recycled zipper cases. Year 7 made recycled toys and Year 8 made recycled storage for their bedroom.”

“20 children at Rydon and we would like to double this next year… to hold a fashion show. All the students are very enthusiastic and very interested in fashion.”

Rustington Primary children’s Recycled Exhibition raised £235 funding a Wildlife area.

 Clive,
This is just fantastic! I'm in the midst of a large-scale redesign on my end, but this kind of work is precisely what could be contained in our to-be-announced Entrepreneurship Certificate program. I am an fRSA in the USA. I'm very interested in connecting with you regarding your project to help students nurture their entrepreneurial side.  I work in an independent school (students aged 3 years to 18 years), and am heading a new division which is entirely on-line, but whose raison d'etre is "connect, communicate, collaborate." You can see the website at www.towerhill-eschool.com.

We have not yet had our public launch phase; that is due to come in September. However, at this stage, I am looking to form unique partnerships that will benefit students all across the world. One of the courses I have in mind is something on Entrepreneurship. In short, I am wondering if you and I might connect in order to construct a course that would be contained within our eSchool, accessible anytime/anywhere. It could be very exciting!

Kevin J. Ruth, Ph.D. Director, Tower Hill eSchool

Click here to learn about partnering with us!

Tower Hill eSchool | 2813 W. 17th Street | Wilmington, Delaware 19806
(v) 302.575.0550 x339 | (skype) kevin.j.ruth | (e) kruth@towerhill-eschool.com

Clive

Thanks for this – looks absolutely brilliant – if I was still teaching I would definitely be grabbing this opportunity. Young people need all the opportunities they can get to enhance their skills. The work you are doing on this is great and will provide some real opportunities for those involved. Keep up the good work. Best Wishes

Gill

Gillian Ditch

Education Business Partnership Room 314, 3rd Floor

Kings House Grand Avenue Hove BN3 2LS Tel 01273 290482 ( ** Note: Change in hours: Tuesday & Thursday term time ) Mob 07906 842704 www.bhlp.org.uk/ebp 'Encouraging Brilliant Partnerships'

1. Are there a team of people who run the project? Would you want their skill/role background on the website? Any other participants?

I let the schools nominate a teacher and the children select themselves into small groups 

1. Where do you currently operate?

Across Sussex and looking for a wider span of stakeholders across UK and outside

1. Where do you accept people from? Locally, further a field etc.

Anywhere interested in 

1. How do you currently promote the business/project?

Press articles, web blogs and word of mouth

1. Have you received any awards?

The Catalyst Grant is an Award in itself, competing with many strong applicants

1. Do you know of any other projects similar to this?

There are many organizations involved in recycling textiles but none which extend activities into action learning to support student employability

1. How do you source your clothes?

Charity shops, business people, parents and recyclers

1. Do you have any connections to social media, Facebook, twitter etc?

You tube video promoted us 

http://www.youtube.com/watch?v=OY57xpharec 

1. Do you want links to journal trade sites on your website?

Yes to www.thersa.org and www.consult-smp.com and to those who give testimonials

1. Do you have connections to ethical fashion forum?

Fashonistas broke a world record by creating a giant pompom to raise awareness of recycling. The huge 5ft 5in high creation took volunteers a week to make. Passers-by in Jubilee Square, Brighton, stopped to stare at the pompom, which was 12ft 6in wide and was put together as part of Brighton Fashion Week.

The idea was funded by a grant from the Royal Society for the Encouragement of Arts, Manufacturers and Commerce to promote the creative reuse of fashion and textiles.

The creation smashed the previous Guinness World Record, which measured 4ft high and 10ft 8in wide. The pompom will now be taken to a recycling plant where it will be broken down into natural fibres and spun into a giant ball of yarn which will eventually be used to make socks and the insides of jackets.

1. Do you know the term up-cycled?

Yes adding value via redesign and reuse

Design questions:

1. What do you want the site to achieve/do?

The site should attract blogs from existing stakeholders and new schools and businesses to engage

1. Do you have a slogan/tag line?

Yes

Success breeds success when values sustain value

1. What do you want the site to feature content wise? Anything especially want/do not want on the home page, other pages? 

Features to include testimonials, press releases, examples of redesigned items, press reports on entrepreneurship and action learning methods 

1.   If your site was a person what personality would it have?

Leonardo Da Vinci as he epitomises the creative sciences

1. What content do you have available for use? Images, video, documents etc.

Lots of content re PR, action learning methods and industry reports of needs 

1. How will people using the site get in contact? Do you have an email, address, phone number that you want to have on the site?

Yes my details as below

1. What words/phrases would you want to be able to search online for your site to come up? Which are more/less important?

Employability, action learning, recycling, resource management, creativity, innovation, entrepreneurship

1. Have you got a theme/colour scheme in mind?

rainbow

1. Do you want to be able to have people sign up for email based newsletters?

No I want onsite blogs/reports and photos from participants

1. Do you have a current logo (do you want a logo?), are you happy with it? Do you any other existing documents? Leaflets, business cards etc, that you would like the design to follow?

Yes my logo and RSA logo

1. Have you seen any websites you like the look of?

no

Others:

1. Do you need to be able to update the website? If so how regularly?

Update monthly

1. Will you be advertising any partners/businesses involved in the project?

Participating Schools and businesses can add their details

Client documentation

The client has sent us some documentation about the project, including testimonies, project aims, more information on Clive Bonny, more information on the pompom world record, also got a few pictures within the documents, project background etc.

Setbacks

Due to having only one client definitely coming in on Monday there was a decision that we would skip this process and just email the relevant questions to the client, this is a pain because I believe that we could have got a lot more information from client by talking to them directly; now we have to wait for the answers and as pitch is this monday coming its going to be a bit of a rush to get this done if the clients take their time filling in the questions.

SEO - Web safe

Search engine optimisation is where the site is optimised so that it can be found in the top rankings of a search engine:

SEO Techniques:

Linking to external sites that have the same topic

Links from external sites to your website

Blogs and forums are a good start

Image alternate text is used by search engines to "read" your image and video content.

Site name

Keywords/meta tags for images, pages, titles that give more information about the site in single words and phrases.

Site-maps

Uploaded to search engines, this way shows the entire site to the engine, the site might not have many links to its internal pages which means that the engines would not be able to index them as well.

I run a site called Airsoft tutorials and have gone through the pain staking process of SEO, it has worked well as searching "Airsoft tutorials" on google the first page of results is to multiple links of my site, currently 1,2,67, and 10 all go to my site, or forums. I also have different search terms in which the site can also be found, using the web tools i can view statistics of the site, I can see what terms were used and what sites users came from to get to my site, this is useful as i can see areas that i need to expand on the SEO side.

The user - Usability & Interface

The website I am creating needs to revolve around the user and their experience when visiting the site, due to the fact that many people when browsing sites only look for a few seconds before deciding weather or not to explore further or leave I will have to make the design count in those few seconds.
I will need a good layout that uses elements where they should be, all the text needs to be legible, the site needs to load quickly. I need to have consistency within the design; the fonts, logo, navigation needs to be the same throughout the site. The site needs to be accessible to people with disabilities.

Content - The content that I use will need to be suitable to the website (pretty obvious) it will also need to have correct alternative text which comes under accessibility, the content must also be compressed in such a way that it loads quickly but still has similar if not the same quality of the original, this also comes under accessibility.

Text - The style/size/font of the text needs to remain the same throughout the pages, I will also need to have headers that are styled to suit the site and which separate the text and acts as a bite size piece of information on what the text is about, as I said before users will not stay on the site if the information isn't there straight away for them where they can easily see and pick the relevant points that they want out.

The site that I create needs to be accessible, for most if not all the users, this means i need to take into account statistical data of current trends.

SEO - Search engine optimisation is the process that I will do so that when the site is searched for it comes up on the search engine - preferably at the top if done well - by doing this I will get a more hits to the site which will drive the project forward as more people see the site advertised online.

Alternate text - Alternate text is used as a "readable image" in which search engines use as a search basis, comes under SEO, it is also used for screen readers to read if the user has a disability such as blindness, the alternate text will say what the image is of.

Loading time - The amount of time it takes to load a webpage is an important aspect to look at, generally for me if a site takes to long to load I'm not going to wait for it, i will be gone looking at something else even if the site did/does have valuable information. So compression of multimedia content is vital, comes under content. If  were to be using content that required plugins i would also need to take the time it takes to load that in account.


Text - For body text it needs to be able to read easily, having red text on a green background just won't work and will turn users away. Italics, bold and underlined text should only be used a little bit as it distracts from the flow of the text, if they were used in a piece of text i would think that the text could be better written. Headers and titles should again be clear and easy to read as well as standing out when scanning over the site quickly. The short paragraph or tagline should be short and punchy and give you a good idea to what the site is about.

Layout - The position of the elements I use will be an important to design but most important to the user, I need to have the navigation in a place where it is usable and instantly noticeable when the user visits the page; I do not want them searching for it, it should be there where they need it weather it be at the top or on the left, It needs to be clear and structured accordingly to the content as well as not interfering with other content. I really have it when websites use drop down menus that keep having more options to click on, I have also noticed that the hover over drop down menus rarely work on iOS devices let alone any others. I also want to keep the navigation the same throughout and in the same place otherwise it will confuse the users. Every element on the page must have a reason why I have used it:
Why its there? Whats its purpose? Does it fulfil that purpose? Does it work with other elements on the page?

Size -  For users to stay on the site I need to make the first page and the first elements they see very interesting and eye catching so within the 960x600 pixels I need to have content that is engaging and that also loads quickly so that the user isn't waiting around as otherwise they will just leave. Also the size of text images buttons etc all need to suit

Colour - Going back to monitors I also need to choose colours that are suited to monitors so that they don't display to brightly next to text so that it makes it unreadable, I also need too make sure the text is legible on the background colour.

Navigation - The navigation will be consistent throughout, it needs to be clear, have the right amount of buttons that do not clutter the page (max 7), I will also need a simple navigation at the bottom of the page as well as quick links to contact details etc.

Target audience - Web safe

Target Audience:

Students,

Employers 

People interested in recycling, sustainability and enterprise.

Browsers:

http://www.w3schools.com/browsers/browsers_stats.asp

From this grid I can see what browsers people are using, so when making/testing the site I will primarily be testing on: Firefox and Chrome followed by Internet explorer, Safari and Opera, this way I will be reaching the most amount of users so that my site displays correctly for the maximum amount of users. 

Browser versions:

Firefox

The most used version of the firefox browser is:

2012 Feb : FF 10 16.8%

2012 Jan : FF  9 17.8%

2011 Dec : FF 8 22.8%

From this I can see that out of the 37.1% of people who use firefox, 16.8% of them are on the version of the browser that came before the new release.

This is helpful to know as I'm not just testing on the firefox browser but i am also testing on the a specific version, using this data I can see that I need to test multiple firefox versions ranging from version 9 to the current one.

I have also got this information on all the browsers I will be testing the site on.

As well as desktop browsers there are also mobile browsers and devices in which the web is shown through:

From this you can see that there is just 1.25% of sites that are visited on mobile devices, this would be helpful in knowing if you were designing a responsive web site or a site for a mobile device.


Screen resolution:
It is important that I design my site so that it suits the majority of screen size/resolution, below are the current statistics for January 2012, from it i can see that 1336x768 as the most popular screen resolution size followed by 1024x768 at 13%. Using this information I can see that i need to base my site around
1024x768 pixels.

Researching further I can see that a lot of popular sites including Facebook and Youtube all use a similar website size which is around 960 pixels wide, from this data as well as the above i can see now decide on the appropriate size for my website design:

960 pixels wide, for the length I will have on average about 600 pixels high still the user would have to scroll due to the fact you have browser tool bars, desktop toolbars, docks etc which all take up space on the screen.

So 960x600+ (600+ then scroll)

http://www.iteracy.com/resources/build-a-better-website/size-and-layout-of-a-web-page/

This is a list of the current statistics on which the websites are looked at, when testing my site i will need to test it on the most popular os and platform and then work my backwards to the less poplar ones shown, there are also tools online i have found which help with testing websites in multiple versions of different browsers.

Internet speed
6.8Mbps is supposedly the uk average broadband speed reported by ofcom
http://www.ispreview.co.uk/story/2011/10/11/akamai-reveals-uk-average-internet-connection-speeds-hit-5mbps-in-q2-2011.html

I will be compressing my site so that the end file size is small, this will mean that images will load quicker and users will get the information faster.

For testing I will need to test how fast the site loads under different internet speeds, so that if it is taking too long I can look at further compression and/or removal of multimedia content.

All this information is useful as I am looking to grab the attention of the user and keep them on the page, if the site does not display correctly, content takes too long to load or the site doesn't come up under the correct search terms, the site will not be doing what it is supposed too.

Browsers - Web safe

Once I have finished the website I will be testing it in multiple browsers across and across different platforms, for example I will need to test the big main browsers: Chrome, Safari, Opera, Internet explorer, Firefox on both Pc and Mac where possible. From this I will be able to see the differences in the style of the browser.

A user could have different plugins, versions, types, not using the latest/newest standards, settings, different options turned on/off e.g. images in their browser as well as working on a mac/pc/linux based machine as well as their screen resolution, size and and aspect ratio and also which accessibility features they have turned on/off.
A mixture of these will cause a website to show differently in a particular browser.

I will not be able to get the site looking exactly the same for each individual user, what really matters is the usability of it.
Any users will not notice the difference what they will notice is the usability of the site which is the main concern.

http://mygloss.com/geek/files/2010/07/web-browsers.jpg

Fonts - Web safe

Web safe fonts:

I will need to use web safe fonts for my website so that when displayed they come up as that font rather than the browser default if the user does not have that font installed.


@FontFace


What is @FontFace

Font face is a way of displaying font on the users browser even if they don't have the specific font/s installed on their machine. It works by having the particular font hosted on your server in which the css rule gets and uses it to show the correct font; by using this method it means that i can have access to a lot more fonts.


Using @FontFace css rule

The basics are pretty simple to implement the @font-face rule, but it is possible to add lots of options to extend its features.

Initially you define the rule, "font-family" is what you want to call the font, "src" is where it can be found, include a "font-weight" (not needed for normal, but required by everything else, bold, thin etc).

@font-face {
    font-family: DeliciousRoman;
    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
    font-weight:400;
}

Then just use it like any other font in any other style rule.

p {
    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

That's pretty much it for basic implementation. Please see our 'Find out more' section to find more in depth articles. When the blog is up and running we will post lots of tutorials explaining the who, what, where and why of @font-face.

There is also google web fonts which offers a similar service.

I can also set my css font choice so that if the font is not installed on the computer it chooses another font choice in the order I set:

font-family: "Franklin Gothic Demi", Verdana, Arial, sans-serif;  

Connection speeds & Image compression

Connection speeds:

When outputting or even designing a website I need to think about what connection speeds will the users be using, I need to make the site file size as small as possible so that the site loads quickly for users. So that my finished website file size is small I will need to do and remember certain things when designing my site:

Image compression:

For my images i will need to make the file size as small as possible so i need to make all my images the correct size (width & height) in pixels DPI does not matter:

As you can see the 72dpi is the same size as the 300dpi version saved at both a png and a jpeg, the only thing that will make the image file size smaller is reducing the size of the image or optimising for the web.

Optimising images:

Using photoshop's save for web and devices i can optimise my image to make them a lot smaller so that they load quicker, photoshop has a wide variety o fop tins in which you can choose to get the smallest file size.

In this window I can choose which format I save the image out at as well as seeing the compared file sizes which help me decide on which file to choose for the web.

I have the ability not only to change the file format but choose how many colours the image uses  and the quality of the image as well as the how the pixel style is changed using different types of dither/cubic etc.

As you can see some of the images are not great quality and are still quite large, i have chosen the bottom right image as it has the smallest file, the best image and will download quickly.

Here is a comparison between the original jpeg and optimised one.

Original

Optimised

 There is no noticeable visual difference between the two images, its just that one is far smaller and better suited for the web.

Bandwidth:

Dependent on the server it is possible to remotely host images externally which will free up bandwidth on the server where the main site is held, a reason for doing this is that you may have a maximum download capacity so hosting files externally will dramatically reduce the about of data the user is receiving from your server, this will help if you have a limited budget/limited download/bandwidth capacity.