What do I need to teach middle schoolers about web design?

August 12, 2016 10:34 PM

I will be teaching a web design elective to 6-8th graders. The class will last one semester. What do they need to know?

I want them to take away something from the class. What are the main things they need to know about web design? Thank you!

posted by ichomp to Education (20 answers total)

Honestly, in this day of Wordpress and Drupal, I still end up using HTML. So include that for sure. Then Wordpress and Drupal. Then they can make $80/hour+.
posted by Toddles at 10:40 PM on August 12, 2016 [3 favorites]

Response by poster: Sorry, it is one trimester. So the very basics of web design but enough that they have some skill to take away.
posted by ichomp at 11:17 PM on August 12, 2016

Oh! I'm actually qualified to answer this! I teach middle school, and last year I taught a Digital Storytelling course that had a lot of graphic and web design. My partner teaches a class called Desktop Publishing, and I designed that course with him.

I think that web design is great, but probably not enough for a whole semester at the 6th-8th grade level. I would incorporate teaching them about good design in general, with lots of practice. The way I start this is to have students make something REALLY UGLY. So we have an "I knows me some ugly" challenge with building a Google Site. They make a really ugly powerpoint, a really ugly poster, a really ugly short video, etc. Basically, by asking students to compete to make the ugliest of something, they will figure out every single setting and option. Then we do a gallery walk and vote on the most ugly. Then we talk about the patterns and what they could do to go from worst to best. Then they duplicate the ugly site and fix it to make it beautiful.

I also teach them about Hot Dog Stand. In fact, one of my very few rules is "Don't Hot Dog Stand."

I also teach a fair amount of photo editing using both Google Draw and Pixlr (which also runs through Google Drive now!) so that they can make their own images to use in the sites/content they produce. I also teach them about Creative Commons, and how to find images they are allowed to use, as well as how to license their own work and cite the work of others.

My partner's class is essentially about building a portfolio of learning so that they leave with a website that has a bunch of original content. He has them explore some of the various free website builders (Weebly and Wix are the two students generally prefer) and follow a checklist of things to do with that site.

If you'd like our course outline, send me an email (same as my username at gmail) and I'll share it with you. The main goal we have is to get kids to really like design and to have something cool to showcase at the end of the course. Your colleagues will love you for teaching them to make projects that showcase good visual design.
posted by guster4lovers at 11:19 PM on August 12, 2016 [24 favorites]

Prosaic but I have faith it could be made fun or you could use it within a more interesting project:

-How to find out how someone else did something you think is neat (view source/inspect element)

-their best resources to find out how to do something

-Rules about image size/best practices about page load.

-don't start on the ground floor when you can start building on the fifth floor ie Wordpress exists; use it.
posted by A Terrible Llama at 3:25 AM on August 13, 2016

They make a really ugly powerpoint, a really ugly poster, a really ugly short video, etc.

I love this and while I can't speak to middle schoolers I can say I did something similar teaching college freshman writing and the directive to 'write the worst possible paragraph about X subject' and share them is generally greeted with a great deal of enthusiasm and good humor. 'Do something great' is intimidating but 'do something objectively awful' is liberating.
posted by A Terrible Llama at 3:28 AM on August 13, 2016 [7 favorites]

