Web Design Studio

A Short Three Week Intro to Web Design

This is the home page for a beginner-level course designed for upper school students at `Iolani School interested in learning the basics of web design and development in a studio-based learning environment. Through a combination of lessons and hands-on activities, students will learn about underlying core web technologies and best practices for web design and development. Students will go through the creative design process of drafting, designing, and developing websites from scratch.

The Theme for 2021: E-Commerce Websites

Depending upon the current course and year, the primary theme for the main projects may change. For example, in 2019 the theme was “Summer Favorites” and students created websites documenting their summer favorites (e.g. music, movies, books, etc). This year’s theme is eCommerce. Think online stores and shopping websites. Think custom merch! Get ready to create your own custom-designed fictional products and merchandise to sell on your very own custom-designed fictional online store websites. NOTE: student websites will not be functioning eCommerce websites (there will be no functionality to accept credit card payments). Instead, students will dive into the world of user experience design and user interface design for online stores by designing custom interactive eCommerce website prototypes.

Two Main Projects:

1. A Personal Store Website
   • with fictional custom-designed personal products/merch
2. `Iolani Collaborative Team Store Website 
   • with a collection of team-produced fictional custom-designed `Iolani products/merch

Links to Projects:

• Instructor-provided Google Site examples:
  • Generic Iolani Website Demo
  • Darth Raiders Google Site

Student Sites

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

Pre-approved Websites

During breaks and downtime, the following websites are pre-approved for students to visit:

• Fun Web-based Design Games
  • Design/Typography-related:
    • Kern Type (a typography kerning game)
    • Shape Type (a typography letter shaping game)
    • The Beziér Game (a pen tool game)
    • Pixact.ly (a pixel size guessing game)
    • RGB Challenge (a color guessing game)
    • I Shot the Serif (a typography game)
    • Rag Time
    • Type War
    • iFont Game
    • Font Game
  • Web Design/Development-related:
    • CSS Diner (a CSS learning game)
    • Flexbox Froggy (a flexbox learning game)
    • Flexbox Defense (a flexbox learning game)
    • Code Combat
    • Hex Invaders
    • Screeps
    • Elevator Saga
    • Dungeon & Developers

• CreativeMedia.space (CMS) Resources
  • Specific CMS lessons to check out:
    • The Web Design and Development Process
    • Web Design Terminology: A Primer
    • HTML Basics: Elements & Syntax
    • CSS Basics: Selectors and Syntax
    • Intro to Front-end Web Development
    • The Box Model
    • Intro to Git using Github
  • Specific CMS exercises to check out:
    • Code a Simple HTML Web Page
    • Code a Simple Web Page with CSS

• W3schools.com
  • W3Schools HTML Tutorial
  • HTML Tag List
  • CSS Tutorial
  • CSS Selectors
  • JS Tutorial

• Code.org
  • CSD Unit 2 – Web Development
  • CSD Unit 3 – Interactive Animations and Games
  • CSD Unit 4 – The Design Process

• Codepen.io
  • Instructor’s pens (kccnma)
  • Specific pens to check out:
    • Intro to HTML Exercise – Test without Markup
    • Normal Flow: Block and Inline level elements
    • Exercise: Simple Horizontal Centering
    • Exercise: Simple Horizontal and Vertical Centering with Flexbox
    • Box Model and Box Sizing
    • Base Typography with a Traditional Typographic Scale
    • Intro to Divs (Div Test) Exercise
    • CSS Positioning Test: Inline-Blocks
    • Simple HTML web page with base CSS
    • Simple Header
    • Custom Numbered List: Circled Numbers
    • Custom Numbered List: Stacked Oversized Numbers
    • Layout Example: Media/Post Objects List – CSS Grid w/ Flexbox Fallback

• Sololearn (website & mobile app)
  • Specific courses to check out:
    • HTML fundamentals
    • CSS fundamentals
    • JS Tutorial

• Web Standards (Wikipedia definition)
• W3C (World Wide Web Consortium).
• HTML.com
• Digital.com’s HTML Cheat Sheet
• Adam Marsden’s CSS Cheat Sheet

• For Web Design Visual Inspiration:
  • Awwwards.com
  • One Page Love
  • Art of the Menu

• Instructor’s teaching web site
  • Specific NMA courses to check out:
    • ART 128 Interface Programming 1
    • ART 229 Interface Design 1

• Books to check out:
  • Steve Krug’s Don’t Make Me Think
  • John Duckett’s HTML & CSS

• Shared Photos (photos shot with the Canon 5D and GoPro)
  • Our Shared Google Photos Album

Course Rules & Project-related Principles & Policies

To protect student identities, students are not permitted to use their real names on their websites. Students can not include photos of themselves nor their friends. All content must adhere to the standards of digital citizenship expected of all `Iolani students and in accordance with the student conduct code. All email accounts, usernames, and passwords provided by the instructor will be deleted or changed after the course is complete.

• For all team projects:
  • All styling should be consistent and representative of the `Iolani brand, e.g. `Iolani Colors only (e.g. Black and Red)
• For all individual Google Sites & custom personal products
  • The styling is up to you, so have fun!
• For all websites and products
  • Try to create 100% custom designs and/or use copyright/royalty-free imagery (e.g. stock photography & found illustrations)
    • Exception: modified mockups are OK
  • Adhere to the privacy policy
    • No Names of People (e.g. your friends, students)
    • No Photos of People (e.g. your friends, students)