A Website A Week

in Design, Today I Made, Weekly Website

I’ve been restless lately, in need of a personal project. I’ve looked at a few hackathons and similar events, but what I want is something a little more extended than a weekend, and a little more compatible with my vital weekend afternoon nap schedule. I’ve been feeling in particular that I ought to do more to improve my visual design skills. I read Designing Together last month for a little book club I have with some designer friends, and one of the things Brown talks about is mindset, and the need for designers to have a growth mindset. Basically, for productive work to happen, we need to believe that we can learn and get better, even (especially!) for things we fail at initially.

I like to think that in most cases I am open to growth and the belief that I can improve. But when it comes to a lot of visual skills, I have a definite fixed idea that I am Bad At This. I am still convinced I have at least a mild non-verbal learning disability1 But! The kind of visual work I need doesn’t involve surprise memory quizzes, I can have 20 reference images open at a time. I don’t need a complete and detailed vision all in my head, I can judge what I see in front of me as I work.2 I can become familiar enough with common visual patterns to apply them consistently and competently. I can do this, I just need practice.

Meanwhile, my partner Peter was looking for ways to improve his front-end development skills. His current role at a nonprofit involves an eclectic set of responsibilities and not a whole lot of modern front-end work, so he worries his skills are stagnating.

Thus our Website a Week project was born. Each week, I will spend some time designing from the ground up a fairly simple (mostly) one-page website, and Peter will develop it. We’ve brainstormed possible site concepts, I solicited friends for simple ideas that would also be useful to them since I’m happiest when I have a real problem to solve, and we each made a set of inspiration cards by writing down techniques we want to get experience with on index cards. Each week we pick a site concept, draw a card for our respective practice, and make it happen.

This first week is just a little experiment with random content that hopefully will also help us solve an issue that comes up a few times a month: what to do for dinner when nothing in the house is appealing. For reasons that are boring to the non-involved, this can be a difficult decision for us to make. So we made an XML list of nearby restaurants we both like, and the page displays one randomly. The idea is to refresh until an option we’re both happy with appears, and then we commit to the first good-enough option. We’d originally planned a few more complex interactions, but that turned out to be a bit too ambitious for week one. The result we did get was not too shabby if you ask me.

My visual goal for this week was to make “almost-flat” buttons. I found the cute jam jars and color palette on Colourlovers.

  1. See here. Like, I cannot tell you how badly I do on tests of visual memory. Because I do terribly and get super stressed out and can’t handle it and quit before finishing the test. And the only reason I have ever gotten a good score on a test of mental rotation is because I talk myself through which blocks must correspond to each other through careful comparison. I promise no actual visual representations have ever been successfully rotated in my mind. Also the problems with social skills describe my outcast youth perfectly. 

  2. And I am, actually, confident in my ability to judge things I see in front of me. I’m great, for example, at eyeballing measurements and dividing up space into equal parts. I’m comfortable with concepts of balance and rhythm and harmony, and can identify why an existing visual piece might feel off. I’m even competent (if not, like, brilliant) at drawing what I see in front of me, rather than from memory.