Perpetual Education: Week 6
Tags: webdev, beginners, codenewbie, devjournal
Published: 2021-12-10 13:06:57

Oh hi,

Another blog. Another ambient album. Another week at PE.

I’m not linking the album this time because it’s too embarrassing.

What else? …I watched Terminator 1 & 2 back-to-back recently. They hold up.

Sorry. On with the blog! Here’s the gist…

---

**Idea Boards**

What is an idea board? What is a mood board? What’s the difference? I dunno. They’re both pretty interchangeable. The general goal is to express an idea or search for one by using found images, illustrations, designs, etc.

Think of _Beetlejuice_. Imagine your Tim Burton and you’re trying to describe this character without using images. It would be super weird. The actors auditioning for the part would probably think it was a prank. I’m sure something as simple as an idea board/mood board would be way more effective at getting his vision across.

For this lesson I created a few boards. At first I didn’t really have a direction. I just looked at everything I collected in my inspiration folder and started throwing stuff together. Eventually some ideas started flowing and I could organize them into themes and colors.

For this one I started with the color purple and then it morphed into a mood board that could maybe work if the client is a Psychic and/or sells pseudoscience products.

![Mood board madness](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F7aba7387-677f-4f47-b336-9a2d32286ae1_1200x856.jpeg)

**Gray Scale**

Creating with black and white. Creating with various shades of grey. I like these limitations. Whenever colors are involved I’m constantly second guessing my choices.

For this first design I created 2 separate layers of vertical lines and place a layer of text inside on them. With every little alteration you get some really cool results — to the point where I can’t really decide which one is my favorite. Would be fun to incorporate this into a site where the line-spacing changed on scroll or with the viewport width.

![Zima 1](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fa361ca1d-ebb2-4234-9d3d-b50d915c9f72_3300x2550.jpeg)

![Zima 2](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fd9119011-a99b-488d-9dbc-ae604e2917a5_3300x2550.jpeg)

For the 2nd design I started with one square in the direct center and kept adding squares of divisible size in a symmetrical way. Got some happy mistakes using the negative blend mode too.

![Black and white boxes](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F31371ee8-c5a4-4dbc-a33c-e86129780cc8_3001x3000.jpeg)

Simple method to get the juices flowing:

If I don’t know what to do, if I have an empty canvas — I should just pick a shape, make it black and white, place it in the center, and start building symmetrically. The design sort of presents itself and I’m ultimately happy with the results.

For the 3rd design I did something similar.

Would be cool to animate this. Maybe have each circle come in from a different angle to form the cross?

![Symmetrical circles](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fe82e3df3-a3d0-443e-b94c-0af7f5567ad0_3000x3000.jpeg)

Variation on that design using an engraved brush style.

![Plus sign with engraved effect](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F13722d86-3a84-43ef-8fdc-9144989d9fe8_3000x3000.jpeg)

For the last exercise I had to create a design only using different shades of grey. Also added some 3D and shading.

![Grey spikes](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fc0394fc6-44e8-40e7-a480-5162a0edabef_3000x3000.jpeg)

As a bonus Derek asked us to create a green version with the same limitations. This is what I got.

![Green straws](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fd6b8d3f8-95ee-4e60-b4e8-0bfc1d9dd0c8_3000x3000.jpeg)

**S P A C E**

I have a problem with jumbling everything together in my designs. I need to let them breathe. I need to consider where the user’s eyes are traveling when they look at my designs. I need to think of more interesting ways to make my document flow. I haven’t really ventured out of the standard format.

For this one we revisited our mood boards (I like saying that better than _idea boards_) and rearranged them using the power of S P A C E.

I didn’t really know what I was doing so I just rearranged mine and added some images to tell a loose story. I think it’s one of those things where I could make better design choices if there was some copy, some idea and/or goal to dictate the use of space. Y’know, higher stakes. Just using random images and spacing them out didn’t really get the juices flowing for me.

Derek marked mine up which revealed 3 crosses. Didn’t even mean to do that… so in a way I guess I was successful at telling the loose story.

![Green straws](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F50c86291-c1f5-4b4f-8580-6e921baeef06_996x756.png)

Derek’s feedback on this is where the purpose of the lesson started making more sense to me. Another Whoops.

