For our first session, we are looking at 4 areas of Web Design in order to inform our design decisions:
- Web Standards and Limitations
- Layout
- Set Up
- Basic Coding
Web Standards:
Acronyms, Abbreviations, etc- Languages that are formatted to make a website work:
- HTML (Hyper Text Mark Up Language)
- WYSIWYG (What You See Is What You Get)- on- screen
- SEO (Search Engine Optimisation)- Getting your website to the top of a search engine
- FTP- Making a Website go Live
- URL (Uniform Resource Locator)
- UI (User Interface), UX (User Experience) and WWW (World Wide Web)
However, this can stop working if the coding is not all correct through the use of accidental Capital Letters, Spaces or Punctuation
Limitations:
Designing for the Lowest Common Denominator
Web Safe Colour
- Only has 216 colours available to use on the web to make it consistent over every computer
- Web Safe Colours are interpreted using HTML, specifically a six or three digit hexadecimal code.
Only 216 colours are available on HEX Colour Mode e.g., Red #FF0000 #FF0, White #FFFFFF
#FFF, Black #000000 #000
- There are 256 tones of Red, 256 Tones of Blue and 256 tones of Green which, when these are times
together, shows that 16,777,216 colour variations are available on RGB Colour Mode as they are
made of light.
- The wide range of colours can be reproduced using CSS over HTML. e.g., Red is rgb (255, 0, 0) yet
these are not consistent throughout. If you want opacity and gradients, you will have to use this mode.
Web Safe Fonts
- For Consistency, a standard font must be used. This gives you the choice of around 30 Fonts. It is
illegal to use other fonts on a website. Setting up some 'Font Families' allows for the option of having
some fall-back fonts to ensure maximum capability between browsers, systems and computers.
- Fonts with 2 words and a space in their name need speech marks around them, otherwise the system
will think they are separate, singular font names. If it is a one-worded font name, just leave it without
anything around it; e.g. Serif font, I want to use "Palatino Linotype". If not available, use "Book
Antiqua" or if not, just any Serif font
- To break the rules of Web Safe Fonts, install a font to the website itself yet this does break copyright
law. Using CSS compatible @FontFace allows to install a font to the web site- Font needs to have a
Web Font Kit for it to be used online- try Font Squirrel website.
Size:
- Dimension and Pixel Resolution (Actual Screen Size Measured inn Width and Height)
law. Using CSS compatible @FontFace allows to install a font to the web site- Font needs to have a
Web Font Kit for it to be used online- try Font Squirrel website.
Size:
- Dimension and Pixel Resolution (Actual Screen Size Measured inn Width and Height)
- 640 x 480
- 800 x 600
- 1024 x 768
- 1920 x 1080
- 2580 x 1800 (200 dpi)
- Upscaling will cause pixelation whereas Downscaling will cause small image sizes
- Could make responsive websites which reformat but there is no definitive answer
File Formats:
- Lossy/ Compressed file formats to make sure that images and websites load up quickly, such as PNG,
GIF, JOEG and PDF to be as small as possible but still look good
- Lots of Pc's and Computers use 96dpi but designers still use 72dpi which can make them look wrong
sized
Set Up and Basic Coding:
 |
| Create New HTML Document |
In order to set up a new document, you select one of the options from the middle column which creates a new document based on the form of coding you want to use. During these inductions, we will only use HTML, CSS and Javascript. Here I created a New HTML Document.
 |
| Code, Split and Design Views |
There are 3 different screens in which you can view the design. Code and Split screens focus on the code whereas Design screen allows us to see the visual of the actual web page so we get to see what will be visible on the internet. Here the design is a blank page but even then a lot of code goes into making a blank web page.
 |
| Break Down Understanding of Coding |
From this, we were given the absolute basics in regards to understanding code terms and functions/ commands:
- Line 1- Declaring the Web Document Type
- <html> - Open HTML Tag. From here, we are using and working this language
- / -Forward slash means stop instruction e.g.., </html> means stopping HTML Code from here. You need to have an open tag and a close tag to make an instruction work.
- <head> - Open Head Tag. Not visible on the website but just increases the functionality of the website itself
- meta - Meta Tag for Search Engine Optimisation. Words that people can search that will make the website come up.
- <title> - Title Tag for Search Engine Optimisation. Not shown on the website but shown in the browser window. You can put a logo (favicon) and website title.
- <body> - want to show it on the website physically, it goes in-between open and close body tag.
 |
| Root Folder |
 |
| Sub Folder for Images |
For Dreamweaver to work, all files need to be stored all in one place or it won't work as it becomes a broken link. This is because when accessing the website, the user is accessing the folder from a server somewhere in the world. This new folder is called the Route Folder which has to be renamed in all lowercase letters with no spacing between words. Within this folder, there is a sub-folder called Images where any media files for the website are kept altogether as servers tend to look for this file when going into a Route Folder.
 |
| Applying Root Folder to New Document |
You need to sync together the web page and the Route Folder so that all the content is automatically saved and put into that folder. Select Site then New Site which brings up a window to name the website and apply the Root Folder that you wish to apply. If done correctly, this will come up in the bottom corners showing files and within your files, the image folder.
 |
| Saving Website |
In order to save the web page, you got to File, Save As or alternatively you could just use the shortcut cmd + S. When you are saving the Homepage of the website, you never call your homepage 'Home Page' and instead, you call it 'index'. This is because it is universally agreed upon that all first pages of websites are called 'index'.
 |
| Previewing Website in Safari |
So that you can see how the website is progressing as well as view all changes to make sure the website works, you can preview your website on the internet. By selecting the world icon, it gives you the opportunity to view the website on any web browser you have. You can add web browsers to the list under 'Edit- Web Browser- Applications'- and select the browser you wish to add. By previewing the website, you get to see how it comes across on the internet.
 |
| Changing Name of Website |
To change the name of the website in the browsers, just add the text name you want in between the <title> and </title> tags.
 |
| Adding Contents to the Website |
To add content to the website, create a new row of text in between the <body> and </body> so that it comes up within the main content of the site.
Study Task:
For the next session, to have something to work from, we needed to produce 3 stamps of our potential Homepage design so that we can try to produce our own.
Study Task:
For the next session, to have something to work from, we needed to produce 3 stamps of our potential Homepage design so that we can try to produce our own.
 |
| 3 Stamps on A2 Design Sheet |
I want my Homepage to be quite simple in presentation as I want it to be quite a visual site with easy navigation to encourage younger people. The second stamp goes better with the actual concept and design idea of my website, however, I have the other 2 stamps as more common website proposals so I would be able to see if my original approach is going to be possible.
No comments:
Post a Comment