Yo!
I just realized that I haven’t had any coffee (or caffeine) for the past month. I used to drink at least 2 cups a day but I just naturally stopped. I think all this physically inactive time spent at the computer might have influenced this change. I actually like it. I don’t flip out if something goes wrong and I feel much better. After awhile I think coffee starts to have a placebo effect. I say if you rely on caffeine — go cold turkey and see how you feel.
First time listening to Nala Sinephro. Two songs in. I like it so far.
Well enough about me… oh wait, this is all about me. Here’s the gist…
City Postcard
This was an interesting exercise where we had to create a postcard for Santa Fe, NM. Only one limitation: no words.
Since there were time constraints I had to come up with an idea and execute it fast. I searched for “Santa Fe” using all of my inspirational resources (like dribbble and behance) as well as google images. Whatever sparked an idea, I just took a screenshot. After about 30 minutes of this I gathered all the shots and decided on one image to base my design on.
I think this image stood out amongst the others due to its simplicity. Busy and complex images are cool on large posters but for a postcard I thought something simple but striking was the way to go.
Threw this in Affinity and got to work. I lowered the opacity so I could trace over it. Using the smart setting on the pen tool was a time saver. Can’t really tell how it works but if you use a lot of nodes while drawing something it can sort of guess what you’re aiming for and will smooth and straighten curves automatically. I grabbed the colors from the photo and added them accordingly too. Once I had the shapes and colors set I decided to experiment with gradients for definition and nesting brush strokes inside certain shapes. Here’s the first draft…
I thought the sky could use some more work so I applied the same brush stroke nesting technique and fiddled with some blend modes til it looked cool. I also wanted the buildings to have more dimension so I added a 3D effect. Decided to change the NM symbol to turquoise too (definitely a NM trait). Here’s the final draft…
Secret Word Graphic
Modesty:
The quality or state of being unassuming or moderate in the estimation of one’s abilities.
I somehow had to make a poster that evoked the meaning of the word.
I took the same approach for conducting research as I did with the postcard exercise but couldn’t find anything that sparked any ideas. However I consistently saw images of winners podiums. Maybe I could use that somehow. Then I thought, what if I had someone who would obviously be the winner at everything (Superman) come in 3rd? That’s a modest gesture, right? He could easily obliterate an athletic event with everyday humans but he decided not to. Does that describe modesty? Is that an act of modesty to let others win because you’re content with who you are? I dunno. This was a weird one.
I couldn’t come up with any other ideas so went ahead with it. Not my best but it exists. Sort of hit a wall with this lesson.
After a gazillion guesses, Tara got it right.
Store Style Tile
What is a style tile?
Deliverables(?) that consist of…
fonts
colors
interface elements
For some reason I had a hard time wrapping my head around this. I made it out to be way bigger than it was supposed to be. My impression is that a style tile is something you throw together in less than 10 minutes. It should just be a color palette, various font stylings, and how you might style buttons/links. Very early stage design ideas. Just seemed so boring and basic that it feels like I’m cheating or doing something wrong. It’s weird how the easier something is, the more it confuses me. I halfway made a full-fledged layout before I realized I was doing it wrong. I remember just thinking really? that’s it? Just some text, colors, and a button?
The point I’m missing is that this is meant to save you (and the client) time. Although it’s extremely basic it gets everyone on the same page or at least sets a good starting point. Right now it feels kind of goofy making it for my own sake since I know what I like but maybe I’ll see it’s effectiveness once I start working with a client.
So anyways we had to make one for a fake audio equipment store. I still think I overdid it since this was suppose to be a style tile. Is this a style tile? I dunno. It’s weird. I chose a 6 colors and 2 font stylings that I thought went good together. Hover-states and links are red. The “alert” color I used for the cart quantity, sales badge and checkout price is orange.
Symbol and Icon Exploration
This was a fun lesson. We were given 6 words where we had to create a graphic that represented each one while all sharing the same cohesive visual language.
As I started making my list of ideas based on the symbols/icons I saw on the noun project I thought, why don’t I just make a character and style it accordingly? That way they share the same cohesive visual language. They’re also kind of funny. My favorite is the correlation between the wizard cap and the shower. Making the hair for the positive and dead symbol was fun too. Just flipped through a bunch of different brushes til something worked. Would be fun to make a flip-book of this.
These are the 6 graphics and my ideas for what to include:
Mystical
wizard cap
crystal ball
crystals
Fresh
Putting on deodorant
bathing with soap
Misty hot water
Towel
cucumbers on eyes
Shower cap
Negative
Furrowed brow
Sharp teeth
Dark cloud
Dark eyes
Messed up hair
Legendary
Sword
Buff
Viking
Ponytail
Dead
Crossed-out eyes
Blood
Tongue out of mouth
Arrow in head
Positive
Huge smile
Thumbs up
Suit and tie
Nice hair
Personal Site Execution
Although I like the X-Treme Digital Zone from 1992, it’s time to say goodbye. Now it’s time to think of the next version.
I organized my thought before designing. Here’s how it went down…
What mood do I want?
Fun, simple, slightly off-kilter.
Why?
To attract like-minded creatives without alienating the squares who might offer me more money.
What content do I need?
Mission statement
Who I am
What I want
How I intend to get there
Why you should work with me
Projects
Quick blurb
Icon / SVG
Link to project
Link to case study
Projects
Contact
email
phone
Blog
Link to Substack
Links
Codepen
Reddit
Dev
CodeNewbie
Twitter
What font or font pair helps evoke that?
Need to scroll through Google fonts. I know I like Futura.
What colors would help?
Really don’t know yet. There’s so many directions it can go. There’s so much testing. I think this will probably take shape somewhere in the middle/end of the process. Right now it’s a matter of weight distribution. Once I have that then it’ll be easier to choose colors.
Should I use any graphics?
Yup. I want to mess around with designing an icon for each different project link that shares a cohesive language.
What visual tricks would lend themselves to this story?
I dunno. Think that’s a decision that’ll take shape in the process or near the end.
How will the site change and grow?
I’ll have to test it out. If I get clients and/or a job then I’ll have to analyze why it was successful and grow based on that. If this leads nowhere then I’ll have to get feedback as to why it went wrong and change based on that. In the long-run it would be fun to do a redesign once a year to match trends as well as my interests.
Will there be more than one page at this stage?
I could see there being a page for case studies of the projects but that might be too overkill at this point.
How can I measure if this design is successful?
If It generates interest outside of my inner circle. If I get a job/gig.
I first started designing something similar to what I’ve done in the past. It looked ok but I wanted to challenge myself and make something weird. Decided to warp some of the letters in my name to make columns and let that sort of dictate the design and layout. Here’s what I designed in Affinity…
Super weird but fun. I like it but could it get me hired? Imagine all the cool stuff I could do with color and animation. Decided to move forward with the design. How the hell would I even design this? If it ends up sucking or I can’t pull it off then I’ll just create a mild version. Either way this will be interesting.
Personal Site Execution
At first I was going to learn grid but then decided to hold off after talking to Derek. He suggested I try it out in the most simple way possible to see if it works.
What I ended up doing was taking the letters and the sectioning and use them as an SVG (Can you even recreate this with CSS?). Then I used absolute positioning with either percentage or viewport width values to make all the elements responsive while staying in place.
It worked out but it’ll be hard to make it scalable in this state. If I move forward with this design I’ll definitely have to make a drastically different SVG layout for each media query. Would be interesting to implement some scroll effects and sticky positioning for the projects section. Maybe I could built the sectioning part with the gradient dividers entirely in html/css to save myself a headache. Maybe this design is too busy for mobile. Maybe I should ditch it. Maybe this will require to consume coffee again. Lots to think about.
I think I need a fresh set of eyes to help me make decisions. Will employers respond to this design? Will they laugh at it? Either way this was fun and surprisingly not as hard to pull off as I expected. Felt like I cheated by making it a giant SVG with all this absolute positioning.
Here’s the link. FYI: Colors aren’t set in stone. Look at it on a window size smaller than 700px.
Student Check-in
Once a week I check in with Derek. We talked about the course, jaded burnouts, failed musicians, Bill Pullman’s love for gardening, how to make the wacky layout of my personal site come to life, git/tower, and an altered version of Uber but with fancy cars.
Fun times.
After I got set up with Tower I was finally ready to start making changes to the Alpha-Net. Unfortunately this was cut short due to an unannounced visitor. Ian Enders.
He kept insisting that I let him use my computer to check his email. I eventually relented so that I could get him out of my hair. Annoying guy. Hate that guy.
Welp that the gist. Til next time…
✌️ P E A C E ✌️
Perpetual Education: Week 7
I've noticed that some of your images are really in-yo-face. Probably just Substack / but - for example, if you had a grid of the 6 symbol/people - after the individual ones, then we could see them all together. It's kinda just the rub with these 1 column blog type things.