Today I have had my first workshop into designing for web. The workshop was introducing us to how to create and build a website. I was dubious at first going into the workshop I have never had the opportunity to create a website before, so to me this was very daunting. We began the workshop by looking into some of the terminology that is related to designing for web.
UI - User Interface.
UX - User Experience.
Different users have different experiences. Designing for the correct target audience is vital. If designed for the incorrect audience it will be inappropriate.
Limitations
I will need to design for the lowest common denominator. After this is designed we can then can think about responsive design or how to adapt to bigger screens. You always need to start from the lowest and build up.
Web Safe Colours
216 colours that are available to design for web, there are also 50 shades of grey.
The colours are available through dreamweaver or any adobe system.
RGB - 16million but can't actually use these. Can be used on CSS.
RGB (255, 0, 0) - cannot be sure this will be re-used on different screens.
Web Safe Fonts
There are only a few standard fonts for web.
When designing, I will need to specify a font family. This is so we have 'fallback' options and these are at maximum compatibility. If it fails it will trie the next one listed, rather than reverting back to default.
I will be able to make my own combinations as a 'font family' to have as the fallbacks - I will need to think about this when thinking about type for my website.
If it has two words you need to use brackets i.e. 'Book Antiqua' or otherwise it will not recognise the code.
If I only work with 'html' it will limit me, CSS has a lot more flexibility for design.
CSS Font Face - is much easier and much more options. Font Face which allows me to install a font to a website regardless of the computer. It is still accessible. However it may breach licences and copywriter laws. Font Squirrel is free and has a licence.
If I create my own typeface I can use font squirrel to install it.
Size and Dimensions
640 x 480 (Lowest Common Denominator)
800 x 600 (This is the more recognised LCD - these tend not be on the web)
1024 x 768 (Majority of people will use this level - one we will be using)
1920 x 1080
2880 x 1800 (200 ppi)
File Formats
Working with files for web have to be png, gif, pdf, jpeg.
The resolution should be 72 ppi however this is wrong and the majority of screens are able to produce 92 ppi - However the smaller the file the quicker the image will load. I will need to bare this in mind and make files as small as possible so it does not use users bandwidth.
Lossy - save file formats, it gets rid of information's, compresses it.
Need a scamp for next weeks session.
Maybe decisions on font, colour etc.
Look at design decisions before I build it.
Site map how the website functions.
Get scamps signed off to protect yourself. Consider what I am able to do.
Wire frame - width, height, measure each section.
When we started on dreamweaver I was slightly worried if I would be able to understand the techniques and processes. However our tutor made the workshop very easy to understand. We began by looking into how to set up a document in html and how to link and save folders with the website:
I now know I will need to create a main folder to contain all imagery and text in. This will keep everything together so all information is in one place and dreamweaver knows where to find all information - similar to InDesign.
We then began coding, which turned out to be simpler than I thought:
Index - Homepage
< > - Open and Close a Tag
</ - Closing a command.
<head> - Head of webpage, effect visibility.
<body> - All the design work.
The most important tags are: title, body, html, head.
* - Remember to save webpage.
I imputed text to begin the process of adding information to the webpage:
I previewed how the webpage would look:
We then began looking to how we use CSS in dreamweaver to create webpages:
As the tutor stated before, designing on CSS gave me much more options for designing on web. The difference between CSS and HTML tags are as follows:
{ - Open command
; - Pick option
} - Close command
We then was taught how to design all work on CSS as a 'stylesheet' and then link this with the saved HTML file. This then will save any changes made on the stylesheet and add them to the HTML:
We then learnt about changing and adding a 'font family' while also looking into size and dimensions:
For the dimensions we was shown how to create a background but working how to centralise this on the webpage. This was harder than I initially thought this would be but is going to be helpful to know for my further layouts and compositions:
No comments:
Post a Comment