Design Thinking guest lecture

Design Thinking

Today we'll have a guest lecture on Design Thinking by Maureen Linke, Graphics Editor at the Wall Street Journal.

Class Exercise

Round 1

Pair up with one person (someone who wasn't in your website design feedback group, if possible) and review each other's site designs or implementations. Review each other's work with a critical eye toward the four main elements covered in the guest lecture:

• Proximity
• Alignment
• Repetition
• Contrast

What aspects of your design hew to these principles? What changes could be made to more closely reflect these principles? Please take notes on your discussions so you can present these thoughts next week, when we'll present our completed portfolio sites.

Round 2

As a group, let's repeat the Round 1 exercise for this course's site design -- or lack thereof -- with the four elements of design in mind. Some questions to consider:

• What improvements could be made so the site better aligns with the 4 principles?
• What interactive features or new pages should be added to make the site more useful?

As the target audience for the site, this is your chance to help craft something more useful and usable for yourselves, so don't be bashful!

Assignments

Prepare to demo your website

The in-class presentation of your website will be factored into the overall grade for Project 1.

Complete the implementation of your website and be prepared to present your site on Tuesday, April 30th. The presentation should include:

• A demo of the key features
• A discussion of what went well and what proved difficult
• Mention of features or design elements that were left on the cutting room floor (and why)
• Thoughts on how well the design hews to the 4 principles of Design Thinking and areas for future improvement

Javascript crash course

This is not a graded assignment, but if you're rusty or new to Javascript, you should work through these fundamentals. Upcoming class exercises and assignments will take this knowledge for granted.

Javascript is a critical skill for building news applications, as it's the base language for adding interactivity to web pages and building dynamic, data-driven visualizations. You don't need to master JS to begin using the language. But it's a good idea to gain some ambient awareness of core JS language features so you have a sense of what's possible and where to refresh on syntax as you begin coding real-world projects. The goal is to begin laying a foundation of Javascript knowledge that you can incrementally refine and expand, rather than copy/pasting code dug up from the Internet.

A good place to begin learning (or brushing up on) Javascript is the W3C Javascript tutorial. To gain the best overall sense of Javascript's features, I'd encourage you to read and work through the code examples in the introductory section (JS Home through JS Mistakes). Warning: this is a LOT of work.

For those crunched on time, at least skim through the below sections. We'll spend time reinforcing these fundamentals through class exercises and homework assignments.

• JS HOME through JS Objects
• JS Strings and JS String methods
• JS Arrays, array methods, array iteration
• for loops
• Comparisons
• Conditional statements

Some key skills you'll be expected to be familiar with:

• Embedding JS code in an HTML page and using an external JS file
• How to output variables in the console of the browser developer toolbar
• Working with strings, numbers, objects and arrays
• Creating and using functions
• Looping and conditional statements

The above represents a solid subset of language features and skills that should help you begin reading and writing Javascript.

Other resources

If you prefer a more human-friendly (though verbose) introduction, you might also want to check out Learn Enough Javascript to Be Dangerous. To get started, just work through Section 5.4 - Iteration for each, focusing exclusively on the use of JS examples in a browser.

Lastly, this JS cheatsheet is also quite handy.