Signed in as
- Sign out
You're seeing this because you're a teacher 🤓
🎯 Your main goal for this lesson
It's easy to get design and development mixed up. This is especially true when students have no background knowledge or experience. It's not there fault, either! There's tons of overlapping terms and titles that make it hard to distinguish which is which. Compounding this confusion is that the lines between these two roles is narrowing. Help them to see there is an important role for both.
🧠Things to keep in mind when teaching
We're going to pull again on common classroom experiences: writing a paper. This is a metaphor we've used a lot in this course, but it helps to give them something concrete to equate this new process to.
🚀 Lesson Plan
Activity One: 20 minutes
Ask students to think of the last paper they wrote. Then, give them these questions:
- How long did you spend, from beginning to end, working on the paper?
- What was your process like? Did you start writing immediately or was there some work to do before?
- If you did do some work in advance of writing, what did it look like? What was its purpose?
- What percent of time that you worked on the paper were you actually writing?
The goal here is to really get them to see that there's a lot of work that goes into a finished product before it becomes the finished product. Help them see the importance of drafting and research (design) in advance of writing the actual paper (development).
Activity Two: 30 minutes
If you've got access to Netflix, there's a great series called Abstract: The Art of Design that's well worth checking out. The first season has an episode focused on Ian Spalter, a designer - and at the time of writing this - Head of Instagram, Japan - who focuses on digital products. If you have a lot of time in the lesson, watch this! Otherwise, this clip from a few years ago will suffice to help give students an idea of what design is and what role it plays in the grand scheme of things.
Encourage questions and link in ideas from the text.
Activity Three: 10 minutes
Take the formative assessment and work towards mastery.
Design or Development?
By the end of this lesson, you'll be able to...
- Identify responsibilities of designers.
- Identify responsibilities of developers.
- Identify types of developers.
- Explain the design-development cycle.
Broad Strokes (Get it?)
Primer
Following this lesson, the content in this module will be full of technical-heavy ideas. We'll be learning common design terms and practices used in taking an idea and creating a communicable, visual version of it. However, this first lesson simply helps us to understand what design and development are and how they differ from each other.
The information you read over for this lesson and the activities you do with your classmates are an attempt to prime you for a three-week 'sprint' wherein you'll design and develop several webpages and a web app. At the end of the module, you'll pitch your idea to 'investors' after receiving feedback from each other and working iteratively to improve your design.
Design is Not Development
If there's a takeaway from this lesson, it's that design and development are, inherently, not the same thing. Especially to people outside the industry, [web] design and [web] development sound like interchangeable terms. In reality, there may be some overlap in the tools and ideas that are used, but the purposes behind each of these phases in creating something are entirely unique.
What Design Is
Design is the process of producing a visual representation of an idea before it is built or made. The key word to take out of this definition is that, during the design portion, a designer is creating a representation of the real product. In essence, it's a non-functioning version of what will one day be developed by a developer.
Generally, designers fall under a broader category of graphic artists. This doesn't necessarily mean that designers are illiterate in terms of programming knowledge, simply that their primary responsibilities focus on the visual representation of a product or an idea.
What Development Is
Development is the process of creating a functional website based upon the representation created during the design phase. As above, the key word to take away from this is functional. Essentially, designers are providing a cohesive, aesthetically pleasing model to developers; this hand-off signifies a move from thinking about how something should look and function, to actually trying to make it functional.
Often, developers will be referred to under different broad terms such as 'coders', 'programmers', and 'engineers'. From these terms, there can even be divisions between front-end developers and back-end developers; those that work on the visual, or user interface (UI) and those that work on the server, database, and logic that enables the app to run. Typically, front-end developers will use HTML, CSS, and JavaScript to develop a functioning version of the designers' vision for the end-product. Back-end developers will use languages like JavaScript, Python, Ruby, or PHP to build the server and its logic.
The Process
Designers and developers work together in parallel. One group is not sitting around waiting for something to finally be handed off to them. As designers create a representation for the app, developers are giving feedback about the feasibility of certain designs. In turn, as developers work to build out certain portions of the app, designers will give them feedback on the appearance and function as its been translated from a model into a real-world application. This process is referred to as iterative because it's never really done; the cycle continues to feed itself as design-and-development teams iterate on their ideas to continually make them better.
Stereotypes and Widening Definitions
Increasingly, the line between design and development has become blurred. While it's important to have accountability and expertise built into this process's structure, there can definitely be overlap between the two. Based on the information above, it can be easy to assume stereotypes like, "Designers don't know how to code." Or, "If you don't have an eye for colors and type, you should just learn to code." Nothing could be further from the truth! Both of these sets of skills are acquired over time with lots of practice. You can develop an eye for design; you can learn to write wicked-fast reducers to consume an outside API.
Nowhere is this idea more clear than with the latest iteration in terminology for devs: the Full-stack engineer. Thanks to a continually shifting landscape, developers are more empowered than ever to write both front-end and back-end logic. This turns one person, or a team of people with this skill set, into a powerhouse of development ability. Couple this opportunity with a killer sense of design, and look out.