Context 3: Assingment Two Images

Here is two of my five images for the assingment 2 project.

This is image 2 for my assignment and is a representation of an application i have programmed.



The next image symbolises the passion I have for design and Interactive media.

Live Client Gnatt Chart

This is my propsed timeplan for the Live Client.



Below is the second half of the gnatt chart.



This is a table of the tasks with a daily duration.

Design for Interaction: User-friendly Graphics (book)

This book was used for the research part of the project and helped in the analysis of the graphics and imagery within websites. It helped me understand how they interacted with the user and compliamented the structure.



Baggerman, L (1 Jun 2000). Design for Interaction: User-friendly Graphics . US and A: Rockport Publishers Inc.; illustrated edition edition . p10-25.

The ideas/ plans for the five artefacts

The first: This will be a website that uses the methods and theories of design whilst using the techniques I found in my secondary research to produce a website that interacts with the audience and engages them. This will help in keeping them interested in the content. Thius will stop them from going elsewhere for the content they require. I will compare it with the second artefact in gathering results and data to gain a better understanding of the audience with my own primary research. This will support my findings within the report. To hopefully show how interaction and design principles with the correct use of different media forms engage with the user to keep them interested.

Second artefact: This will be another website that uses the same content and genre as the first artefact but instead will do the opposite. It will work as a comparison between both the first and second to see how the different methods and principles with the correct use can achieve an interactive and functional website that engages the user. This will hopefully show that uses poor colour schemes no images/little with a combination of obscure graphics and designs work against the client in making a website that doesn’t engage the browser and may cause them to look elsewhere.

Third artefact: This will be a series of focus groups and interviews linking back to the first two artefacts in gathering a range of data that supports the experiment. This will then be displayed in tables and charts to look at the patterns and data more efficiently.

Forth artefact: The next artefact will be a questionnaire that will be used to gain the opinions and beliefs of numerous participants. I aim to gain 100-200 people to part take in the survey. I will do this from one to one hand outs and chain mail through university and my blog and other social networks. I also aim to split them into too equal groups of people who are computer illiterate/ or of less knowledge of the genre against people who are in media and use computers on a regular basis. These results will be compared and analysed with an evaluation to conclude the data.

Fifth artefact: In the production of the final artefact I want to find out how interaction not only affects the desktop market of web but mobile. In this area I will look at a mobile application. I will create it in the same genre as the first artefact. It will test how interaction within mobiles and tablets can engage with the user.
In doing these five artefacts I will gain primary research that will give me accurate results.

Possible Clients

Rock city – Mobile variation of the website with media queries
Other local bars that may not already have an existing website with a mobile variation

Small business or companies - Such as low key business opened by graduates or uni based companies.

Gym website – This could have a database with PHP to create a schedule and booking system with timetable.

A portfolio website that will be used by photographers, graphic designers or other forms of designers.

Live Client - Ideas

Ideas and proposal

My initial plan is to create the following for the specific client. I aim to create a web application that fits the needs of the client and has additional features that will work with the structure and functionality of the website to ensure an interactive design. (Below is a list of the features I intend to add or possibilities for the application).

QR tag

Scroll box - on some of the information pages

J query toolbar/ navigation

A database with PHP for Schedule’s or timetable, with possible login and booking.

A mobile variation, with media queries to apply it to tablets and mobile devices.

Using percentages to readjust the slides structure to the screen size.

A contact Form that links to the administrators email.

Rollovers/ page transitions

Icons linking to social networks (Twitter, Facebook, and Youtube.)

J query sliding gallery.

Twitter Feed, that updates with comments.

All these features will show my skills as programmer whilst the content and layout will show design skills I have and my approach on graphic design.

Webdesign Management Plan

I was browsing the web and found this example of a way of time mangement in web design. I will use this as a starting point for creating my own gnat chart that will show the work plan in more depth.

Principles of user interface design

The principles of user interface design are intended to improve the quality of user interface design. Constantine and Lockwood principles are as follows:

• The structure principle: Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.

• The simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in the user's own language, and providing good shortcuts that are meaningfully related to longer procedures.

• The visibility principle: The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don't overwhelm users with alternatives or confuse with unneeded information.

• The feedback principle: The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.

• The tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.

• The reuse principle: The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.
These are some of the different principles I analyzed whilst looking at the websites. This helped in producing my research report and in gaining more accurate data whilst giving me a better understanding of web applications.




Raskin, J. (27 August 2011). Principles of user interface design. Available: http://en.wikipedia.org/wiki/Principles_of_user_interface_design. Last accessed 16th Nov 2011.

User Requirement analysis

Requirements Gathering- A requirement is a statement of what the system should do. The overall goal of requirements is to express what the proposed system should do; just what it should do. The “hows” are answered by the anylsis and design. It is a key method of expressing the requirements in a way that all concerned can understand.

