Every once in a while, I have a stellar class of students who catch on to something quicker than any others before them. This year’s senior class (our students come in together and leave as a group due to our curriculum) have done that in web design. To better explain their advancement it might first help for me to explain how I teach web design.
I teach web design in an opposite order to how I was taught, and to how I know many have taught web in the past. My teacher, who was quite terrible, first taught us html tables…Using a series of youtube tutorials that I’ve made that correspond with in-class lectures I dive students headfirst not only into css/html coding but the use of mediaqueries and responsive web design. Project 1 in my Web Design I course is a fully responsive website. It is an extremely difficult introduction into web design and there is typically a substantial amount of complaining that comes along with it. A lot of this comes from the nature of coding such as the amount of trial and error and the level of perfectionism required in it.
By introducing this content first I’ve discovered that students better understand the limitations that accompany code. This allows for them to better take into account the shifting grid of columns and rows and how that relates to composition and graphic choices as well as type hierarchy, image resizing, and more. This however is the extent of coding that I teach. I teach web design, not development (this is topic for a different post).
In the industry today sites are often designed and then sent to a developer, or created using a CMS such as WordPress, which makes up over a third of the internet, or Squarespace (I also have a WordPress project in my web courses). Because of this I teach my students design through prototyping software such as Adobe XD or InVision. This allows for students to focus on the creation graphics, layout, overall user experience required in modern web design.
This project in my Web Design II course works a refresher for them coming back from having the summer off while also introducing principles of direction creating an experience that directs an audience towards a specific product or service. Below you’ll find several videos showing their desktop and mobile versions (note: tablet was required for the project but is not shown).
