To kick-start the term with, we were introduced to web authoring – what this course entails, and how to create a website starting from knowing the softwares to use, the design workflow and what skills will be needed.
But let’s not get there first.
There are several steps to web design workflow.
- Plan – in this step, designer meets the client(s), know what they want, discuss idea about the website. Time and budget will be calculated; unfortunately, because there are several different websites that help web authoring with pre-set templates, clients are getting more reluctant to allocate hefty budgets for designers. Designer will then plan hw the user will use and view the site – across what platform, gadgets? Basic structure & navigation will be thought of – the sitemap and siteflow, thinking about the user experience. Wireframing – creating rough sketches and refining them to thumbnail sketches of the website display on screen.
- Create – Visual mockups will be created after wireframing – note that visual mockups are flatplan of the website done digitally (using Psd/Ai), while wireframing is a handsketch of it. While creating visual mockups (flat design of the website – no navigation functions yet), we will be creating the design elements (which is referred to as “Assets” to the website too. After designer created the visual mockup, starting with a web prototype will be possible – transferring the assets to web designing applications and give them some basic navigation functions
- Assemble – Here comes the production work, where individual design elements that were created on Ai/Psd are exported and assembled in Muse/Dreamweaver. This is similar to when working with prints – assembling the design elements and layouting in InDesign. Difference is that we didn’t have to work with coding and all the new lingo.
- Proof – The moment of truth! Proofing would mean checking the function and compability; opening the website on browsers and testing it out. Does the website function correctly / as desired? Are there any bugs? Should there be faults, we will need to return to step 2 (Create).
- Publish – So you’re one lucky cookie! Publishing means copying all the files from computer to the web server and have the website published.
To train our coding skill, we are required to complete some of the catalog/lessons on Code Academy throughout the whole term.
Catalog: Make a Website
Exercise 1: A Lesson in HTML
Ollie Bike Sharing website
While it is great that we are now familiar to HTML (HyperText Markup Language, yes), that’s not all to it! We need to employ the use of CSS too (or rather, we are employed to use these functions). By using CSS we can style the appearance of our website.
Exercise 2: A Lesson in CSS
(Continued at home)
Make a Website- Styling with CSS