DYNAMO DESIGN

Final Design

Homepage

Colour

Typography

Layout 

Animation

Interaction

Dynamo Design

I have chosen to name the web manual as 'Dynamo Design' as the retro word dynamo is a very positive word used do describe someone as energetic. The name stood out from the rest and when added with 'design' the use of alliteration makes the name catching and stand out. 

Possible Manual Titles..

As my blog theme is retro I want the manual name to reflect this, so I have come up with some common retro words and phrases that could be used to create a name for the manual. I want to use that is associated with technology, success or learning and also this will link with the theme of the website making it consistent and reflect the design.

Graphics

Colour Scheme Ideas

I want to use complimentary colours that reflect the theme. I will primarily used tones of blue through the manual as I believe the colour is cool and calming yet can be also dramatic. It also reflects of the 'space' theme. 

I will use pink and white as a contrast to blue which will be used on the informative parts of the website such as the content rather than the aesthetics.

Sample Typography

Examples Of Design Manuals . .

To begin my project I decided to look at other examples of 'web journals/manuals', websites that in some way inform or instruct users on elements of design etc.

1. Trent Walton | Fluid Type:

2. Creative Blog: 40 Brilliant WordPress Tutorials For Designers:

Website Inspiration/Theme

Retro 1950's

I have chosen the 1950's as a theme to base the design of my web journal as I particularly love the design of posters and animation of the era. I believe that the retro style and the use of contrasting bright colours and shapes are visually appealing. It creates a funky yet modern style that is both fun and informative. These elements both contrast and reflect on technology and web design. Retro also implies that we should look to the past to go to the future.

Modern examples of Retro

Retro Futuristic

More specifically I have decided to base my web manual on the 1950's design around space and futuristic design and illustrations. Animation such as 'The Jetsons' that use sharp images in contrast to round softer images and also atoms and other futuristic elements. 

Jetsons

Visual Research: Graphic Illustrations

Graphical illustration is created through traditional means or through digitally drawing on a computer to achieve a particular effect. Illustration can be inspiring and communicates a story to its viewers through artistic means. 

Here are some examples:

Visual Research: Typography

Typography is the art and technique of arranging type in order to make language visible. Typography such as pictorial type has increased popularity in recent years as it allows designers to experiment with both graphical elements and typography to produce often amazing versions of typography that are not only appeal but creative, fun and expressive. 

Typography is shown across through various mediums such as print and screen. It is an important part of communication and can determine how someone visualises something. It can set a tone, mood, theme and much more. It is used for advertising, information, expression, communication etc.

Here are some examples:

Visual Research: Visual Iconography

Visual iconography is usually symbol graphics that represent something, such as an action, person, object etc. We come in contact with visual iconography everyday and is important in terms of visual recognition.

Here are some examples of visual iconography:

Visual Research: Infomation Graphics

Information graphics or info graphics are often a quirky visual and graphic way of displaying information, facts, data and knowledge. They have the ability do make dull information appear fascinating and intriguing often, often changing perspective.

Examples of Info Graphics are:

Technical Research: Java Script

What is Java Script?

Javascript is the most popular scripting language in the world. It is the standard language of the web and is widely used in things such as servers, desktop and smartphones. It doesn't require constant downloads from your website. Javascript is often used on websites to create things such as polls, quizzes and pop ups.

Javascript is built into all main web browsers such as Safari, Internet Explorer and Firefox. Provided that users visit your website using one of these browsers then the javascript will run when they visit the web page.  

Technical Research: HTML 5

What is html 5?

Html 5 is the latest hypertext mark up language for constructing and presenting content on the world wide web and a core technology of the internet. It consists of three types of code: HTML, which provides structure; cascading style sheets (css), which take care of the presentation; and javascript, which makes things happen.

HTML 5 is designed to deliver practically everything you'd want to do online without requiring additional software such as browser plugins. It does everything from animation apps, music movies and can also be used to build complicated applications to run in the browser.

HTML 5 is also cross-platform which means you can you it on your laptop, notebook, smartphone, notebook, ultra book or tablet and it will work. If your browser supports HTML5 it should work flawlessly.

In particular HTML 5 adds new syntax features,  these include:

<video>

an element used for playing videos or movies partially replacing the object element.

<audio>

is a subject of the HTML 5 draft specification, investigating audio input, playback, synthesis as well as speech into text in the browser.

<canvas>

the canvas element is part of HTML 5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph.

Other elements include the integration of scalable vector graphics (SVG) content that replaces the uses of generic <object> tags and MathML for mathematical formulas. These feature are designed to makes it easier to include and handle multimedia and graphical content of the web without having to resort to plugins and API's. Other new elements, such as <section> <article> <header> and <nav> are designed to enrich the semantic content of a document.

Technical Research: CSS3

What is CSS3?

CSS (Cascading Style Sheets) is a web based style sheet markup language that describes the formatting of a website in the browser. The style defines how to display html elements. 'CSS3' is the latest version of CSS that has certain changes from the first two versions.

CSS3 allows developers to build content rich web pages without having to use a ton of coding requirements furthermore creating more stylish visual effects, better user interfaces and pages that loaded much faster. New features of CSS3 include; text shadow, borders with images, opacity, multiple backgrounds etc.

WEB DESIGN MANUAL

As part of this module I must create an online manual on the fundamental design elements of a website. The website will communicate with users and demonstrate in an interactive way to make the user feel at ease with information they are receiving that can often be overwhelming to anyone who doesn't really know a lot about web design.  (A bit like those 'for dummies' books).

So let's begin!