Introduction to Web Design:
Planning -
Separation of content and presentation
Content
-text
-images
-images
-video
Presentation
-font sizes
-types
-colours
-backgrounds
-animation
Through presentation you can make things easier to understand and read. The web is a non-linear medium. User can choose where they want to go and progress through the webpages - site map shows the structure of the website.
Information architecture - site map describes this. Communicate structure to where it is. Can you imagine what the information will be structured throughout our webpage.
Describe the structure through wireframes - sketching out what the pages are gong to look like, what is going to be on each page and how they relate to each-other. Grinding the webpage (use grids during this process) - thinking about size and hierarchy.
960 grid system (app for seeing grids) Need the browser to be smaller than most sizes of webpages (to avoid horizontal scroll) 960 pixels. 12 grid is good as it aligns by many multiples.
Building a website -
Building a website you make .html, .css, .js files.
We are focusing on HTML (text, images, videos, audio, input formats) and CSS (colours, typefaces, sizing, positioning, backgrounds). Javascript is another which has custom interaction, dynamic interaction, parallax scrolling, hamburger menus, Facebook, twitter etc API’s).
You can turn off Javascript and see what happens in your browser.
HTML and CSS templates - online (can use the templates, can start from scratch, either option is ok, Have a look at the templates and see how it goes.
Looking at mood-boards, developing ideas as a team -
Initial ideas from us both -
Cohesively bringing our ideas together - new mood-board idea -
Discussed and refined ideas to develop for next class -
To Do:
- Start mini illustrations in this style
- Make some website wireframes
- Start to make some headings/content/text we like
No comments:
Post a Comment