DFTW: 2021 is almost over!
What's going to happen in... THE FUTURE
Doesn’t 2022 sound really futuristic?
In the year 2022…
Aren’t we supposed to have laser eye things by now? We certainly do spend a great deal of time assimilating everything we can. (Star Trek joke)
OK: We’re going to talk about:
how awesome the students are doing
A new second alternate version of the course
The next session starts February. Apply now!
Let’s talk about the present for a minute first: The September session of DFTW is going strong!
Has it been almost three months already?
We’ve covered a lot! Too much to chronicle here, but luckily - the students are documenting their journies.
We can’t link to everything - but here are a few things we pulled out of the thousands of slack conversations and the many student blogs.
Shayne’s thoughts from about 1 month in.
I still don’t know what it is I’ve fully gotten myself into with web development, but one thing that’s been made clear in my time as a student in Perpetual Education is that whatever web design is, it’s at the very least... maybe even at a fundamental level?… an extremely collaborative space.
And check out this great pixel art he’s been working on too!
Budi’s update from about 2 months in.
This is organic learning at its finest and it carries so much potency to equip you with the skills needed to achieve success in the web development world. It’s not just the HOW of doing things but also the WHY.
The more I kept talking to my classmates it all just started to make sense to me how everything we have learned was going to come together. It just clicked.
Here are some thoughts/work from Tara.
I don’t particularly consider myself to be a “creative” person...
For being “not creative” - Tara is certainly making a LOT of fun stuff! Her very first graphics were awesome! You can check out her side of the story.
While I don’t want graphic design to be my main focus, I have really enjoyed learning about it! I love understanding it and know that it will truly be an asset when the time comes for the big job search!
We couldn’t help but pull a few quotes…
I’m so happy that I chose Perpetual Education/Design for the Web, as I tend to do better in an environment that allows freedom to create on our own rather than copying line for line. I get to make mistakes and learn from them. That’s how I truly learn. It’s the mistakes that are made that create the best learning opportunities.
Check out her version of the Responsive Layout Challenge. (So, responsive!)
Jose came into the group late and had to hurry and catch up! He’s been keeping a weekly blog about the whole experience on Substack and CodeNewbie.
So far:
Perpetual Education is a true “zero to hero” program. Before you even start coding you do a bunch of self-examination. Through doing this you find out a lot about yourself, how you interact with things, how you see things and how your memory works. There were definitely moments where I was like “why are we doing this?” but then you see how this is all relative to programming.
He also seems to already be a Photoshop EXPERT!
Hahahaha
You can follow everyone from the September group on their substack journeys! Maybe it’ll even inspire them to write more often! Andrew, Budi, Jose, Josh, Saul, Shayne, Tara, Wytonya, and hey - while we’re at it: a Huge thanks to Brian from alpha-two for all his help and encouragement. He seems to have this crazy idea - that you can learn even more by helping other people learn! (It’s true)
UPDATE:
We didn’t send out this letter on time! So, 2 weeks passed - and tons more awesome work got made!
How do you teach “Design” AND “Coding?”
For whatever reason, most people have assigned the word “Design” to the visual aspect of things. Sure, the chair you are sitting in was designed to look a certain way… but more importantly - it was also designed not to break into pieces when you sit on it.
“Design” - is all of the thinking. It’s the Goals, the research, the humanity, empathy, iteration, planning, and that involves execution too. Sometimes you have to design tools or games or constraints to design within.
With industrial design, there would be a complex and iterative design process that would lead to a final set of manufacturing instructions. If you take the chair example, they would figure out how they wanted it built - and begin discussions with the manufacturers. From there, the builders would likely need to design a workflow and probably a set of custom tools to build it too. Then they would build 1000 chairs. That is mass production.
With The Web, You aren’t building 1000 websites. You’re building 1 website for 1000+ people to visit. In theory - every single person on the planet could all be using your website/application - at the same time. This is more like mass consumption. And it’s not a physical good. It can be tweaked and improved while it’s being used. That is unique. We take it for granted. “Websites.. right?” The web is made up of words and pictures and choices and user actions. It’s a communication platform. It’s not a physical goods manufacturing system. So - we shouldn’t be teaching it that way. And here at PE: we do not teach it that way.
A week of “Graphic Design” and a week of PHP. How do those fit together?
The past two weeks could be seen as a “visual design week” and a “coding week” - but they aren’t. They are connected. We’ll try and explain it quickly!
Day 1: City postcard
Students are given a city / and tasked with creating a postcard. Keep in mind that each day’s lesson involves reading/watching the lesson and is all expected to happen in a few hours. So, are we teaching graphic design? Or: how to work under pressure - and how to create constraints to aid you in a goal-driven process?
Here are 2 examples of 40 minutes of research - and 40 minutes of getting those ideas in place:
The postcard doesn’t matter as much as the ability to understand a visual language and extend from it. It’s an exercise. You could pick any city and practice this idea / at any time in your life. How can you evoke a complex feeling with some totally flat digital asset? This is much more difficult than most JavaScript. And this was just an icebreaker. Most students are surprised how much they end up enjoying the graphics program.
The other thing that is really hard: it to get comfortable in the process. You could say that these aren’t done - or you could say that Saul has found a really fun visual style to play with. We love how these turned out.
Day 2: Secret word
Students are each given a secret word. Again, this all happens in a few hours…
We love this display of process. You’ll often need to communicate something complex with very little information. It might be a logo or a symbol or a tiny icon. There are interfaces that feel intuitive and others that are just incomprehensible. It’s not magic. It is design. Can you guess Budi’s word?
Day 3: Audiophile store style tiles
If day 1 is about extracting meaning through visual choices, and day to is about cramming a lot of meaning into a simplified graphic - then style-tiles are about combining those ideas into an interface that is both connected to a feeling and also conveys information clearly. But that is a lot more than a “look.” You have to research and identify all of the necessary data points and states. What is an “audiophile?” What matters to them? What are these products? Do they have names? Unit numbers? Number of vacuum tubes? Prices? What is the information we need to convey? If you were a visitor, what would you need to know to make a choice? If you were the administrator adding the products, what would you need to input?
This is often the most important part of the design process. And - as you’ll see / it’s really “the code.” Without a firm understanding of the goals and the humans - then it’s really just decoration.
Space, color, image treatment, type hierarchy / all need to come together to organize the information for the user. And that will end up defining what happens in the code. This are all the early stages of building out visual design systems. But there’s more to it than that. Web crawlers aren’t going to “see” this visual treatment. And there are assistive technologies like screen readers / and ways to search the internet by voice too. So, this is just one way to interact with the underlying information.
With these style tiles, we can talk to people and get feedback. You can figure out if this is the right direction before going any further. This is agile design/development.
Day 4, 5, 6: symbols and personal business-card site exploration
We don’t have time to go into the personal websites now - but here’s a nice example of a game Tara made up for herself. She started out with 2 colors for each and worked from there. See! The constraints and little games are catching on.
…
also at this time…. the alphabet got hacked by evil trolls. Which is always fun.
PHP / programmatically building HTML on the server
This is a fast-paced week. We basically teach “programming” - in a week. It’s not everything in the world / but it IS the practical end of things. We’re only able to do that so fast, because of how we’ve layered up with HTML and CSS.
We’ll spare you most of the code… but - here’s how it connects to the week before.
It’s all key:value pairs under the hood. It looks something like this. These are those scary “data structures” that you hear about. (they aren’t that scary) (maybe a little ugly)
This product data is what you use to generate the HTML to show the products on the real website.
It’s the discovery process that allows you to gather the right data and the right templates to write the actual code.
This is how we incorporate data structures and project planning. From there, all of the main programming concepts are there. Objects and Arrays for organizing data. Concatenation and interpolation for templating, control flow for checking things like "if onSale… do this…”, foreach loops to iterate over the arrays/many products and display them, conditional content and CSS classes to style different product states, functions to organize the code / and whatever else we can think of.
Everything we do - ends up as part of the user experience. And you aren’t just designing graphics. You’re designing the data and the functions. You’re designing an entire system. You’re designing code that other developers will also be using.
OK! That’s enough of that for now.
Thanks to our students for being so awesome.
2022: A second format of the course is in the works
The mission of Perpetual Education has always been to empower people. In the case of DFTW, that means specifically to train confident developers/designers and get them out in the real world–ASAP–to start designing things.
Whether it’s designing a successful user-flow for a public service, clarifying a message for a small business, ensuring that a website is fast and accessible, just making something look really cool and fun to use, testing things with humans who will be using them, managing a team, or heck - even running for political office and designing better systems of governance: We think you can do it. And, we believe our system can make it fun and create a deeper connection with what it means to be a designer.
If you want to know how the course works, well - it’s all on our website. But here’s an example of the weekly timeline. Let’s say there are six concepts a week. Combine that with additional exercises, study hall, and meetings with other students, and Derek - and you get the program.
The above pace is only made possible by a combination of the constraint of only one lesson a day (forcing focus), seeing the challenges through the eyes of many students and sharing in their process, direct contact with other students, and direct contact with the instructor. By understanding your learning style and your experience at every given point, we can quickly cut to the conceptual mismatch and reword it or create additional exercises or scenarios to ensure it clicks in a way that is personal to you.
Even though we consider DFTW a part-time course we get a lot of requests for a longer format program. Everyone learns in different ways and not everyone’s schedule will work with our mentorship program.
So, here’s how that same week (each color a concept) would look in this new alternative format.
Without the force multiplier of our personalized system - we have to substitute with something else. These gray boxes are additional exercises and lessons that used spaced repetition in lieu of personal mentorship. Students will still follow the pace of one lesson a day and enjoy all the same materials as the mentorship students but will have it be roughly twice as long. This program will be on a monthly payment system. We’ll explain more of the details in early 2022, but we wanted to tell you about it first.
What do you think?
We’re thinking about calling the new format “Design for The Web” - and then adjusting the title for the mentorship version.
Over the next month, Derek will be uploading a new video series that will talk all about it - and walk through the design process as we build a new landing page for this new version of the course.
Next session is slated for February 2022
If you’re ready to get down to business - apply today! And if you’ve already applied - then just email us and let us know you’re interested in February. : )
Anything else?
Oh! Derek and Ivy had a chat on Racket. Check it out.
Until next time!
Ivy & Derek c/o PE
This is a wonderful article! Lots of appreciation toward student efforts! Here’s to the a-threem!
Im so grateful to be here... and not still stuck doing tutorials!