Analysis – Analysis is the process of examining the requirement’s and making models such as wireframes, storyboards and site maps.

Design- The principal is to create the models into a design.

Implementation- Implementation takes the ideas from design to add the code of the web applications.

Test- This is to test the web application and check the code works and functions correctly

Deployment- Is to deploy the web application.

Definition of Research Methodologies

‘Generally speaking, methodology does not describe specific methods despite the attention given to the nature and kinds of processes to be followed in a given procedure or in attaining an objective. When proper to a study of methodology, such processes constitute a constructive generic framework; thus they may be broken down in sub-processes, combined, or their sequence changed. As such, methodology may entail a description of generic processes, philosophical concepts or theories related to a particular discipline or field of inquiry. Similarly methodology refers to the rationale and/or the philosophical assumptions that underlie a particular study or a particular methodology (for example, the scientific method). In scholarly literature a section on the methodology of the researchers is typically de rigueur.’ (Wiki,2010). This is a definition I discovered that describes the research methodologies and helped me in writing the paragraph for my research report.
I found the Methodology is generally a guideline for solving a problem, with specific components such as phases, tasks, methods, techniques and tools. It can be defined as the analysis of the principles of methods, rules, and postulates employed by a discipline also as the study or description of methods.

Online Hosting

I have been recently looking at online hosting and servers, looking at the different deals and price variations. This was to see what site would offer me the best online hosting.
Here is a list of a few I found:
http://www.rustymonkey.com/nottingham-web-design/web-hosting.php - this is a Nottingham/local based one
http://www.pipeten.com/
http://www.ipage.com/ipage/index.html

Python

The Python programming language is actively used by many people, both in industry and academia for a wide variety of purposes. This object-orientated language is quite similar to Java and ASP.NET I found in its ability to create dynamic web pages and various types of software applications. Python integrates well with many other technologies. Apart from Ruby, Python is said to be the fastest growing open-source languages available, used in everything.

A clean object-orientated design and extensive support libraries make Python far more productive than languages such as C++, Visual Basic and Perl. Some of its major advantages include:

Cross Platform - Python is compatible with most major operating systems

Speed - Python is much faster than other interpreted languages.

Extensible - Python makes it easy to write your own extensions in C or C++.

Highly Scalable - The extensibility, speed and power of Python provides access a dynamic set of tools that help you effortlessly scale to larger projects.

Easy to Maintain - Python's natural elegance produces code that is not only easy to read, but simple to redesign and modify as well.

Open-source - Starting as an open-source project, Python's efficiency can be attributed to the contributions of thousands of developers around the world.
I have created a list from numerous sources just listing the possibilities of using python within web documents.
OpenERP, an open source comprehensive suite of business applications
ERP5, a powerful open source ERP / CRM used in Aerospace, Apparel, Banking and for e-government
GNU Mailman, one of the more popular packages for running email mailing lists
MoinMoin, a popular wiki engine
MootiroForm, an open source form creating software
Planet, a feed aggregator
Plone, a user-friendly and powerful open source content management system
Roundup, a bug tracking system
ViewVC, a web-based interface for browsing CVS and SVN repositories
Trac, web-based bug/issue tracking database, wiki, and version control front-end
Python Shell, A Python shell inside the Google Chrome browser.
Turntable.fm, a social media site for interactively sharing music, currently in beta

Perl

I learnt that Perl is a general-purpose programming language developed for text manipulation and now is used for a wide range of tasks including system administration, web development, network programming, and more. The language is intended to be practical. Its major features are that it's easy to use, supports both procedural and object-oriented programming, whilst having powerful built-in support for text processing.
‘It is a high-level, general-purpose, interpreted, dynamic programming language.’
To run the Perl programming/coding this code: perl progname.pl
Or an alternative is this line with the first line: #!/usr/bin/env perl

Exibition Image Descriptions/Ideas

Image Notes:
In the exhibition booklet I found that the images included the following.

Progressive

Showing all their initial ideas and skills

Attention to detail in the visuals and imagery

Eye catching and bold- with the effect to make you look in more detail after first
glance.

Colourful

They all summarise the practitioners skills, telling the audience what they can do .
This helps me understand the practitioners own talents and gain an insight into how they work and what they do.

My own Image plans/ideas:
The images should show my skills and what I can offer a possible client or company in the future. In these five images I want to specifically show that I can do illustration and Graphic design whilst being a web programming in CSS, Html, Javascript and Jquery. Using my own unique style to attract the audience’s attention and express ideas through the five images.

50 word statement Ideas

I have so far produced two possible 50 word statements for the exibition caption. These are two ideas that I will work on and develop my final 50 word stateent.

Lars Thurlow uses a range of different skills to produce original desktop and mobile applications. He works in programming and designing web sites that interact with the audience. He has a passion for design incorporating graphics, illustration and programming to develop unique functional websites.

Making original websites that express his ideas, Lars Thurlow uses a range of skills to produce unique designs. He uses graphics, illustration and programming to create mobile and desktop applications, whilst having a passion in design and an eye for detail.

Designing for Interaction: Creating Innovative Applications and Devices (Book)

The book has useful tips for design research to uncover people’s behaviors, motivations, and goals in order to design for them. This helps to understand how responsive websites work and how to create a website that fits within that critera. It also offers interviews and case studies from industry leaders on prototyping, designing in an environment, service design, and more.

A small summary from the book its self.
'Interaction design is all around us. If you’ve ever wondered why your mobile phone looks pretty but doesn’t work well, you’ve confronted bad interaction design. But if you’ve ever marveled at the joy of using an iPhone, shared your photos on Flickr, used an ATM machine, recorded a television show on TiVo, or ordered a movie off Netflix, you’ve encountered good interaction design: products that work as well as they look. Interaction design is the new field that defines how our interactive products behave. Between the technology that powers our devices and the visual and industrial design that creates the products’ aesthetics lies the practice that figures out how to make our products useful, usable, and desirable.'

Saffer, D (14th Aug 2009). Designing for Interaction: Creating Innovative Applications and Devices . 2nd ed. United States of America: New Riders. p1-29.

Human-computer interaction: theory and practice

Author Julie A. Jacko, Constantine Stephanidis

This particular article describes how human interaction used to occur face to face and now has adapt to fit the virtual enviroment in creating this effect in interactive websites. This shows how the world is changing and become more dependant on technology replacing the interaction of human to human to human and computer.

Julie, A (10th April 2003). Human-computer interaction: theory and practice. 2nd ed. Mahwah New Jersey: Lawrence Erlbaum Associates,Inc. p53-62.

Undercover User Experience Design (Book)

This book particulary looks at design methods and how to create a functional website that fits the users needs whilst creating a user friendly experince. This didnt contain all the materail I was looking to gain in this area but offered ideas and some termonolgy of how websites are created to fit the users needs. This gave me an insight in to how certain aspects within the design can make a responsive website attarct more browsers and be more successful in engaging the user.



Bowles, C (17 Sep 2010). Undercover User Experience Design. United States of America: New Riders. p52-64.

Eyetracking and Usability (book)

Eyetracking Web Usability is a book I looked at as part of my research, it is based on the studies of eyetracking usability in existence. This is from aurthor Jakob Nielsen and coauthor Kara Pernice. It looks at how human eyes interact with design within web. Their findings help understand what people see or don’t see, when they look, and why.They also discovered important new user behaviors that are revealed here for the first time. Using compelling eye gaze plots and heat maps,demonstrating why some designs work and others don’t. They also provide valuable advice for page layout, navigation menus, site elements, image selection, and advertising. This book is essential reading for anyone who is serious about doing business on the Web.


Nielsen, J (1 Dec 2009). Eyetracking Web Usability . United States of America: New Riders. p10-18 and 70-74.

Article Supporting Research project

The title is: Reach beyond use and usability and focus on impact by combining marketing and interaction design to improve academic website development.

Below is a slight summary of the article I have looked at. To create a sucessful website it must be an engaging, user-focused site that gathers needed data and advances organizational goals is not simple. To do so effectively requires a willingness to approach a website development project in a way that capitalizes on both interaction design and marketing principles.

Journal piece that supports Research project

The title of the journal is, Opinion piece: Social media: Should marketers engage and how can it be done effectively?

This journal supports the idea that to engage with the customer or browser offers more possibilities and a better experience a quote specifically stood out was ‘Online advertising has been criticized for its creative limitations for years, but changes in the internet landscape have created new opportunities to engage with customers in ways not possible through offline channels. This particularly shows how technology and the internet have enhanced and improved aspects of the advertising world by using interaction to connect with the users.

Assignment 2: Image 1 Idea

This is one of my image ideas for the assignment two project. The idea is to show that I have a passion for design and creating web applications, whilst doing illustration and my own style of drawing in biro and pen.

Zach Gold - Photographer

Zach Gold is a photographer for the “Life Hurts” campaign for Dickies this is a range of images. The workwear company has been making tough, durable clothes for workmen. Their latest campaign highlights their heritage, claiming as a slogan “When Life Hurts, Dickies Endures.” The work shows scenes where the worker is at the worst situation. The photos them self are very powerful motion shots in black and white with the Dickies Logo in colour make their brand stand out from the imagery. The grayscale effect adds more definition and detail to the specific scenes of disaster. Here is a few of the photographers work for the campaign.

Web Template in hand-drawn sketchy graphics

