Unit 44 Website design

Task one- Research website design technologies

Codecademy tutorials/proof badges:

Web Technologies:

Html:
html is a markup language designed to structure the presentation web pages, it effects the compatibility of the web page across other systems e.g androids, mobiles. depending on how efficiently it is written it can determine how fast a website page loads up and search engine friendly.

Cascading style sheets:
Cascading style sheets is another way or used in combination with html to also help structure webpage presentation sorting though the style of the side and the actual content of the site.

Javascript:
Used alongside html to produce webpages that have a interactive heavy requirement since its much more dynamic and specific to creating interactive features more than html.

Javascript  (born in 1995 and called livescript) was originally introduced and used for websites to only create dynamic behaviour of objects, e.g animated effects and style switching. but in recent days has become alot more and is more widely used in other areas other than website creation due to the changes to html5 and more poweful API's also new coders being released that presented the script and was easier to use for wider audiences programs such as Iquery and node.js.

PHP:
is a server side scripting language that is used to create dynamic and interactive websites, it is useful for integration into online databases.

XML/XSL:
xml is a independent technology, it is software and hardware and is used for transmitting and describing information/data. XSL is the language used for defining and transforming XML documents.

Secure servers:
these are special servers linked up to websites that keep essential and personal details safe from third party companies so it is useful for online banking or personal medical details. SSL (secure socket layer) is one method people use to secure information/data and exchanging data securely.

Macromedia Flash:
this is (was) the go to program for creating all animations and interactivity ,sounds and database integration into a website. flash alone can create a fully multimedia website (but can have some disadvantages against using the other technologies out there)


 Task two- Research website design issues 

They're are a few aspects of web design that must be followed in order to achieve a popular and clear website for viewers and what aspects you need to avoid either using or over using.

These rules are basic web fundamentals and is split into these topics:

Imagery and layout-

it is important to make sure you have not over used images on a website, although sometimes appealing for eyes, it can also cause confusion and a general overwhelmed feeling, since the viewer doesn't nowhere to focus.

Image layout and size is important too, varying sizes of images can make a website seem unprofessional  and unorganised, where you should be following a set template for any page you create, presenting your info on page more clearly and nicely organised so the viewer is not overwhelmed by random sized graphics or sheer quantity. Allows them to focus on what you want them to focus on.

Colour scheme-

Use of colour on web pages should be used as a template rather than a decoration, since this can overcomplicate a site and cause confusion and generally making the website itself appear "tacky" or unprofessional.

Big companies usually base there colour scheme around there logo colours since its something familiar for the viewer and relatable to the company, reassuring the viewer that they are on the right site. also adding professional standard.

Typography in websites-

Its good practice in website design to make sure to keep fonts and font sizes to a minimum and seem to follow a method or template, for example to use a one big headline font (usually addressing the company  itself) this font can be decorative too. then its important to keep the rest of the fonts as sub headings being all the same size and style with the actual informative text (body) important to make this text as easy as possible to read for the viewer.

also general too much use of big blocks of text can deter some viewers from continuing through the website.

Compatibility-

More important in recent days with the diversity of different devices and platforms e.g smart phones, tablets and laptops. meaning websites have to have the functionality to be flexible to display the information on pages clearly and in the right place and format of fonts. also with images used have to be universal across most if all platforms if companies want to reach out to a wider audience.

Examples of good and bad websites-

Bad website no 1

http://www.dsrny.com/

-Efficiency:
this website begins to load up every tile one by one rather than either having it all available at once or having separate web pages to disrtibute the information more evenly. instead the use has to wait for all of the site to be loaded before browsing.

-Compatibility:
this websites heavy use of flash animation and integration is a high requirement for most low end pc's or laptops making the site almost unable to use from lag or from patience of the user from slow scroll speeds. this cuts alot of their potential audiences out, since only high end pc's are able to view.
i can also imagine this site will be difficult to render for most smart phones and androids.

Bad website no 2
http://www.lingscars.com/

-Colour scheme: Far too many different colours have beeb used here and although vibrant in appearance generates confusion and instantly give you that untrustworthy and "cheap" feel, deterring away most customers.

-Structure: There is no real defined structure on this website all the information displayed is thrown at you all at once, multiple links to the same source of information it all adds confusion on where the user needs to go to buy. flash animations and pictures also block the view of car deals from time to time creating annoyance by waiting for the animated object to pass by so you can see the deal clearly.

Good website no 1
http://www.youtube.co.uk/

-Colour scheme:
youtube uses its colour scheme very well, its simple and fits to the main logo completely of the white and red, it gives a good feel of professionalism and ensures the user that this is a trustworthy site due to its structured use of colours.

-Imagery and layout:
it is a very well structured website with the main task bar being down the side listing all the categories that appeal to the user e.g, subscriptions, playlists, watch history. having all the information and navigation in one location is very ideal for the user since its a main reference point to go to to find things on the site without enticing confusion. the main bulk of information displayed e.g videos are layed out in the box area next to it and try to follow a grid pattern layout at all times.

Good website no 2
http://www.eyesopen.org.uk/

-Structure:
this website is very good example of following the 960 grid system as a guide or general rule of thumb for layout it all keeps within the parameters of the grid. all the information is one page too ruling out the hinderance of moving between web pages (although gathered cant be said for all websites since for some its required for speed of information displayed) all the information is there ready to read with the only need to scroll down.

-Compatibility:
this website would be suited for all forms of devices due to its simplicity of its information displayed and structure layout since it fits a landscape theme it suits to all dimensions of tablets, phones ect.

Task three- Produce an interactive web page template

Initial thumbnails:

i took the lower left thumbnail forward for my development as seen below:

Task four- Evalution

What was the task?

i have produced an interactive webpage template which i will later on use for the rest of my pages, it is set up with a logo and task bar/navigation bar. this template has been asked for by the poetry slam live brief for they feel their own website is in need of re-design.

What have i learned?

• i have briefly looked over html coding and javascript coding and finished tutorials on basic image referencing and applying links to objects in a website. also experimenting with the format of different font sizes and styles on a site and what necessary code is needed in order to apply these varying fonts to a webpage.

• going over my research into different website technologies such as css (cascading style sheets), macromedia flash and javascript, i have learned about how each of these technologies effect and change a website's compatibility, style and efficiency  Also had a look into background servers for sites which provide useful services such as securing personal information and databasing.

• Looking over other websites and the brief of what the poetry slam site said they would like in their website i have a bigger understanding and wider perspective of all the design features of a site and how they must follow these guides in order to achieve a professional standard and to be more accepting by users of the site.

Strengths?

• i think my development and initial ideas for my template came out well, i structured the sketches so they were easy to view and labelled the various features of each template sketch on paper, i found this really helped me keep track of my features that i wanted in my template.

• i believe i have a good understanding now of what makes a website stand out whist keeping to a near professional standard and i have applied what i know from my research to my development and layout and feel i have come out with a varied range of suitable web page templates.

Weaknesses?

• Keeping up with time on my actual website production which limited it to just the home page being created.

• Although having basic knowledge of coding with html is useful i feel my knowledge was limited when my development sketches demanded more than i knew how to do, altering my desired style of the page drastically making it seem more basic than i wanted and with less features.

Possible improvements to be made?

• I need to prioritise my work more efficiently giving me more time to work on my webpage for future situations that require a website page designed.

• i feel i need to go back to code academy and review the tutorials and finish the last sections off to further enhance my knowledge of coding so i am more comfortable in developing my current website template state.
• i could aswell add more to both of my research articles giving more depth to all the technologies out there and possibly add a brief history of the technology for each.

Final outcome of website: