Technical Research HTML5

What is HTML5?

HTML5 will change the digital landscape, transforming the role of rich internet applications along with it. After ten years this is the newest form of HTML and will revolutionise the way designers create websites and also the way users interact with them.  

This new feature has integrated functions, including new video and audio commands, and a range of benefits for designers looking to bring interactivity and quality internet functions to sites without the need for heavy coding. HTML 5 focuses largely on web applications, something not catered for in previous versions.

By including new section tags such as <nav> and <article>, HTML 5 will give designers significantly more control over the final look and feel of their websites. Most designers these days are comfortable with the basics of CSS, and elements such as these will go a long way to simplifying mark up with the new tags replacing common <div> components.

HTML5 isn't so much a Flash killer as an attempt to make web pages more flexible and more like independent applications. There are two motivations: fixing some of the issues with current HTML code and simplifying standard features - so, for example, a new <nav> item explicitly defines navigation bar items, and makes them easier to design and work with. The second is extending web pages so they can include useful features that are familiar on the desktop, such as drag-and-drop and undo. Data will become more interactive, mobile and editable.

<canvas>
Defines an area for drawing, which can be filled with JavaScript commands. There are no limits on the JavaScript you use, so you have a blank canvas that you can fill with scripted drawing operations. The one catch is that drawn objects can't be referenced through the DOM (Document Object Model) used in current browsers, so the JavaScript has to be self-contained, and you can't easily control objects with external code.

<video>
Embeds video. For audio, use the <audio> tag. <video> is like an updated version of the <img> tag - it works as easily, using similar syntax. Pick a source file, and your video is ready to play. More advanced options include explicit per-browser codec support and selection, progress updates and JavaScript transport control, so it's easy to build your own custom player window.

<nav>
Defines items in a nav bar. Instead of having to hack your pages to add nav bar features, the <nav> tag tells the browser to handle nav intelligently, with optional rollover, hover and click support, and other essential effects.

<aside> and <article>
These tags offer simple semantic tagging. <aside> is content that it is related to but separate from its container, while <article> tags news feeds, blogs, forum comments or other content, which can be from an external source.

<header>
Not to be confused with the existing header formatting tags, this defines an introduction to a document. It can indicate above-the-fold summaries. When used with the new communication features, pages can easily aggregate <header> content from multiple pages to create a quick summary.

Technical Research CSS3

What is CSS3?

“CSS” is an acronym for Cascading Style Sheets, a web-based markup language used to describe the look and formatting of a website to the browser.“CSS3” simply refers to the latest incarnation of CSS, with additional capabilities far beyond the scope of the first two generations.

Because of its modular structure, CSS3 allows developers to build web pages with relatively lightweight code requirements. That means fancier visual effects, better user interfaces and most importantly, cleaner pages that load faster than ever before. Simply put, CSS3 is the presentation layer of a web page that leads the charge for all of the other technologies buried within.

CSS3 finally brings the promise of desktop-style layout to web pages, complete with graphic elements such as drop shadows, gradients, border effects, multi-column layouts and much more.

Technical Research Java Script

What is JavaScript?

JavaScript is the most popular scripting language in the world. It is the standard language of the web, and widely used in servers, desktops, and mobile phones.

A scripting language is a lightweight programming language that supports the writing of scripts. JavaScript was designed to add interactivity to HTML pages. JavaScript is programming code that can be inserted into HTML pages to be executed by web browser. Many HTML designers are not programmers, but JavaScript is a language with a very simple syntax. Almost anyone can put small "snippets" of JavaScript code into HTML pages.

HTML and JavaScript are two completely different things. HTML is a markup language designed for defining static web page content. JavaScript is a programming language designed for performing dynamic tasks. Sometimes the distinction is confusing because JavaScript code can go in the same file as HTML. JavaScript support is built right into all the major web browsers, including Internet Explorer, Firefox and Safari.

Visual Research Information Graphics

Graphical Representations and Visual Content

Information design in its widest sense is about the selection, organisation and presentation of information to a given audience. The information itself can come from almost any source such as a weather map or timetable listing travel departures. Unlike much of advertising and marketing design, in which the object is to persuade the user into a course of action, information design tries to present all of the objective data required to enable the user to make some kind of decision. 

The information is usually only of value to us if it includes material that we are not already aware of. The designer is given a set of information- wether of raw data, a set of actions or a process, and must turn them into a visual process capable of revealing its essence in terms which a particular audience can grasp easily. 

Most information graphics falls into three categories. The first involves information presented as an organised arrangement of facts or data, such as a timetable or map, from which users are free to extract only that information which they need for a given purpose. The second involves information presented as means of understanding a situation or process, such as a guide book or stage by stage description on how to get a machine to operate. The third involves design of control systems.

Typography

Type for Print and Screen

Pictorial type has made a massive impact on the creative industry in the last few years. Some designers try to blur the line between illustration and typography, and enjoy the unexpected images that can be produced. Designers can sometimes seek out recognisable shapes within letters and create an image fro them. Type for print in magazines for example can sometimes be quite different to type on screen. It is often a lot less elegant and more funky and eye-catching in order to advertise a brand or sell a product. Like the example below it can sometimes be three dimensional and  form the outline or content of an image in correspondence with the text.  This particular design is interesting because it has different colours sizes and textures added to the text to make it represent and image and also has the added boost of a shadow for effect. 

Large amounts of text for screen can be displayed in visually aesthetic ways by combining colours and highlights to and also behind the body to text to make is stand out whilst still remaining legible. 

Graphical Illustrations

Illustrations for Magazines or Articles

Here are some examples of Grundini's illustrations showing the basic communication of design. There are many bright and interesting illustrations which are strong and communicate a good sense of creativity to engage the onlooker, especially the illustrations for magazines such as creative review. His work can be both mature with a playful aspect but also a young and childlike feel which still engages all audiences. Some pieces are very detailed and intricate where as others are very simple and clean. 

Some of the pieces below are strong in typography and colour whereas others are stronger in imagery with illustrations and layers. These pieces represent good aspects of webpages which might be beneficial to when it comes to design the layout and features of my own work. Some pieces combine the use of large scaled and eye catching imagery in relation to smaller more compact text. 

Mind Maps

Thought Processes

Here I have used mind maps as a way to break down the content of the website and think of the best way to include all the necessary elements. I have thought up ideas for the webpage regarding the animations, themes, illustrations, names, layout and colour scheme. 

Here I have taken inspiration from magazines showing illustrations for both print and screen and examples of web layouts which could be beneficial to me. I have taken a particular interest in illustrations which have a sketchy style and a circular theme. 

I began looking at names and logos for the journal. I have tried to make them quite quirky and unique as well as having a humour aspect.

Here I have done some sketches of what could be included as part of the content of the pages of the website. I particularly like the idea of having paper clips and post it notes as part of the page to deliver the information.

I have created some thumbnail sketches to get a rough idea of what the page could look like. I am drawn to the circular themed ideas such as bubbles, balloons and cogs which could be created with an illustrated style to fit in with my desired theme.