This design was a blog style template I found on webdesigner mag website. I discovered it whilst looking into different web applications and designs within the graphic sector of wbedesign. Below it the sketch style home page. I specifcally like the use of a varied palate of colours in a collage of visuals. I hope to achieve a simular effect on an upcoming project but in my own style of illustration.



This is a close up shot of one of the other images.

Exibition Ideas

I have been thinking of possible exibition ideas below is a scanned in copy of my ideas and notes.

Final Screenshots of Client Project

Screen shots of final mobile site.

The first image is of the homepage.



This screenshot is of the gallery within the mobile site.

Proposal - Assingment one Context 3

Proposal: I propose to found a unque bussiness that will appeal to a large audience. The concept wasnt possible years ago due to the lack in technology but now times have progressed and the technology is at a sustainable level. I intend to make a web/graphic designer company that specailes in 3D stereoscopic applications, that will change education, advertising and online shopping. Improving all the aspects within these fields. Eg education helping teach children space enviroments and the solar system in 3Dimensions from their classrooms. To unversity medical school where possible autopseys and digrams in 3D give them the more accurate results and indepth knowledge that 2D couldnt provide.

Research Project - Topic Sheet

“How does the response of websites and interaction help keep viewers Interested?”


I hope to find out how specific techniques within web applications use interaction to keep a browser interested. I intend to look in depth if this encourages the browser to stay on the webpage or not. Investigating how these forms of interactions are developed and the outcome of the end results. Do they work and what multimedia methods are involved in the interface, such as Graphics, visuals, structure, sounds and videos. I intend to support this research with five articles using a mixture of secondary and primary sources to complete the project. So far I have began researching useful sources whilst gaining some background knowledge.
My initial plan is to separate the specific interactions into set category’s. This will define the different interactions within the web applications. After looking at numerous web interfaces both on desktop and mobile devices I have decided to split the interactions into three very specific groups. Whilst looking at the three groups I will also look at other factors that may affect the overall response between the viewers. The first category will be visuals and graphics, looking at how certain imagery can interact with the browser or even keep them actively engaged with the web page. The second group will be video and audio mediums applied to the web applications. The final group will be other interactions including things such as the animations within the webpages and other content. Whilst investigating these three areas I hope to see not only if a websites responds with the user but does it keep them interested using specific technique. In addition this should indicate which method works best to achieve the interaction.

Research Project - Possible Questions

I have listed three possible starting questions below;

“How has web design changed to become more portable to fit the needs of the user?”
I intend to research the development of new web applications and how they have changed to fulfill the needs of the audience. Particularly looking how the web response has changed from desktop to mobile. I intend to investigate the variables of a traditional mobile site in comparison to the desktop interface, comparing the evolution between the old and new. Taking in to account the specific aspects of both desktop and mobile/ App to discover how the need for portability has modified the original desktop web interfaces.


“How does the response of websites and interaction help keep viewers Interested?”
I hope to find out how specific techniques within web applications use interaction to keep a browser interested. I intend to look in depth if this encourages the browser to stay on the webpage or not. Investigating how these forms of interactions are developed, and the outcome of the end results. Do they work and what multimedia methods are involved in the interface, such as Graphics, visuals, structure, sounds and videos.

“Do mobile websites and apps benefit Local Leisure and Tourism?”

I intend to investigate how Mobile applications such as Apps and mobile sites can benefit Local Leisure and Tourism. Achieving a better understanding of the capability of mobile applications and how they function to the needs of the audience. Looking in depth how interfaces such as maps, guided tours, events, facts and figures can possibly improve tourism.

Report Client Project

In the client project i chose to create a design that would boost the awareness of cancer research within the Alumni association.

The project was to create a multimedia device/service for Alumni. That would benefit the company or clients. Immediately I tackled the brief by thinking up possible scenarios and how the product I would make may solve these or in fact help. I found that after numerous lectures the company helps others in many ways and works across a board area. To create something that functioned and was fit for purpose in the allotted time I decided to develop something more specific aiming at a certain sector of the business. The particular sector I wanted to do was Cancer research as not only would this be an area that I could raise awareness but I could develop A device that could raise donations that would help others. Working for the Alumni Company to create a way of donating through them which has its benefits.

