Learning and Project Update: March 27, 2018

The Past Few Weeks

Well, I’ve fallen out of sync of updating and I’m now feeling the pains of having to recall everything I’ve worked on since my update 16 (!) days ago. I’ve been quite active and working on several things, and as I’ve noticed I tend to fall behind on my updates when this happens. For awhile, I had established a nice rhythm of writing a reflective entry every Sunday regardless of how busy I was throughout the week, but I neglected to do this the past 2 (!) Sundays.

I’m going to start with some general updates and then move into some project and learning specific ones.

Maker Faire NoVa

I had the opportunity to be an on stage speaker at the NoVa Maker Faire on Sunday, March 18. I presented Bringing the Maker Movement to Your Program and used this as an opportunity to refactor my slidedeck to integrate some new design and storytelling concepts that I’ve previously written about. Here are changes I made to the slide layout:

• Switched to Avenir from Helvetica and used only 1 font
• Changed background color to white from light gray
• Changed font color to dark blue (high contrast with background color)
• Added some slight depth to the DHF anchor logo, and included it on all slides (partially due to my interests in Material Design)
• Reworked the slide footer to be white with a slight brand color separator
• Added our DHF Twitter account to the footer

Other than those changes, I also decided to focus on one idea per slide and gave the 25 minute talk in a conversational manner where I didn’t rest for long on each slide. Previously I would’ve listed the points in bullets and spent longer on each slide, but I decided to change this up and try this approach. Overall, I enjoyed the process and it got me thinking about ways to present information and resources through storytelling.

This has motivated me to change some of the ways that we present information on DHF Blueprint and as a result I’ve been spending a good bit of time redoing some of the landing pages (and creating new ones as well). I had a lot of fun presenting and I’m now highly motivated to continue revamping my slidedecks as well as finding ways to present DHF resources through a conversational story.

Current Learning Focuses

I’ve been focusing much of my current learning on 3 main areas: building confidence with ReactJS, studying and leveling up my UI/UX language, and honing my abilities to design microcopy and microinteractions. I’ve been spending quite a lot of time working on these areas and I’ve found that at a certain point everything blends together in a really positive (and all consuming) way. I’m going to write briefly about each of these areas with the intent (and hope) that I expand on them later this week. Let’s dive in!

Building Confidence With React

I’ve finally decided to give a good amount of attention to learning React. Previously, I hadn’t really had enough motivation/use-cases to dive in and learn React and I didn’t believe that my general JavaScript knowledge was deep enough to understand React. As a result, I did some “JavaScript cardio” over the last two months instead of learning React for the sake of learning React. Through doing this, I worked through several practical ES6 examples and applications, wrote some lessons on JavaScript classes for DHF youth, and went through some rapid JavaScript training on Pluralsight to test my skills. While doing this I’ve listened to several podcast episodes, read documentation, and digested React code while slowly building some small components here and there. This was a nice low pressure way of picking up React while boosting my JS knowledge.

Once I became interested in reworking my site in Gatsby I had the motivation I needed to start accelerating my React learning. The last 2 weekends have been pretty busy for me so I didn’t get a chance to do this yet, but in the meantime I’ve been making some changes to our Funkzzi.market site that runs on Netlify. I originally planned to do a full site migrate to Gatsby with headless WordPress, but that’s since been temporarily postponed.

Testing My Knowledge

Anyway, this past weekend I decided that I wanted to establish a baseline for my React knowledge so I took the Pluralsight skill assessment for React and scored in the “proficient” range. This has been extremely motivating because the Pluralsight assessments are designed to be adaptive and challenging. This has motivated me enough to start drafting up a post about my approach for learning new things, especially since I’ve been recently asked a few times about my learning and development process for DHF content. Anyway, on to the next topic update!

Photo by Tamarcus Brown (@tamarcusbrown) on Unsplash.

Developing a UI/UX Design Language

As I’ve been (gladly/excitedly) taking on more UI/UX responsibilities for DHF I realized how much I enjoy it and have been unifying my skill development for work and personal pursuits. This focus has 2 core areas:

• Understanding some current UI trends
• Researching UX workflows and processes

In pursuit of the first point, I started exploring a lot of different design systems including Material Design. As a way of actively practicing with these concepts, I used MaterializeCSS in the Funkzzi.market site, and I’ve been integrating some Material Design concepts into DHF Blueprint. Namely, I’ve focused on streamlining information through use of cards and giving interface elements weight with shadows. This has been a lot of fun, and I really like a lot of Material Design principles. However, I’m also exploring other systems and UI libraries such as SemanticUI so that I can have a well-rounded UI language and understanding of modern trends. This is also why I decided to start actively leveling up my React skills, as I gravitate toward the UI component philosophy central to React.

I’ve found that the best way for me to understand these concepts is to apply them, whether to an active project or by creating an HTML/CSS mockup of a sample landing page. I’ve been working actively to develop components that use what I’m learning. I plan to write more about this process in a later post as well.

Designing Microcopy and Microinterations

The last core focal point of the last 2 weeks ties directly with the previous area. I’ve been doing lots of research (and active practice!) for microcopy and microinteractions. Fortunately, I’ve been creating and redesigning several landing pages for DHF, so I’ve had lots of practical uses for these skills. After the redesigns, my goal is to start conducting some user interviews. Eventually I want to integrate A/B testing to add some more data to what I’ve been doing. Here are some of the new public pages I’ve made (or redesigned) that include some microcopy and microinteractions:

• https://blueprint.digitalharbor.org/
• https://blueprint.digitalharbor.org/educator-resources-get-started-today/
• https://blueprint.digitalharbor.org/makerspace-furniture-builds/
• https://blueprint.digitalharbor.org/online-courses/

I’ve been working on building my microcopy/UX writing skills as well as integrating more microinteractions that are unobtrusive. I’ve started integrating the concept of weight to provide hierarchy to UI elements. I love being able to actively apply what I learn to a real, and meaningful, project.

I hope to get back into the swing of things and write some longer posts later in the week. It feels good to write and I have a few topics in mind, but ! This is why I’m so thankful for our Homebrew Website Club meetups! Tonight’s meetup was great, and Marty wrote an excellent writeup filled with updates on everyone’s progress. These regular meetings are a fun way to keep accountable and motivated, and I’m already excited for our next meeting!

Until next time…