Design for Web Workshop 1

Reactions to Various Websites without interacting: 

ollymoss.com > negative space, black, simple, layout, dark. 

Indexibit > free website where you can create website for free, simple text, links > brings up work. 

( First rule of web design > content that should make website look good, not the design of website )

1st mistake of web design > do a very simple layout / design 

WWW.OLLYMOSS.COM

malikafavre.com > produced using cargo, busy, flashing,grid,layout,boom,content there, animated.

mercertavern.com > old, fashion, vintage, hipster, grid, image, type

noble-design.co.uk > idea japan vector simple 

www.caavadesign.com > awkward, circle, formal, waves, light, layout 

WWW.MALIKAFAVRE.COM

squarespace.com > image wood simple square 

mylapka > simple, ikea effective 

cat-bounce.com > cats, moving images

POSITIVE / NEGATIVE REACTIONS TO WEBSITES.

3 questions you have to ask yourself when you are creating a website :

* What is the purpose of the website you are creating?

* Who is the target audience?

* What do the target audience need? why would they be on the website?

Information / products / insight / images / browsing work? etc. 

^^^^^^ READ THE BRIEF AND TRY TO AWNSER THE 3 QUESTIONS ABOVE ^^^^^^

]Like this[

REASONS FOR ONLINE PORTFOLIO: 

Displaying work, enable you to network, to get a job, clients, to get work from.

Agencies studios potential clients, networking other designers, 

They need to see your work, contact details, cv, experience, clients, how you are/what your doing?

NEED TO SEE WHO YOU ARE, FROM WEBSITE, WETHER YOU WOULD FIT IN? ETC. 

Design Look and feel > needs to fit in with what is current > trendy > will work with clients. 

How else can we determine audience needs?

Research like minded designers > see how they approach this.

FOCUS GROUP > what target audience needs ; go in and talk to target audience, ask them what they would like to see on their websites. 

COMMON ASPECTS:

NAVIGATION BAR

TYPE AND IMAGE

1990 INTERNET GOT INVENTED

LIMITATIONS FOR DESIGNING FOR THE INTERNET:

* SIZE > EXTRA (FOR MAC > SYSTEM PREFERENCES > DISPLAYS) EVERY COMPUTER / SCREEN IS DIFFERENT SIZE 

* RESOLUTION > How can you get around this problem? You design for the lowest common denominator. You design to be smallest.  

Pixels per inch > 72 

96 pixels per inch since 2000. Everyone still works at 72 pixels per inch, but it is at least 96. 

Retina display is 227 pixels per inch } HUGE PROBLEM

* FONTS > Use fonts for commercial purpose, you have to pay a license for commercial use. Adobe Font > Annual pay fonts.

With the internet you are limited to using a number of fonts >>>

Say if you wanted to use verdana > make website live > YOU HAVE TO USE FONT FAMILY. Chose from standard fonts. 

SEO - SEARCH ENGINE OPTIMISATION -

To get around problem of being stuck by standard fonts, you get a web kit, embeds fonts onto website. Use similar font on da.font / font.squirrel  and don't have to pay, the problem is though, even though the fonts are free, as soon as you make them web kit, you are distributing a font, then people want a license for it. 

* COLOUR > screen = RGB but every screen in the world has different RGB you have to use a WEB SAVE COLOUR. lesser colour range then RGB. 

HEXADECIMAL CODE : Photoshop ; click only web colour on colour picker and the code is at the bottom. HAS TO BE WEB SAFE COLOURING COS IT WILL BE DIFFERENT COLOUR ON EVERY COMPUTER. 

HELPFUL BOOK:

HTML and CSS : Design and bUILD WEBSITES - Jon Duckett.

LANGUAGE:

HTML : hyper text markup language

used to create every single website / very limited in what it can do, could only use html you could only display text

CSS : cascading style sheets

two main scripting language. When you go onto a website you see the graphic representation of this code.  

WYSIWYG : what you see is what you get.

URL : Uniform Resource Locator

BUY domain name. 

FTP : File transfer Protocol (sending a filme from one computer to another to buy actual space)

BUY this

CMS : Content Management system > blog / Facebook / updating text and images. 

Work flow > get brief > put together a scamp > produce 3 variations > client chooses design > sign it off > VERY IMPORTANT > wether they want to manage content / or me to manage it > pay annually if you do it > hourly rate > content management > they can log on and update content EXTRA COST. 

CREATING A SCAMP:

Dimensions 1024 768

font family : arial helvetica, sans serif

Align : central 

Background colour : white black grey

Navigation > left or top > TOP, 70 % width with central align.