Now I had a goal set in mind of what I would make I began the planning stages. The initial Ideas for the products I had where, A short animation with details at the end for charity purposes and Donating. The second was a website or App. The next was a logo and poster. These all being different ways of developing a multimedia product that could work for the Alumni in advertising and functioning to help raise awareness. After weighing up the pros and cons and taking into account the time limit I decided on making an App with a Logo as an addition. The reason for this was to help create a design that functioned but also has its own identification. I started the producing stages by drawing up a few different wireframes for the site. I also drew up numerous illustrations of possible logo designs. Now I had some ideas on paper I began the coding process and getting the structure of the app made. For this part I had a few problems getting the code to look and function correctly on both IPhone and Android. I used J query to help and also added media queries to resize the screen for other protable devices. I then used the CSS to style and add the graphics from the wireframes I had created on Photoshop. I decided on one of the designs out of the two I made by getting constructive criticism and an audience to pass comments on both. This gave me critical comments on the style, structure, color scheme and visuals. This helped in making the final decisions on how to design the final app but also what would work best. After creating the basic structure and design I began polishing parts of it and adding/ improving areas of the design. This included the functionality and transitions between the slides and the padding between certain objects. After adjusting these minor sections it made the overall functionality work and look better. Once finished and the final adjustments where amended after gaining feedback and constructive criticism off a number of participants. This consisted of statements about the graphics on certain pages such as font styles and typefaces that didn’t fit the correct criteria. Also another key change I made was the format of the pages and how the text was portrayed to the browser within the website. I made a theme that works as a whole to get the message across whilst graphically standing out.

The final product I believe achieved the aspirations and goals I set out to meet at the beginning of the project. I came across a few problems in the project especially in the coding, but putting in extra time and effort overcame these glitches and helped produced the final product. Overall I managed to organize my time well and finished the product in time even with the problems I had within the programing. After testing the app/ website I don’t think I would have done the project differently than I did it. As I meet the brief and managed to create a piece of work that not only functions to the needs of the client but also helps in the awareness and donation of cancer research.

Final Logo Client Project

I Decieded to redevelop the logo to create a new design that fitted in with the design better and look more the part.

Edited Logo Client Project

This is the edited version of the drawn logo I did earlier in the project.

Illustrative Logo Designs - Client Project

Wireframe Client Project Design 2

The home page is below.


The image below is a wireframe of the information page in the same style.

Wireframe Client Project Design 1

This was one of the two wireframes I created from my sketches and designs.

Proposal For Client Project

I hope to create a design that will appeal to a wide audience and inform people of the work Alumni do. With the key function of the app/ mobile site to inform people and work as a donation recipient for cancer research. One of the main donations Alumni do. My initial plan was to do a mobile interface because of the advancement in multimedia portability. Giving people the freedom anytime and anywhere to use the very helpful app that when finished will not just inform people but work as a device to gain donations for Cancer Research. The Alumni particularly aim at graduates, but I intend to make my market sector more niche and be designed for one of the sections within the Alumni. Instead of creating a board vague App I have decided to make a more detailed specific App. I will produce the App programing it in Dreamweaver using specific lines of code to make it work on both IPhone and Android.

Wireframe For Client Project

Client Project- Ideas

Ideas Client project
The projects brief was to create a multimedia form that meets the aspects of the company. The guide lines where board and the project could be whatever we deemed useful or relevant for the Alumni. I chose instead of targeting the company as a whole just aim at a specific part of the Alumni Corporation. This area was the Alumni Cancer research sector with key benefits for donating with them.
The first initial ideas I had where;
A short animation,
Poster,
Logo design,
Website,
App/mobile device.
After doing some quick market research and considering possible routes I may take. I decided the best one for numerous reasons was the App for Android/IPhone. The reason for this was because it would work best and put my talents/skills to best use. Using my programing and graphic design to make a popular portable site functioning to raise awareness and donations. This was also decided from my research showing that desktop websites are become less used in comparison to mobile web browsing. As an addition to this I decided to create a logo for Alumni, as there isn’t an existing one at the moment. This would give the company branding and identification within their field.

This Is one of the new advertisments from the Youtube Home screen. It imediatley stood out from the site for its unquice comic/ grunge mannerisums within the design. It almost has this old style feel that I want to capture in some of my future digital based designs.

Photography Website Development

Photography Website- Homepage Graphics

I have done three alternative illustrations for the home page. The first was a illustration of my own. That I created uses brushes, layers and opacity in parts to give the finalised look. After constructive critisum I ddecied to develop the main focus of the page. I made the image more fit for purpose, making the main image a polaroid. This imediatly says photography being symbolic in illustrating the websites purpose. I created two different variations with this in mind. The first out of the two a scatterted stack of polaroids and the other a centralised polaroid. They both consisted of the same photo. Which was one of the images from the photographers portfolio. Giving the browser an insight into her work and style of photography. Below are the three different illustrations for the website I created.









Evaluation

The other amendments included a slight problem with the font face kit for the Google browsers homepage. Where the sub title disapeared, which i corrected by redirecting the code enabling it to work correctly. The next change I made was to the Gallery page as with all the graphics in the background. It drew too much attention away from the images them self. So for this page I simplified the design that made it stand out more whilst getting the message across clearly. A few minor changes that where easily solved was a postioning of the sound bar, readjusting the sizes of the php form, and adding some social icons to the homepage. Giving the browser that extra form of contact and information. The other big change I made was adding different home page illustrations after constructive critisum. I gave a variation of a few different designs for the homepage main focus, all saying straight away "Photography".

