Electric Blue

More redesigns of the client website

2010-02-22T12:17:00.001-08:00

I looked at my designs of the client project and was overall slightly disappointed. Looking at them i felt that they looked quite ugly and dated still. I felt that the designs suffered from a severe lack of creativity and required much more. I thought that the logo and the website style and layout needed a lot more input and creativity.

I set about redesigning the layout and style of the clients website and the clients logo again.

For the website style and layout I had a re-plan and rethink of the layout. I wanted something that was slightly different from the normal. In the end I designed a layout that would allow for a logo and space for the clients driving qualification certificates. Below this would be the navigation and the search bar next to it to maximise the usability of the layout. Below the navigation is the banner, which I have made a fair size to allow for rich graphics to promote the clients company. Next to the banner is space for promotional text snippets that further enhance and promote the company. The graphics have been updated to make the site stand out more and give it a very professional looking feel.

The logo design has also been throughout enhanced. The look of the logo has changed considerably and looks much more professional, tidy and slick. The logo also looks very clear and stands out well against the background. I sent these designs to my client and am waiting for a response about how she feels about them. Hopefully she prefers these designs compared to the old ones as I feel that the new designs are much more beneficial in making the clients website look as professional and stylish as possible.

new client design

2010-02-18T04:11:00.000-08:00

Designs development stage

2010-02-03T15:40:00.000-08:00

My client feedback my designs that I sent to her in early January. She liked the site map and gave me further instructions to develop the designs that I submitted to her.

Instructions for developing the style design

I was given the instructions to lighten the color of the header to a lighter blue so that the company logo would stand out better.

Instructions for developing the logo design

I was given the instructions to bring elements of the logo close together as they were distanced too far apart. Also to make the red writing with the text "driver training" stand out more. I was also given the task of bringing the ends of the road closer to the title text.

As you can see in the development pictures I made the clients changes to the logo and style designs. For the style design I also reduced the height of the header of the website as it made the website look more compact and tidier.

New redesign for style design for the website

old design for style design for the website

New redesign for logo design for the website

old design for logo design for the website

I sent these developed designs to the client who then approved the designs. With this I can now move onto the building stage for the client website.

Experiment one design

2010-01-22T07:26:00.000-08:00

For my first experiment I wanted to explore if the results in Webcredible usabilty report were valid. In order to do this I set up user testing of two websites taken from the usabilty report. I choose W.H Smiths and Topshop. W.H Smiths recived 83% out of 100% and Topshop 56% out of 100 in the report.

The aim would be if the user testing majority found W.H Smiths more usable then Topshop then this reflects the results in the Webcredible usabilty report paper. So this would validate the usabilty report paper.

I built two questionnaires, one for Topshop and one for W.H Smiths. They focus on asking the user what they think of certian usabilty features withen the e-commerce site such as layout, navigation, font, search and checkout functions. The user has the option of agreeing or disagreeing or the option of not sure. The reason why the answers are closed is so I can easily measure and examine what the user tester thought of both e-commerce sites.

There are also open ended questions which the user tester answers theirs thoughts and opinions. The open ended questions are to explore what the user tester thought in a little more depth.

I also built a paper stating which e-commerce site the user tester found most usable and why. This would enable me to collect the results of which e-commerce site they found usable which i could then colate into a final result.

Producing designs and the sitemap

2010-01-11T07:39:00.000-08:00

Stage one: The content layout designs

For my first task I set about designing some potential content layouts for each page. I designed content layouts for each page. Some of the layout designs consisted of two column layouts while others were just a single column. Each box had a label to describe their role for the website.

Stage two: The logo redesign

I set about redesigning the old logo to make it look more stylish and more professional. I used gradients to make the writing stand out and give it a more shiny look. The road on the old logo was also very wobbly so i corrected this by redrawing the road against accurately using the pen tool. The writing was given a slightly glow to make it stand out from the blue background. The logo redesign took a collaboration of Adobe Photoshop and Illustrator. Illustrator was used for accuracy and vector drawing, while Photoshop was used for style effects and text. Here you can see the major difference between the old logo and the redesign below.

Stage three: The style design

Here i used Photoshop to design the style of the website. I used a combination of vector tools such as rectangles with rounded off edges for the menu and the content box. I gave these slight gradients to make them stand out slightly. The new logo redesign was then fitted into the style design. The background of the website was given a gradient to make the page look more visual pretty. Two blue and white lines were added into the website to give the website some variety between raster and vector graphics.

Stage four: The site map

I then constructed the site map in order to create a visual layout of what pages would be in the website and were they would sit in relation to the website. This site map would be provided as a visual aid for the client to understand the website better.

I then emailed these designs to my client on the 8th of January 2010.

The client project: First meeting

2010-01-11T06:39:00.000-08:00

On December the 23rd of 2009 I met up with my client Maria Dyer to discuss the issue of designing and developing a new website for her "Park lane driver training" company for the live client project. Park lane driver training is a company, which specialises in training up driving instructors and public services such as the police and fire services.

The meeting was split into these stages.

Stage one: Review of the client project brief paper.

The client project brief paper was reviewed and we looked upon some key issues for her new website.

E-commerce functionality
Website to look visually appealing
The website to be easy to use

We agreed that these key issues would be given a high priority in the client project.

Stage two: Discussion and Agreement of web pages for website.