Please please talk about some core design principles, like "form follows function" and looking at the desires of the creator ("My logo looks so beautiful when it's big") vs. what is actually useful for the end user (Craigslist design) vs. different end users having different needs (maybe what teachers look for vs. what students look for on a school's home page, and how making it easier to use for one group necessarily makes it harder for the other group). The idea that design choices that please one group can bother other groups is really crucial.

These are hugely important concepts which can inform and enrich all aspects of their future lives, from understanding how to shop better to having empathy for future bosses who are designing policies to serve all different kinds of people.

Knowing how to code HTML or configure a Wordpress blog is not "web design"; design is all the decisions that happen when you're not coding.
posted by amtho at 3:43 AM on August 13, 2016 [3 favorites]

Also: finding things that are cool or neat and implementing them yourself is also not design. It's important -- it's skills development, and enlarging the domain of what's possible for your designs. But design is like gardening: it's about _choosing_ what to grow and weeding out everything else.
posted by amtho at 3:49 AM on August 13, 2016

Design is all the decisions that happen when you're not coding

LOVE Antho's comment.

The elements of good design are not subjective, whether it's a website, a house, a dress, etc. Every discipline has that foundation that underpins everything. The mechanics of how to carry out the design must come after the principles are understood and fully embraced. Yes there are lots of "you can design your own website" tools/services out there... but I would assume you want to deliver a lot more from this class than simply end user training on how to follow a website recipe.

Those fundamental principles are what you refer to when decision points come up. They are what guide you when requirements seem outrageous and you must transform "make it pretty" into something real.

Love the "make it ugly" challenge also! Much like obscenity, often we can't explain good design but we know it when we see it. Once you understand why one example is good and another one is bad, it's much easier to grasp.
posted by I_Love_Bananas at 4:13 AM on August 13, 2016

I am a software engineer who has been working with web and internet-related software for my entire career and my first thought upon reading this was "Oh God, why?" out of concern that anything technical they'd learn would be obsolete knowledge by the time they might get to use it.

When I was a middle schooler, if you tried to learn anything about computers a book or course would inevitably start off by trying to quickly explain all of electronics, which was virtually irrelevant but was extremely annoying because there was no way you'd actually learn anything useful about electronics itself when it's crammed into ten or fifteen pages and a week or two, and also wasn't really of practical use in working with even 1980s computers. (I'm not really sure when it even would have been, except maybe a course or books where you're actually going to build your own computer from scratch... I wonder if computer curricula was originally modeled off of early-20th-century ham radio courses or something like that.)

Anyways, so, I would say stay away from anything too technical lest you end up doing the equivalent of forcing them to learn how to use a slide rule or a Linotype machine. (Not necessarily uninteresting or totally uninformative, just potentially very tedious for the beginner.)

So I'd agree with amtho and guster4lovers about focusing more on concepts and maybe artistic-skills kinds of things. Difference between vector graphics and raster graphics?

Another distinction that seems important is between ugly in terms of "use all the fonts" or "use all the colors" and things that might seem simply ugly but are actually accessibility options, like the "High Contrast" UI themes that were alternatives to "Hot Dog Stand" but were intended for users with poor vision rather than to look cool.

If you have any partially-color-blind kids like myself one technical detail that might be worth it could be RGB/HSV/etc. color schemes and the basic trick of taking a screen shot and then using a raster graphics editor to determine the color code for something you're seeing so you can match it. (I have to stay away from any color-related editing of images because the result is inevitably "Did a clown do that person's makeup?" Discovering color calculators was a godsend.)
posted by XMLicious at 4:39 AM on August 13, 2016

I think it's important to do a bit of Javascript since that's such a significant part of the internet these days - you don't need to go very deep into it, and a lot of students at that age will be able to figure out what they need to know if you give them a jumping-off point for it.
posted by LSK at 5:19 AM on August 13, 2016

Everybody seems to be against teaching them to code, but I don't see why you shouldn't. HTML is a pretty stable language. If you learned to write HTML 20 years ago, you could still do it today; you'd just use fewer font tags and table-based layouts. It's probably even more stable now after HTML5. I don't see "potential obsolescence" as a reason not to teach them HTML. Plus you can learn it in like three days, leaving you plenty of time to teach other things. learn.shayhowe.com is the best resource I've know of.
posted by kevinbelt at 5:37 AM on August 13, 2016 [7 favorites]

There is design - and then there is UX. The concept of flow through a site, responsive (how do you hover on a phone) etc. might be quite compelling (and largely non-technical) to this age group.
posted by SNACKeR at 5:41 AM on August 13, 2016

Seconding some of the very basic technical design stuff like raster vs vector. Also the principles of responsive, mobile-first, and multi-device design considerations that come into play when deciding between webfonts or system fonts, etc.

Maybe an overview of the general trends as they change over time- this can tie back into mobile first concepts as you show how flat design served a functional purpose by minimizing complex paints like gradients and drop shadows for underpowered mobile devices. You can also demonstrate the changing trends pretty easily by taking any big site like CNET, Yahoo, and show them at various points in time with the Way Back machine.
posted by p3t3 at 5:43 AM on August 13, 2016

I taught this to low-skills community college kids last year and I focused on a few places

- HTML + CSS (basically getting up to the box model and the core idea that content and container are different - web people in 2016 may work on one or the other)
- principles of "good design" (looking at websites that suck, websites that are good, comparing and contrasting, writing for the web, a little about fonts and colors)
- accessibility and universal access principles (both legally and practically, colors, ALT tags, how to make good links)
- working within a CMS - maybe making a site with Weebly or something that requires working with an interface
- UX and responsive design and why it matters
- what the heck SEO is and basic ways of approaching it

This was a 14 week course and at the end of it students made their own small websites (some good, some not so good)but they really liked having a thing where they could say "I made this" This was the AskMe I asked beforehand.
posted by jessamyn at 6:43 AM on August 13, 2016 [8 favorites]

I don't see "potential obsolescence" as a reason not to teach them HTML.

Neither do I. My reason for emphasizing "design" is that nobody else is likely to do it, and it's so crucial and interwoven with life that understanding it can be life-changing.

People are teaching coding all over the place now, it seems. Maybe your students will encounter it later. If you can make them not intimidated, they're on their way.

Design, though, seems to be rarely taught, and it's an important part of both understanding how the world works and of not wasting the resources we have (a badly-designed thing gets thrown away quickly, and all the effort into creating it -- which informs the price you pay for it -- is often focused on selling it rather than making it actually useful).

And the difference between making something to _sell_ (to appeal to a particular audience for a very short time) and making something that _works_ is crucial. It informs voting, media choice, and maybe even educational institutions and techniques.

If you have a chance to teach young children design please run with it.



--

Teaching coding is actually pretty easy relative to teaching "design". Coding has its own challenges, to be sure, but just making people not be intimidated by it is more than half the battle. As a learner, it's easy to see when you get it right -- your program works or it doesn't. This immediate feedback can give coding almost an addictive aspect, so after an initial acquaintance people can almost teach themselves. There are online resources for this. People think it will get them a job, so courses are popping up everywhere. It's likely to be covered in the curriculum somewhere else.
posted by amtho at 6:44 AM on August 13, 2016

0. Here is the difference between markup and layout. HTML is for markup.

1. Here are Papyrus and Comic Sans. Don't ever use them (even in a context where they're arguably appropriate -- they are Ruined Forever). Avoid using a decorative typeface for running text.

