Friday, 27 May 2011
The AJC website
We have managed to get the whole site up and running with everything looking good whilst containing all the correct content. The only issue we have had is a couple of the pages are still a working progress due to the volume of the wesite and amount of content. Apart from this we will carry on to finish these few pages even though the site has been handed in.
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
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
Tuesday, 24 May 2011
New Gallery - Products screenshots
This is the gallery I used and developed to fit in with the product page. The purpose was to create a screenshot page that had the methods in bitesize captions. Giving the effect to have written content with useful illustrations, to give that extra guidence.
There was six types of gallery div I wanted too involve in the website. All of which had a unquce animation or transaction making them stand out and different from each other. I used all six types on the AJC sync screenshot page. I also used them throughout the other galleries of screenshots amoungst the other product pages. Below are a few screenshotsof the pages with the galleries in place.
There was six types of gallery div I wanted too involve in the website. All of which had a unquce animation or transaction making them stand out and different from each other. I used all six types on the AJC sync screenshot page. I also used them throughout the other galleries of screenshots amoungst the other product pages. Below are a few screenshotsof the pages with the galleries in place.
Friday, 20 May 2011
The search bar is a asset we looked into adding as an addition to the home page to give easy navigation. Giving the user the ability to find specific pages or products, with the use of keywords. So far I have looked into different possible search boxes/bars a few are listed below with the descriptions. we looked into not only making one but styling one with css3 and making it function correctly.
If you have a large site, you want to consider adding a search box to your site. There are a number of free ones available or if you are using paid hosting, there may be one available through the host. The free ones I have used are listed below. Each is customizable to reflect the "look" of your site.
Search Boxes
FreeFind Here you sign up to "Add a search engine to your site." You will need to enter your page URL and your e-mail address.. Your password and setup instructions will be e-mailed to you. My Family Genealogy site uses FreeFind.
PicoSearch Here you sign up for your search engine. You will need to set up all the requested information. You'll then see the web page from which you manage and customize the Picosearch tool for your website. I have used this in the past.
Atomz Search - Just fill in your email address and you will receive instructions via return email. The website for the Unitarian Universalist Fellowship of Harrisonburg Virginia uses Atomz as the search engine.
Google Free - With Google Custom Search, you can harness the power of Google to create a customized search experience for your own website.
Bing is the current web search engine from Microsoft. You can see an example of this search box and the instructions on how to install it Adding the Bing Search Box Code. At this time Bing will not work with Opera.
Zoom Search is a commercial product which does offer a free version for small sites of 50 pages or less. It will NOT work with any of the Rootweb servers. This site is now using Zoom Search.
Here is an example of the Google search box with the coding for the basic form.
Google Search Box
If you have a large site, you want to consider adding a search box to your site. There are a number of free ones available or if you are using paid hosting, there may be one available through the host. The free ones I have used are listed below. Each is customizable to reflect the "look" of your site.
Search Boxes
FreeFind Here you sign up to "Add a search engine to your site." You will need to enter your page URL and your e-mail address.. Your password and setup instructions will be e-mailed to you. My Family Genealogy site uses FreeFind.
PicoSearch Here you sign up for your search engine. You will need to set up all the requested information. You'll then see the web page from which you manage and customize the Picosearch tool for your website. I have used this in the past.
Atomz Search - Just fill in your email address and you will receive instructions via return email. The website for the Unitarian Universalist Fellowship of Harrisonburg Virginia uses Atomz as the search engine.
Google Free - With Google Custom Search, you can harness the power of Google to create a customized search experience for your own website.
Bing is the current web search engine from Microsoft. You can see an example of this search box and the instructions on how to install it Adding the Bing Search Box Code. At this time Bing will not work with Opera.
Zoom Search is a commercial product which does offer a free version for small sites of 50 pages or less. It will NOT work with any of the Rootweb servers. This site is now using Zoom Search.
Here is an example of the Google search box with the coding for the basic form.
Google Search Box
Thursday, 19 May 2011
Criticism and Comments
In the development of the site whilst making it the correct critera and genre. We decied to not only keep a log of the work done or the progress of getting their but constantly keep the cilent in the loop. So if they didnt agree with any of the changes they could be amended. This gave us better relations with the cilent and got us comments and feedback such as,
"The colours 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."
Andrew - AJC Software
THe main reason for gathering constructive critisim was to indicate the good parts and the features that may have room for improvement. This gave us the area of improvemnt to as a group create the best possible site suitable for the cilent and browser.
"The colours 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."
Andrew - AJC Software
THe main reason for gathering constructive critisim was to indicate the good parts and the features that may have room for improvement. This gave us the area of improvemnt to as a group create the best possible site suitable for the cilent and browser.
Scroll Box
I have just added a scroll box to the products pages(product features page). I have styled it in css and stuck with the cream/magnolia background with black font and a brown border. This complements the other colours and blends into the design seamlessly. Working well to fit into the correct cirtera of the website. The reason for the scroll box was to reduce the length of the page and make the bulk of the text seem less whilst keeping all the relevant information that is needed. I believe that it has achieved this and still manages to be functional and easy to navigate for first time browsers.
Plans for Work
After Requierifng a few reviews of our website so far and some constructive critisium. The prensentation also gave us some new ideas, from questions and comments. The new changes and amendments for the website included a slight colour change and a revamp to the home page. This consisted of some margin changes and an additional colum. The third colum is going to contain a testimonial feed, whilst keeping the exsiting two divs. The other changes were within the other unfinished pages. These finaly changes can be made whilst adding the remaining content and finalization of the structure.
Thursday, 12 May 2011
Light Box
I perviuosly used lightbox on the last project and found it a great asset to the website. It gave better usability with easy functionality. Not only giving them the optoin to enlarge the image for veiwing but flick through the images as a gallery.
I have also looked at other galleries that may be relevant. Including looking good whilst fitting in with the genre with easy functionality.
Here is the gallery galleriffic an example of a jquery gallery I found, which may not be useful for this project but may come in handy in the future.
I have also looked at other galleries that may be relevant. Including looking good whilst fitting in with the genre with easy functionality.
Here is the gallery galleriffic an example of a jquery gallery I found, which may not be useful for this project but may come in handy in the future.
Accordion
Below I have added screenshots with the accordion in use. The reason for adding this to the website is to give a simplified way of taking in the content the user requires, instead of reading throug it all to find the information you need.
The intail plan is to incorparate this within the products page for the version pages. Giving the user the ability to selcet the version they require.
This image is an horizontal accordion with a second vertical accordion nested within.
Here is a horizontal accordion that Im developing to add to the versions page.
The intail plan is to incorparate this within the products page for the version pages. Giving the user the ability to selcet the version they require.
This image is an horizontal accordion with a second vertical accordion nested within.
Here is a horizontal accordion that Im developing to add to the versions page.
Tweeter feed
On the site we have decied to add a news contianer within the home page. The plan is that it will be a tweeter feed which will give the cilent the option to constantly update news on a regular basis. This is a first for me and I intend to do lot of background research looking into the coding involved.
Tuesday, 10 May 2011
Group Work- Update
So far as a group[ we have overcame numerous obsitcles and deault with a few probelms within the design of the website and with the cilent. The cilent part has been a bit difficult and we have used a group blog and other methods such as email to keep contact and show the updates.
This has proven testing and given the group a challenge that we intend on achieving in making a suitable website for selling software and fitting in with the correct cirtera.
As a group numerous meetings and disscusions have resulted in good organisation and good results in the progress of the website. With everyone working as a team and sharing the work out equaly.
This has proven testing and given the group a challenge that we intend on achieving in making a suitable website for selling software and fitting in with the correct cirtera.
As a group numerous meetings and disscusions have resulted in good organisation and good results in the progress of the website. With everyone working as a team and sharing the work out equaly.
Friday, 6 May 2011
Home page Design
This is the homepage that has been coded in CSS3 and HTML5 with a Jquery toolbar, including a javascript back up code for other browsers.
So far Ive coded the navigation and done basic sturcture for the websites pages.
So far Ive coded the navigation and done basic sturcture for the websites pages.
Thursday, 5 May 2011
Subscribe to:
Comments (Atom)