The meeting followed upon agreeing what pages are certain to feature in the website. We agreed that the following pages should be included into the website and into its primary navigation. I pointed out to the client about the need to avoid too many web pages for the primary navigation as this can result in it becoming too overbearing and clumsy.

Agreed web pages

Home page - The introduction of the company, who owns it and a description of what it is and their goals.
Company information page - Detailed information regarding the company with testimonials from customers and qualifications.
Services page - Describing the services the company carries out.
Products page - Describing and showcasing the products that are related to the company that the web user can purchase.
Contact page - Contains the company’s contact details in order for the web user to contact them.
Frequently asked questions page - This page answers common queries and questions that the customer may have when approaching the company.

Stage three: Laying out what will be done for the next stage.

We discussed what should be completed in time for an upcoming date for feedback and further discussion. The client was interested in me redesigning the company logo into a fresh, updated logo to fit in with the new design of the website. It was also discussed that I would build a sitemap to visually layout how the pages would be mapped out. Other areas included building layout designs for the content of the website and designing how the style of the website.

Checklist for next feedback date

Logo redesign
Website Style design
Sitemap
Content layout designs

Stage four: Looking at the current general layout of the website and agreeing upon a general layout for website redesign.

We looked at the general layout for the current website. The client was happy to stick with the same layout on the old website for the new website. So it was agreed that the layout would stay the same.

Conclusion.

The meeting gave me a clear idea of the steps I had to take in preparation for the next feedback date.

I knew from my client the priorities of the client project
I knew what web pages had to be included into the new design
I was to be tasked with redesigning the company logo
I was tasked with designing the style of the website
I was tasked with designing content layout designs
I was tasked with building a sitemap

Client Project

2009-12-10T03:47:00.000-08:00

Simulated Client Project

2009-11-21T09:19:00.001-08:00

The simulated client project has gone through alot of developments. As I have been quite late in posting these developments, I am going to create a timeline of the developments of the simulated client website.

4th-19th November 2009

Creating the Graphic Novel

I started on the creation on the graphic novel in Illustrator. I created the characters and objects in my own style with the Illustrators pen tool and used a variety of rich colors in the style of a graphic novel. I created three chapters for the graphic novel. Chapter one is about "what is file sharing", chapter two is "when and why it is illegal" and chapter three is "the consequences of being caught illegally file sharing".

5th-12th November 2009

Creating XHTML/CSS wireframes

I used my text editor to create XHTML/CSS wireframes of the website that i took from the photoshop wireframe designs. I color coded the different sections of the website such as website title, content, footer.

(in order)Home page, Chapter page and Contact page wireframe

13th-15th November 2009

Creating the graphics to fit into XHTML/CSS wireframes

Created graphics in Photoshop to fit into the XHTML wireframes. Created graphics for the footer, company title, header.

17th-19th November 2009

Inserting Content

Inserted content in the chapter pages such as textual chapter information to accompany the information on the graphic novel. Also inserted contact information into the contact pages of the website.

19th-20th November 2009

Creating interactive flash elements

I used Flash to create some interactive elements. I created a few rollover interactive pieces which I then inserted into the chapters so that it formed part of graphic novel on the website. I created a animation that ran continuously which I also inserted into one of the chapters of the graphic novel.

16th-17th November 2009

Updating the website graphics

Update the graphics of the simulated client website as I felt the previous ones looked blurry and made the website look very dated. i updated the buttons, footer and header of the website and made the website title brighter. The colors of the old graphics also made it very hard to tell where the edges were against the black coloured body of the browser.

(in order) header bar, footer bar, button graphic and hover button graphic

Designs for my idea on simulated client proposal

2009-11-03T02:36:00.000-08:00

For the simulated client proposal I started on my designs. The first design was a site map to lay out the pages of the website. The site map also labeled what pages would be on the website.

After the sitemap I then created wireframe layout designs for each page of the website. These wireframe layouts are designed with usabilty and simplicity in mind.

Chapter pages

Home page

Contact page

Simulated Client Proposal Project

2009-11-03T02:09:00.000-08:00

I was assigned the Simulated client project brief a week ago and have completed my the proposal to the project brief that I have sent to the "client". Also created a presentation that I will be presenting to the "client" later on this week.

The project brief was

The Copyright Protection Society is starting a public information campaign that illustrates and explains what file sharing is, when and why it is illegal and also the consequences of being involved with this illegal activity. They want you to produce a piece of multimedia that will address the points above. You have six weeks to complete the task and you are required to produce a short proposal of your designs and ideas then you will produce the multimedia product.

Produce a micro-website that consists of five distinct pages and includes well formed
accessible WC3 validating css/xhtml and includes at least one interactive
element.

In my proposal to the brief I explain my choice of design idea for the simulated project.

My design idea for the “Copyright Society Protection” minisite is in the style of a graphic novel that explains to Internet users about file sharing, when and why its illegal, and the consequences being involved in illegally file sharing. By explaining to users about illegal file sharing In the style of a graphic novel the minisite hopes to project its message out more interestingly and creatively than a typical public information campaign. By adopting the style of a graphic novel the minisite takes a different more interestedly creative approach in notifying users of illegal file sharing. The rich visual nature of a graphic novel will hopefully be very effective in attracting users attention and keep them interested in browsing the website. It will also hopefully be effective in making the user more inclined to digest the information on the minisite.

In my proposal to the brief I also came up with some rough designs that followed up to my chosen design idea in the brief.