2. Standards compliance and browser independence are key.

3. Here is contrast, and luminance, and how they are related, and how both interact with the color response of the human eye. If you do not understand these, you have no business picking the color of anything.

4. Fuck You, Pay Me.
posted by sourcequench at 7:04 AM on August 13, 2016 [2 favorites]

Maybe, if you do decide you want to teach them coding, a compromise might be SVG and CSS? HTML just seems like it might be a bit boring.

SVG will render in most browsers at this point, I believe, but might have more of the visual appeal and edging-on-artistic versatility that learning Turtle/LOGO had. The basic concepts are all applicable to learning HTML later on, you've got the concept of creating a bunch of shapes and then a style rule and styling all the shapes at once, positioning ties in with the Cartesian plane if they've been learning that in their math classes (more straightforwardly and intuitively than the box model would, I should think, but still applicable to HTML with absolute positioning on, with the box model as a superset of that), and the inspiration and basic approach of looking up more advanced properties like filters in online references to make what you're doing look cooler. Plus, for kids who have already learned HTML somewhere, SVG might be different enough to hold their attention more than would re-hashing what they already know.

And actually, is javascript in SVG implemented and working these days? If so you might be able to teach a few bits of scripting as well.
posted by XMLicious at 8:19 AM on August 13, 2016

Web Design, or Web Development?
posted by humboldt32 at 9:37 AM on August 13, 2016 [1 favorite]

As a web designer, I would absolutely teach them HTML. It's the basic foundation of the web, and you can't really be a good designer unless you know it--because you need to know how to fix it when it breaks. There certainly are plenty of programs that will code for you and make a fantastic-looking site in a matter of hours, but that won't matter when you can't figure out why your image isn't showing up or whatever.

HTML is easy, tweens won't have any problem with it, and if they want to learn more about design or development, then they'll have the basic understanding they need to progress on their own.
posted by Autumnheart at 12:09 PM on August 13, 2016 [2 favorites]

I love a lot of the comments here.

One thing about the coding debate. When my 6th graders came to me, 90% of them had done the basic tutorials on code.org and similar sites already. Half of them code for fun and know a lot more than me. Partially, this is because the elementary school teachers are giving students time to code, and partially, it's parents pushing their children to code.

So don't assume they haven't done the basic lessons on the most accessible learn-to-code websites.

But HTML is different. Students didn't know it, and it is definitely worth the time investment.

Teaching good design eliminated crowded slide decks as well as terrible fonts. That made the other teachers very, very happy.

And there's the classic I'm Comic Sans Asshole. Used it with high schoolers, though the language is too much for middle schoolers.

Also, I'm happy to share what I have with anyone who emails me...it's not perfect, but it's a starting point at least.
posted by guster4lovers at 3:26 PM on August 13, 2016 [1 favorite]