Report

Brief
Design and build a website to your chosen client’s specification.
The brief was to: In teams design, implement and evaluate a website that demonstrates your understanding and expertise in all three pathway module areas. Students will be expected to submit a full joint report on the proposal, design, implementation and testing of this website. They will also be expected to give a presentation in week 42 specifying their progress and specific roles in its construction, client liaison and development.


The project process
The project began with the brief. Another project within web design but as the weeks progressed it developed into a website fit for the client. Not only giving me work experience but teaching me new coding techniques and features for the website.
We started by gathering as a group and brainstorming Initial ideas and possible plans for the project. Deciding on the ways to achieve a successful but simple software website that would fit the client’s needs and that of the market. For this the best approach was to all gather our own separate research and present it to each other in a group meeting. This gave us the advantage of getting three times the results and research. Once we had gained the knowledge of the market and the specific genre. We had a group debate showing what we had found whilst looking at possibilities for the website design from the existing websites we had analyzed. Such as Micro soft, Adobe, USC and Xsite. This gave all of us a great starting point to all design our own individual design mock up for the home page and pick the best parts from each mock up. Creating a final design to work from and incorporate throughout the website. Keeping in mind the Constantine and Lockwood theory because this is a professional standard for making a website and by doing this it generates good usability.
Now we had the final design the next step we took was deciding on a color scheme that would complement the design whilst fitting in with the theme. We decided on a five color swatch that worked well together and made the design stand out. I undertook the task of starting the coding and fixing the navigation for all the pages. I started by following the mock up to make the basic structure throughout the website without the content. The coding was in HTML5 and CSS3 giving the advantage of rounded corners, gradient effects and other styling techniques to create a professional site. An extra task that was required was a backup line of code to ensure it worked on all browsers. I managed to keep all the files organized and structured all in individual folders. To keep the content separate and organized to make it straight forward to add changes or amendments. Whilst I achieved the basic structure the other group members took on the task of creating individual pages and tweaking the website structure. I developed the existing logo, but kept it the same design. I adjusted slight parts such as thinning the black lines and toning down the color’s so they didn’t look as bright but blended in with the color scheme. I also added a reflection below. After I had done this Caleb revamp the design and reapplied the final logo to the design. He also made a few changes to the home page adding a three Colum section instead of two and finishing the J Query gallery. Salome applied the content and restructured the progress, purchase and download page and I re-created all the product pages and subpages. Now we had a first draft we gained numerous feedback and constructive criticism involving adjusting the container, changing the background from a carbon based texture too plain white, and finally changing tones of the color scheme. We achieved these amendments as a group and added all our other progress outside of university together into one functionally site. We finished by adding multiple fonts and typefaces and polishing the coding to finish a professional sight. These fonts where Caviar dreams, Cantarell-regular, walkway and others.

