Today we will look at websites and 3 rules you should ask yourself when designing for web
Also general attributes which made a good website or a bad website. By the end of the session we'll create a website together via discussion.
Software being used after reading is mainly Dreamweaver, along with Adobe suite.
Nowadays you have to design for tablets and smartphones, tablets and the dawn of retina screens.
First impressions on websites, first 5 seconds impression. Unconsciously you will be doing this
Think of whether certain aspects are positive and negative. And reflect on them
ollymoss.com - black, dark, dull, empty, space, i like it, white,
^^ Created on Indexhibit, large group of artists and creatives use Indexhibit to create websites. Might look dull, and samey samey but the content itself makes the website look good. Not the design of the website.
malikafavre.com - black, colourful, wild, headache, paracetamol
360longstrasse.sf.tv - german, sausage, scroll, traffic lights, google maps, photo
with this one there's not a lot of reactions which could be a good or bad thing.
There's a trend with websites at the moment, website designers are thieves. One of the current trends is a full bleed photograph as a background to a website
mercertavern.com - retro, vintage, hipster, boxes, black and white, monotone, losttype
noble-design.co.uk - girly, liverpool, iphone, blog, blue, vectors
caavadesign.com - photoshop, circle, cutout, caava, california
Initial reactions are VERY important and pretty much the first thing to think about. It's that what will make you interact with the website, also what gives you something to think about when designing. An incentive to check it out.
sb-studio.co.uk - swedish, greg, ikea, shelves, clinical, clean, minimal, photo
equ.com.au - takes longer than 5 seconds to kick in, annoying, intro, gold, 50s, retro
smart-heart.ru - interactive,mirrors, what's the point, photo frame, transitions, split, horizontal,
formfiftyfive.com - orange, black, white, customer service, dull, photos, mr bingo, illustration,
big.dk - loading, 0%, 5 seconds are up, tetris, transitions, colour, flourescent, david, photos, dominance, pixels,
heaven.internetarchaeology.org/heaven.html#bottom - Gifs, speed, drugs, sky, megadrive,
eatock.com - gcse, it, stock, designer, simple, dated, odd, white, space,
In order to get reactions of the viewers, 3 question you ask yourself:
1. What is the purpose of the website? From our research what's the purpose of my website?
2. Who is the target audience? Vast majority of the time it's different groups of people, not just one group.
3. What do the target audience need? How do you lay it out, what will benefit them and how? Content is for the users, not you.
Design of the website will come from the above 3 questions. If a website is successful you should be a able to work out the 3 questions by looking at and analysing it. Will help inform you as to what makes a website successful or unsuccessful.
How can we get answers to these questions?
Research
- Surveys to the target audience, Generally GD studios have a market research dept. running focus groups. Generally what happens to garner information. As a student/freelancer it's hard to get people to take part in focus groups but probably the most effective way to get information back. Look at stats about MMA and UFC viewership and demographics and numbers of new people watching it due to growth.
- Look at similar websites that have the same target audience and see what information they are displaying and think about your own website and what it has to offer.
Example - Portfolio website
Purpose of a portfolio - to promote yourself and share your work and gain work and a job
Audience of portfolio websites - consider your target audience, desiging something for yourself is different than designing for others. Consider your target audience and if they will 'get' you and your portfolio.
How we determine what the target audience need for the website? Research the studio see what they want. Most effective way to determine this, is just to go see them. Ask them.
During 2nd/3rd year, go to your favourite GD studios go see them, big them up, sit down with them and show them your work and ask them what you're looking for when you're looking to hire someone. The most effective way is to e-mail then and try and gain their attention, you've got 5 seconds. They'll see the email before they think about deleting it. Try and be creative and do something different.
A website always has - Type & Image & Navigation.
HTML5 - 5th generation of the internet basically. Allows you to do a lot of creative things.
LIMITATIONS
4 main limitations you need to be aware of when working with web
1. FONTS - 'standard fonts', fonts installed on your computer, e.g. Futura, if you use any of these fonts in a money making business, you have to pay to use those fonts. In Design industry, you have to pay an annual license fee to use specific fonts. You buy 'fontbooks' big folder of all the fonts you have the rights to use. Commercial license, Educational license.
To get around having to pay to use fonts, you can just use standard fonts. You don't have to embed fonts. For example if you wanted to use the Inception movie font. If you used that font on your site and made it public, it would only appear if the user using it had the same font installed on their computer, so 99% of the time the font isn't actually embedded, it uses whatever fonts on the computer.
Rather than using a single font, you specify a font family For example use Helvetica, if that's not installed, Arial, if neither, use any sans serif font. The default font for websites is always Times New Roman.
You can use a webkit to install the font ON your website, if you do this you have to pay a license because you are infact distributing the font, it can now be downloaded off the website and re-use it. For example fonts on dafont.com are often free to print but cost to web. For example a printed font, no one can re-use it, it's just there but on a website people can download it.
Really good website for web fonts called fontsquirrel.
2. COLOUR
First of all you have to work in RGB. Even more restricted you have to work with a variant, called web safe colours. When creating a website, everything is made out of code. Everything is constructed out of code. Even a colour is a code. You use a HEX decimal code to specify a colour.
3. THE PHYSICAL SIZE
The width and height of your website. Screens are all different with different resolutions and sizes. You need to work with standard web sizes. It used to be easy to design for websites for example they were all probably 800x600 wide. Nowadays though there's tablets, phones, laptops, desktops with varying resolutions and aspect ratios.
Has to be consistent across all screens. For example a 1024x768 website would look poor on a 800x600 screen. You'd have to scroll and it wouldn't be a good experience.
4. RESOLUTION - PPI
Resolution for screen based images is 72ppi. Pixels per inch. It's 72 because it's said any screen in each inch there are only 72 pixels. But it's not true, there's no modern screen where there's 72 pixels per inch, maybe back when the net started but not now with todays technology. All old Mac's had 72 ppi, PC screens were much better and had 96 ppi. Nowadays a modern computer in 2012 has 96. 72 is out of date.
Nowadays with a retina screen with the really, really high pixel density. The resolution is 227ppi. So stuff that's designed to 72ppi looks very pixelated when viewed on a retina screen. If we designed to be ok for an iphone, on a 72ppi screen the stuff will look stretched out.
Solutions?
Create websites in different sizes. Have mobile versions of websites specifically designed for a smartphone.
One way how people get round this - taking up 100% of the screen, so sometimes you have to scroll horizontally but with different screen sizes it just varies in how much you scroll so it's not too suitable.
Some websites adjust to the size of the screen, content resizes flexibly. Problem with that is if you made the image at 800x600 when it's stretched the quality will become downgraded.
Huge PPI images would use up a lot of bandwidth, storage and data.
Always design for the lowest common denominator, in general you're not designing for other designers with fancy retina screens, not always your audience. Majority of websites could be 800x600. wide or 1024x768.
You can make some websites where it only scales smaller, never bigger.
In the next 5 years, everything might just be tablet. Desktop computer browsing will not be as frequent as it is now. All new computers may be touch screen tablet performed.
BOOKS
HTML&CSS - Design & Build Websites - Good book! Bitesize information, lots of examples, easy to understand and not wordy.
CSS - CSS Mastery. Quite wordy and technical but good.
SCAMP. SITE MAP - listing what pages you want on your site and how they link together. Create a pretty representative idea of the finished website. You want your finished website to look like your scamp. You shouldn't be making design decisions when actually making it. Start doing the rationale and scamp for your own website.
TERMINOLOGY
HTML 5 - The language of websites. Hypertext Markup Language
URL - Domain name of a website. Stands for Uniform Resource Locator
CSS - An addon to HTML. Not as limited as HTML, HTML is only really useful for text. CSS is good for a more graphic approach. Cascading Style Sheet.
FTP - File Transfer Protocol. Getting a website from index files to the web and sharing it. FTP is sending information across the internet, sending info from your computer to the users computer.
CMS - Content Management System/Solution. Allows clients to update websites. For example Facebook is a CMS, updating and uploading images and statuses daily.
WYSIWIG - What You See Is What You Get. For example, Dreamweaver. Creating a graphic representation as you're designing it is the beauty of Dreamweaver, but this isn't really that easy. There's a lot of issues that can arise.
SCAMP WITH THE GROUP!
0 comments:
Post a Comment