![Green straws](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F293afbf2-e9c5-483a-9a4c-c8c9a3e74f68_604x460.png)

Sort of fumbled this lesson but hey, that’s a part of learning. You gotta eat sh*t every once in awhile in order to get better.

**Contrast**

This lesson helped me gain a better understanding of how to use weight, how to use spacing, and how to create hierarchy in interesting ways.

We watched a video where these design teachers analyze students work and it was really eye-opening. Some of the work was super ambitious. Sometimes they were practically unreadable but still looked cool. I guess it depends on how crucial the information is? They would also alter the documents and rearrange them in a more refined way. Now everything I look at, I analyze it in the same way. I just want to get my hands on some interesting content so that I can design some unique layouts.

Also read the typography rulebook. I broke several of them. Another whoops .

**Research and Employ**

Now we have to choose a design, mark it up, and analyze it. I wanted to pick an interesting/abstract design so I went to [Site Inspire](https://www.siteinspire.com/) and started searching til something caught my eye. Landed on this [awesome design](http://zefs.website/), took a screenshot and threw it in Affinity.

I changed the image to black and white so I can get a better sense of the weight and dimensional aspects. For this design it’s pretty obvious but still good practice.

Next I set the horizontal and vertical guides (_those thin blue lines_) to see how the different elements line up with each other. I remember at first glance thinking the designer just positioned the elements at random but now I can clearly see the relationship between the elements (_those thick blue lines_).

Instead of using a ruler to measure the spacing I used block nodes (_those pink boxes_). The first block I made was for the margin in the upper left corner. After that I copied it and started searching for other spots where block or multiplied versions of that box would fit.

The numbers with the arrows on the side indicate hierarchy. What do your eyes see first when you look at this? Where do your eyes go next? Interesting how this person does it. Take note of the list styling. Those headers, the numbers, the superscript — pretty unique but it works. Usually people make headers bigger than everything else but I think the goal of the designer was to have the emphasis be on their actual work.

![Markup of Zef's website](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fd93f802d-ae20-4a8f-b0cd-e7558fd13ead_943x591.png)

Thought I was finished with this lesson til…

![Markup of Zef's website](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F26919f61-fbfc-47f6-9fcc-42ef67d102ce_512x315.png)

Alright, probably would’ve picked a less crazy site but here it goes… check out my [extremely sad chaotic version](https://codepen.io/j-negrete/pen/WNZQLLV).

Even though I failed miserably I learned a ton of stuff. Specifically how to make units of measure more dynamic and how to wield the power of the transform property. I'm sure if I presented this as something to collaborate on every developer would be like _“wtf is this?”_ This is just one of many _wtf_ moments. I look forward to having more. I eventually reached a point where I lost control of the design and started haphazardly positioning the elements but hey, it’s working and I learned a lot.

**How to Kill a City**

For this weeks ~~boilerplate~~ template I took an [awesome layout](https://dribbble.com/shots/14979205-Presentation-Layouts) I found on Dribbble by [Marko Cvijetic](https://markocvijetic.com/) and turned it into a [responsive webpage](https://peprojects.dev/alpha-3/jose/marko-cvijetic-template/). This was fun and challenging. Derek helped me out with this a lot. At first I thought we could only do it with grid but he showed me how it could be done with flexbox, the `order` property and `display: none`.

This was the original layout I had I had to work with…

![How to Kill a City at 1200px](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F7590d16b-75f8-4f91-bbc6-d1f332ede948_713x554.jpeg)

This will be the layout for the 1200px+ version but now I have to create a mid-size version (700px+) and a mobile-size (-700px). Here’s what I came up with…

![How to Kill a City at 320px](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F6fa3abce-f8e9-46cb-8262-452df94b1a82_700x1265.jpeg)

![How to Kill a City at 700px](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F5baa8c1d-e0f3-476e-a544-6d87ecdb8f53_320x1361.jpeg)

Definitely learned a lot with this one too. Managing the resizing of the paragraph and images created some ugly stretching but at least I got some good practice in. Would probably help if all the images had the same dimensions to begin with too. Another whoops.

Oh yeah, also learned about the aria-hidden attribute for screen readers. Swapping out display: none for the duplicated paragraphs would’ve been a problem. Another useful thing to add to the checklist.

---

Welp that’s the gist. Hope you liked it.

✌️ P E A C E ✌️