Ethan Marcotte on design systems again — reducing the disconnect between design and code as much as possible sure seems ideal (which makes me think mainly of expanding browser dev tools to include design, though that’s still not a perfect fit)
Interested in helping with some UX research? I’m going to be revamping the information architecture on this site soon — its organic growth over the years has led to some structural friction points I’d like to resolve — and I need some volunteers.
Which is where you, dear reader, come in. Participating would involve activities like taking user tests and surveys, doing card sorts and tree tests, etc. Fairly low key stuff, all online. (You wouldn’t necessarily be doing everything in that list either, I should add. I’m hoping to keep this as a very light time commitment for everybody who volunteers.)
If you’re interested or have questions, please email me. Thank you in advance, too!
My classes are now squarely in the past. You’d think I’d feel massive amounts of relief, but the job search is taking good care of that, let me tell you. Still, it’s nice having one less thing to juggle, and (barring some ghastly surprise) I’m on track to graduate with a 4.0, though that I don’t see how that ends up mattering in any substantial way.
Progress on my portfolio was dragging along until I decided to set a goal to spend ninety minutes a day on it. The heretofore daunting, seemingly mammoth size of the project is now rendered down into manageable chunks. And it’s working. (As evidenced by the novel-length post that preceded this one.)
I’m planning to take the same tack with my writing, aiming for a set number of minutes spent writing each day rather than a word count. At least for now. Pretty soon, though, I’m going to have to own up to the fact that I’m just avoiding the work.
Art-wise, I’ve got plenty of ideas in the works for religious pieces. Metering the releases is working well for me, too, I think. (I’ve got a board in Figma where I plan out when to release each piece.) Getting back into doing more whimsical art is proving slightly more difficult than expected, but that’s mainly my perfectionism getting in the way. Hoping to have something new to show soon.
This week it dawned on me that my youngest kids may very well live to see the year 2100. Goodness.
Nonfiction reading: I just finished Longitude. A delight. Books like that — about invention and engineering — are very much my jam. Recommendations welcome. Also, I learned (to my jaw-dropped horror) (okay, that’s overstating it a bit) that Earth’s rotation is gradually slowing down, thanks to the moon.
I’m about to start Ray Kroc’s Grinding It Out, a history of McDonald’s. I don’t care much for their food, but stories of making things — businesses, food, what have you — intrigue me.
I’m also a sliver of the way into Walter Isaacson’s Benjamin Franklin biography. It’s great. Apparently I really like reading about the 1700s.
Halfway through the Neal A. Maxwell biography so far. I could read it much faster — it’s very readable — but I usually don’t have much time for reading on Sundays, so it’s turning into a long-haul book. And I’m okay with that. Gulping down books is great, but I sometimes wonder if slower reading — stretching a book so it lasts throughout a longer period of my life — is better at making a dent in my memory. Or at least a different kind of dent.
Fiction reading: I finished A Deadly Education and really liked it. Looking forward to the rest of the trilogy.
I also read Cory Doctorow’s Radicalized. The last story was a bit much for me, but the others were good and thought-provoking.
I’ve barely begun Matt Haig’s The Humans. I started reading it last night, minutes before going to sleep, and as a result I have absolutely no idea what I read.
As I’ve been toiling away on my design portfolio, I realized that a) I haven’t been working in public on this project and b) that ought to change. Which it will. Starting now.
My plan at this point (subject to change) is to design the portfolio site itself first, then post each case study project as I finish it.
The portfolio site
Note: the following is effectively an initial draft of a case study documenting the design of the portfolio itself. It’s a little meta, sure, and I expect to replace it in the portfolio as soon as I have enough other projects, but it’ll do for now. And if reading case studies isn’t your thing, stop here!
Problem definition
The goal: to design a site showing what I do as a designer, both in the case studies showcased as well as the design of the portfolio itself.
The main users of the portfolio will be hiring managers and recruiters, who will be evaluating my work to determine whether they should interview me. From what I’ve read, they’re primarily interested in seeing my design process—how I tackle a project, how I solve problems—and secondarily interested in the quality of the final designs. (There’s more to it than that, but you get the idea.)
Research
I began by doing some lightweight competitor analysis, looking at thirty or so portfolios for UX/product designers, and watching a handful of critique videos. By that point I had a good idea of what ought to be involved—initial text describing what I do and what my experience is, case studies documenting my process, a link to my resume, my contact info—and I felt that the site was small enough that I didn’t need to do more formal research at this point. (On other projects, though, this is where I’d do surveys, interviews, card sorting, tree tests, empathy maps, personas, usability tests, etc., depending on what makes the most sense for the project.)
Sketches
I sketched out some ideas for the nav, starting with mobile first since it’s easier to begin there and scale up to desktop:
I also sketched out some rough layout ideas, with the main focus on the list of case studies on the home page and the case study detail pages.
Blockframes
Last week I was reading about blockframing and have been itching to try it out, so I did:
It’s great. Easier to work with than wireframes, which helps in the earlier stages. Definitely planning to continue using it. (I should also mention here—for curiosity’s sake if nothing else—that I used Figma for everything past the point of sketching.)
Wireframes
I continued with wireframes, to flesh out the ideas with actual text (placeholder text, anyway):
Crimson Text is the primary font (indeed the only font), which I chose because a humanist (old style) serif seemed like the best fit for my personality and the type of design I do.
Color palette
Next I chose a (very) simple palette:
Ordinarily, though, I’d need a more complex, organized color scheme.
High-fidelity mockups
And then we come to the high-fidelity mockups (in which the photos are all from Unsplash or Pexels, and the case study text is made up):
As I applied color, it became clear that the design would benefit from a secondary font, so I added Chivo as a compatible sans-serif. I also added clearer call-to-action links to the individual case study sections on the home page.
What’s next
Doing some small usability tests to make sure the design works, then straight to implementation. I’m planning to skip prototyping for this project because a) it’s so, so small and there’s not much to prototype beyond dead simple link behavior, and b) with this being a personal project, I’ll be doing the frontend development, and the initial implementation there will be a fairly effective prototype.
