This week we resumed our journey at codeacademy, starting the class with the catalogue HTML & CSS. The exercises in this catalogue weren’t so difficult because we have viewed the “Make a Website” exercises.
HTML & CSS
(Catalogue to be continued & finished at home)
After our coding practice, the lecture was resumed with an explanation on grid and why & how it is in drawing a flat plan & wireframing a website.
Not too long ago, people were still struggling in the transition of print design to web design – what is a “good” and consistent web design? One of the earliest “good” web design work was done by Massimo Vignelli on the National Park Website, in which he implements the “Unigrid” system. Unigrid acts as a solution to large scale designs & production of many different publications.
Every design solution begins by defining the problem and establishing constraints.
Crate & Barrel ‘s website is also an example of the early, standard webpage displays (Product Display – thumbnails of picture lined up in a few columns an row which is like a gallery of pictures, Inventory Display – similar to a picture gallery but with explanation & details of the product, Text Forms – standard text display with navigation bar on the left and ad column on the right).
The starting / mid-range of a screen size is 1024px (wide) x 768px (tall), but the canvas area of a standard browser (when opened) is 960px x 650px and people strive to create a landing page has all the contents fitted in that area. Too much scrolling is ideal for smartphone / tablet viewing, but on desktop it is more of a bother.
Constraints are the mother of design invention.
In grid, there are units – basic building blocks of a grid (all uniform) and columns – grouping of units that create the visual structure of the page (not necessarily uniform). Though the definition differs when working with grids in print-based media, the application is pretty much the same.
In general, we want to create units in the multiple of 3 and 4. 12 is ideal because it is a multiple of both 3 & 4. 12 units can be made into 3 columns, or 2 columns of 6 units each, or 4 columns with 3 units each, or 6 columns with 2 units each – all these can be mixed and matched while structuring a webpage.
Wireframing Kompas’ landing page with preset grid guides
Wireframing Times (wip)
(FINISHED) HTML&CSS: Social Media Page
(I keep changing the image until the very end :’D)
(Finished) HTML Basics III