Immersive Gardens

http://www.immersive-garden.com/

This is a practioner I noticed in a webdesign booklet and decied to check out the Interface. After seeing the powerful imagergy and bold photography. I visted the site and discovered that it is an animated design that is very imaginative and complex, with an eye for every little detail. All working as one to make a smooth running, and extra ordinary portfolio. They have won world wide awards in web for this particular website. I personally liked the interaction of the website and how it keeps the viewer interested and wanting to see more. Using unfolding digital compositions of high quality. The other part I really liked was the subtle navigation that interlinked all the different sculptured pages and animations. Below I have listed a few screenshots but for the full effect check out the web link above.

Static Webpage Defintition

A static web page is a web page that is delivered to the user exactly as stored, in contrast to dynamic web page which are generated by a web application.Consequently a static web page displays the same information for all users, from all contexts.Static web pages are often HTML documents stored as files in the file system and made available by the web server over HTTP.

Pricing guidelines - How to give a design quote

"1. Single Page Website
Single Page website price from £250.Four or Five Page website price will cost about £350 - £450." This is a statement on the http://www.toucher.co.uk/website-price.htm#websiteprices , refering to the price that should be charged or how to work out the set cost for a website. The rates for a website increase with extra features such as javascript and J query. Also the price varys on the amount of pages and time taken, with the extra use of coding adding to the equation. All of which adding to the equation of overall cost. After taking some time to research the variables and look into web companys specifically looking at how they quote a design. I realised that it depends on the brief from the client and there is no set price just guidelines on how to price up all the aspects involed in creating a functionaly site that is fit for purpose. In some cases going from three to four figures.

Illustration Of Man

This is an illustration I did in my spare time. Using pen and ink to give the rough effect before scanning it in to add the other details, such as textures and lighting effects.

Old Techno Portfolio Website Evaluation

This is the portfolio website that I used as a prototype to test how i would potray my work. Not only showing the websites I have done but selling my designs to future cilents. I began like before by going through everypage and beta testing the pages looking at the navigation and quality of the visuals and content. I started by adding a few animations and motion tween to specific pages. Making subtle changes that made the pages more interesting to the browser. The next change I made was transforming the work done page. I perviuosly had screenshots of the designs I had done with a small caption of writing. I developed the page into a gallery with icons to flick through my work. This made the page stand out more visualy and gave the browser control over what they want to view within the work done section. I also added three social icons to the footer of the contact page. For other methods of contact and viewing other content. After making these few changes and adjustments to the home icon position and padding of divs. I began testing the amendments on all browsers, such Google Chrome, IE9 and Firefox. I then finalised the design by Validating and checking it a final time to ensure it runs smoothly.

New Portfolio Design

Here is the first intail idea that I drew up.



My New portfolio design
This is the wireframe for my portfolio website. I developed this design from numerous sketches and hand drawn wireframes. Which ended with this as the final product. I intend on turning this graphic wireframe into a fully functional home page for my website. It consists of a box style toolbar that spreads across the header of the page. Which will have an animate mouce over effect for the text and links. Whilst having a Jquery sliding gallery below with a reel of my own illustrations and imagegry. I believe once completed and finalised the piece will speak for its self with bold imagergy, strong graphics and easy navigation whilst being fit for purpose.


Below is what I developed from the first wireframe to create my new portfolio design.

Portfolio Navigation

Typeface Wireframe Designs

Comic Style Wireframe

Floral illustrations

Here are few different floral patterns I have created.

Illustrative Wireframe

Mobile Website for android and Iphone

I have made anbd developed an Iphone/ Android based website. I created the coding and made back up lines with the iphone and Android Icons saved. So when in use it looks proffesional and functions effortlessly. I used a iphone simulator to test it called Xcode 4 which is Apples development enviroment for creating Apps for Mac, Iphone and Ipod. Xcode Includes Xcode, IDE instruments and the simulator to help test and design. In this process I created a simple index page from an idea. Which I developed into a few pages. From this I added the graphics and tested it not only on the Xcode 4 but on Google chrome and Internet explorer. Below Is a few screen shots of the product. In the design process I started it the same as a normaly webpage in dream weaver. Structuring the site as normal with exceptions for the start up code for Jqtouch that sets icons and start up screens. All of these steps where straight forward and done following the step by step guide creating this Iphone/ Android mobile application.

People per how (website)

This is a useful website I found that is designed to hold jobs that can be bidded on by freelance designers to ethier gain experince or just add too their exsiting portfolio. You are competing against other designers but it is a great website to get your foot on the ladder and gain an insite into the industry.