Client (AJC Soft)
The client for our group project was a software website for a company. The company was AJC soft. A company that has been producing software since 2001. Making software to help backup archive and restore files, protecting the customer from losing important documents. We first approached the client after creating a couple of mock up designs too show possible style and what we would develop on the site. We sent the client an introductory email with all the details included and added him to a group blog to gain feedback and give him an insight into the progress. This made it easier to get constructive criticism and for the client to have an input of what he wanted to be added or changed within the website. We put through numerous ideas to achieve an all-round more productive website that had simple navigation. The comments we received for our work helped to guide us in the correct direction for his software website and showed that we were targeting the correct criteria. Some of the comments we received were about the structure and the logo. There was also some set guidelines such as we had to contain all the content and keep the same name and logo.
Comments
In the development of the site whilst making it the correct criteria and genre. We decided to not only keep a log of the work done or the progress of getting their but constantly keep the client in the loop. So if they didn’t agree with any of the changes they could be amended. This gave us better relations with the client and got us comments and feedback such as,
"The colors and layout look good, actually quite similar to our latest site.
"Yes I like the shadow but maybe the black lines are a bit thin."
The website
Home page:
The home page was designed to introduce the user to website. Telling them what the product is and what it is designed to do. We try to achieve this not only by titles and text captions but with the specific color scheme and visuals. The home page structure consisted of the logo at the top of the page with the title and slogan. To the right of this was the three icons for Facebook, twitter and RSS. These icons where only on the home page. The reason for this was that the social icons are an option/link but not a main feature. So it would be irrelevant to be display them throughout a professional website . Below this is the J query Lava menu with a smooth bubble shadow that moved to the use of the mouse and highlighted the current page. Then a gallery with a set timer advertising the products with small bulletins. In the lower half of the page I a three Colum sections with three separate divs. The first containing a live twitter feed updating with new developments and news. The second containing a caption about us(the AJC soft company). The third is a live testimonial page that constantly changes giving the browser different views of pervious buyers. The final feature we added was a font size changer this was to create better usability following the Constantine and Lockwood principles as a potential buyer maybe partially sighted.
Product pages:
The product page is the opening page to numerous sub sections for each software. There is five software’s and for each software an overview page, versions page, screenshot page and features page. All of these subpages where structured the same throughout all five products keeping in with the same theme. Main products page consisted of the heading lava J Query menu that is included on all pages and then had five unique sections with an illustration on the right with a bordered text caption of the product with the titled centralised. Then the product icon that works as a link to the other pages for more info. With the footer at the bottom with the copyright issues.
Overview page-small summary, J Query lava menu, Testimonials, and sidebar links.
Screenshots page-small introduction, J Query lava menu, testimonials, sidebar links and individual J query slider images with descriptions.
Features page-scroll box(to keep all the relevant content in bite size chunks), J Query lava menu, Testimonials, and sidebar links.
Version page-accordion, J Query lava menu, Testimonials, and sidebar links.
Support page:
Introductory caption, icons, accordion, J Query lava menu and descriptive content for support. With possible email addresses and links.
Downloads page:
Introductory caption, icons, download link(that link to the correct download), J Query lava menu and descriptions.
Purchase:
Introduction, icons, purchase link(that link to the specific software the browser intends to buy), J Query lava menu and descriptions.

The Group Roles
The team consisted of three members the team leader Caleb, me and Salome. The team leader was Caleb. His roles consisted of : HTML5, CSS3, Java script, J Query, aspects of design and general organization of meetings.
My Roles consisted of: HTML5, CSS3, Java script, J Query, aspects of design and initial structure/navigation.
Salome roles consisted of: HTML5, CSS3, Java script, J Query, aspects of design and Icons design.


Conclusion – Learning outcomes what we have achieved
The group project was more of a challenge with time scale and organization than the pervious, but I believe I meet the challenge as an individual and meet the goals as a group to create a website that worked well.
In this project I achieved a better understanding of the HTML5, CSS3, JavaScript and J Query whilst gaining experience in working as part of a team to meet clients exportations. We have achieved all the tasks and goals set out from the start and created a fully functional website. That manages to keep the viewer interested whilst producing the relevant content.
We got here by overcoming the problems and fixing the things that didn’t work. The client cause some organization problems and slowed down parts of the design process by the lack of input or delay in response. This caused minor problems which we overcame by doing other parts of the site whilst waiting for a reply. Another problem was individually designing the set pages after structuring and applying them together as one website, with some CSS coding contradicting and having our own individual methods. This took a team effort to achieve and we all worked on the pages to create the final site. The main problem we encountered was the lava menu that at first didn’t link which we solved. Then a part of the j query code was missing leaving the page highlighted as the home page even when on a different page. This took us remaking parts of it to finally find and fix the problem. The other problems where minor that we sorted in our own ways to make the final product work well. The site is still a few hours of completion with a few glitches on pages.
It is linear and is based on the Constantine and Lockwood principles. Throughout the project we have had numerous problems that we have overcome and developed to either fix or amend fitting in with the clients wishes and the genre of a software website.





Blog Links
Group Blog: http://posterous.com/manage#ajcsoft/posts
My blog: http://lthurlow1.blogspot.com/2011_05_01_archive.html