QR tag (Quick Reponse code)

A QRtag or Quick Response code is a twodimensional barcode. These are often used for adding web links to a printed page. When scaned using a web cam or mobile phone camera, the QR reader application can take you to a Web site, a YouTube video or some other web content. QR codes are an easy way of sending people to a site without having to type a URL
Also QR tags can be used for containing other information such as;
A QR code on a business card can contain an electronic version of the contact information. Scan the code and the reader application adds the contact to your address list.
A QR code can contain event information. Scan the code on a poster for a concert and the app automatically adds its name, date and location to the agenda on your smartphone or PC.
A QR code can contain an SMS with phone number and text. Scan the code and the scanning app lets you automatically participate in some contest to win fabulous prices.
A QR code can contain an e-mail message with a subject and message text. That message can be a request for information so that in return you might get a reply email with additional information and attached files.
A QR code can contain a geographical location. Scan the code on a poster advertising for a restaurant and its location becomes available to your navigation software, informing you how to get to that place.
WIFI configuration data.
These are many of the Uses a QR tag can have, I have been researching into QR tags to try adding one myself to my website. At the moment it is early days and Im still decied what to use it for and how to make it. I have found a website that you can create a QR tag for free online but personally I would like to have a look at the coding and see how it works and possibly try it myself.
Here is a useful link : http://www.qrtag.net/create

Across All platforms

I tested a turtorial I found that makes a mobile site work across most platforms, targeting a larger market. In this turtorial I achieved a mobile website that uses lines of J query code to make it work on all devices giving that freedom to the browser. The turtorial also helped me grasp how to create a simple but effect mobile website. This is one of the first proper mobile interfaces I have made that isnt just a side site from the main one. I even made the effort to add a specific code whilst using percentages within the design to resize the application so it works on tablets too.Below is a screenshot of the intail homepage and the contact page, with the contact form.

Tools of Trade - Web design

Below I have listed a range of different tools, methods and vices used within webdesign.
HTML 5 - html5 is the succesor to XHTML1.1. HTML 5 is going to revolutionise the web. It is an extension of HTML4. Html itself is the language that powers the web. The code its self literally marks up the contnet that is presented on every page. HTML stands for hyper text markup langauge. It was developed as a simple language to link text documents together. HTML3 and HTML4 lost there way and allowed developers to specify colours, fonts and other visual content in the markup. This made the code especially messy. With HTML5 and XHTML readressed this by sperating design from content. Instead using a style sheet to add the visuals. HTML5 goes far beyond XHTML with mark up and new tags such as articles, stories, asides, headers and footers- and much more. For the first time web designers can truly mark up their code in such a way that the code can describe the code within properley. This allows search engines to quickly establish the content of a page, and therefore return more accurate results. Also allowing develops to reduce the amount of code they need to write. HTML5 being the future to webdesign and a great addition in developing the website, with most browsers surporting it.

Css3 - Css is an acronym for Cascading Style sheets. This is what makes and is used to create the webpages visualy appealing. Originally webdesigners wrote the code and embeded it straight into the HTML but this led to very heavy code with confusing markups in pages. Css was the solution to the problem allowing the content to be sperate from the deign. Each element in the page can be targeted from CSS and a series of visuals.

Dreamweaver- Dreamweaver is the web design and development tool .Originally the product of Macromedia. Recent versions produce clean code that works well. As well as the ability to edit HTML, CSS, javascript and server side code, other built in functionality includes testing live server and allowing to constanly check the site through any browser in design view.

Javascript- Scripting language that incresingly powers the special user interactions and effects that are on the web. Javascript is now the most popular scripting language within the web. The most advanced user interactions that arent created using flash or sliverlight where powered by javascript. The language allows the developer to respond to user interaction and change elements on the page, from visual characteristics such as width, height, background colour and so on to position visabilty and contents.

wordpress-It is a content management system on the web. The system uses a template scvheme to publish content. This templating system allows the developer to create any number of different looks for a wordpress powered website, all thwe while maintaining the content seperately from the design.

PHP- PHP is a server side language that enables more complex computing that can be achieved server side only. The acronym stands for Hypertext Preprocessor, but originaly stood for Personal Home Page. The code itself is quick to develop and deploy, while retaing full power of a desktop programming language.

MySQL-MySQL is a open source database server.It doesnt have any direct user interface being a relationship database.

Joomla
Joomla is a content management system that is competor of Drupal.

Drupal- This is a free content management system written in PHP. It contains the core features as all common CMS platforms, including user accounts, menu management, content management, page layout and templating.

Flash-Is a multimedia object designed to sit within a website as a plugin or embeded.

Social Icons

I have drawn and designed some sample social icons. I have just made them as drafts, to improve on and develop into my own unique social icons for my portfolio website. So far i have kept the ideas very board trying numerous methods and design techniques creating these simple mock up ideas which will be the starting point for making some new icons of my own. So far I have found that social icons stick to a simple but effective approach with little details that adapt to there specific genre or criteria.

Pit and Pendulum Development Evaluation

I have spent some time beta testing my website and being critical on what improvements could be made. I started by making a list of points I wanted to change to make the website look and function better. I added a copyright protection to the home page to protect the content, but also make it more professional looking and functional. I also added a Facebook social icon with working link to the contact page to give an extra feature for the social side of the website. Giving the browser that extra information. The last tweak I made was deleting the line of coding that made the links change a purple colour after use. Overall after making these minor changes I believe it has made it overall look and work better. The final change was organising all the files and documents making it easier in the future for further adjustments if needed. The finalisation of the website included me checking it on Internet explorer, Google chrome, and Firefox and validated it on W3schools.

Diesel website

I like this site for its bright colours and originality. The bright colours and bold imagery doesn't clash but in fact complements each other. This is a flash based website and one of the most interactive sites I have visited. It is a well structured site with multiple layers with imagery that interacts to the mouse crusor. Each image on the comic strip style page interacts differently either expanding across the page to overlap other parts or changing all together. Overall this site works well and not only fits the comic/ super hero style design but uniquely fits the criteria of the diesel clothing line. Below is a series of screenshots from the website and some annotations.

The main homepage










Below is the side panel that slides across for an alternative navigation.

Parallax scrolling with Html5 and css3

The method is that each panel has a fixed width and height , and contains between six and 12 layers. A layer is either a transparent PNG (larger than the panel) or a speech bubble. The movement of the mouse moves the layer on both X and Y axis with a jquery easing effect, according to speed and direction parameters. The parallax effect is triggered by each layer having different parameters.
Technique
1. In dreamweaver I created a HTML5 page and started by creating an area to fill with multiple background images. For this I made a simple div container.
code:

id="scroll"> box

2. Then I set the style.
.parallax {
width:400px;
height:180px;
padding:10px 10px 10px 10px
background-colour:#a0e0ff;
background-image:url (tree.png),url(ground.png),url(clouds.png),url(sky.png);

3.The finishing styling to the div.
background-position:0 0, 0 0, 0 0, 0 0;
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x,
}


4.The javascript.
< script type="text/ javascript">
var clouds_x =0;
var ground_x =0;
var tree_x=0;
function animate(){
clouds_x = clouds_x - . 2;
tree_x = tree_x - .7;
ground_x = ground_x - .5;

5.Final code
Document .getElementById
(' scroll').style.
background Position =
tree_x+'px 0, '+ground_x+'px 0,
'+ clouds_x+'px 0, 0 0';
t= set Time out ('animate() ' , 10);
}
animate();

Web design- creative to master the web(magazine)

This is a magazine I just recently bought that gave me a lot of knowledge and inspired new ideas. It includes lots of techniques and useful tutorials. There is specific sections that have helped me to create some useful additions to my websites. Also trying out furhter examples and making prototypes. Looking specifically into the HTML5 tags and CSS3. This magazine is more a text book of web design. It has helped me progress into this field and gain a better understanding.

Portfolio - Pieoneers

This website is a portfolio website and is good but has its faults. As a few of the links don't link to the correct pages. With some of the pages having to be refreshed. To solve the problem in some cases to recover the contents. The reason I wanted to write about this site was because of the bright colours and bold illustrations. I loved the use of hand drawn bright exstravaggent imagery. This not only looks good but sells the sight and makes it stand out from the rest. I would like to give my website this Unique selling point, whilst showing my own design flare and creating a website that's fits the criteria and meets the goals of the audience. Below is the home page with the illustration that drew me to the website.

Claire Coullon-portfolio site

This website is a simple/subtle portfolio website with some complex functions. The graphics are smooth and subtle having a perfect flow throughout the website whilst the colours complement the design and make the images stand out. The main homepage consists of a simple structured layout with the main focus a sliding Jquery gallery that discreetly changes image every few seconds. The other thing I like about the page is the block toolbar at the top that is made up of five blocks each with a title. Interaction with the set of sub links makes them fade into existence to allow you to navigate through the site more precisely. This is done with a simple image with downwards arrow key implying the box has more to reveal too the browser. Throughout the other pages the structure sticks to the theme of the homepage alternating the image slider for the specific pages content, most of the time with a photo/ illustration to the left with a caption describing it to the right. I really like the graphics behind this site and the fact it captures simplicity whilst being effective visually and fitting the correct criteria of its market audience.

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

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.

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

value="genealogy-web-creations.com" checked="checked" /> only search Genealogy Web Creations