Front End Development
Making myself more useful and usable by doing code school
Overview
2020 is the year that just keeps on giving.
No sooner had I got going on some really interesting UXR projects when the world locked down and projects got postponed for the foreseeable.
Perfect opportunity to make myself both more useful and usable beyond my research and design skills and spend some time at the front end.
Truth be told, I’ve no aspirations to be a programmer, but when working with Adobe XD through to high-fidelity clickable prototypes, even as they become increasingly sophisticated with all the new upgrades that simulate the real thing, it seems a shame not to be able to turn that work into something that can be ‘in the world’ as an publishable prototype. It also allows me to become more intelligent in working with the engineering wizards who make these things come to life.
I’ve already set my sails for the world of UXR, and indeed as you’ll see, did some usability testing on the site I created and then applied that into the next iteration.
I’d say it’s been a pretty good use of 3 months.
Context and Challenge
Towards the end of the UX course, I created a portfolio site using Squarespace which is quite fit for purpose as far as I can tell but could feel the cookie-cutter constraints and guardrails within the templates.
So, my objective was to learn how to produce, from scratch, my portfolio as part of the learning process.
The challenge was, to be quite basic, I had no clue about how to do this, so adopted an extra ‘specialisation course’ run by CareerFoundry for their UX graduates that’d steer me through a learning process. By having access to a live tutor, it allowed me to remote learn, then have regular time with a professional who could steer me without giving me the answers.
Now there are other ways to learn to a level of competence (and not enrolling in a computer sciences university course), books (which I bought anyway, I see you Mike Myer’s A Smart Way to Learn JavaScript!), online free courses, video tutorials etc and I’d researched those, but my learning style fits periods of discovery, delight and frustration with a tangible goal, but with access to someone paid to help me, so the course investment in terms of time, inputs and outputs worked for me.
Process and Insights
- Work out a plan. I’d only just done my portfolio using Squarespace so knew what the pages were and the content therein. However, it made sense to back engineer the portfolio as a prototype in Adobe XD so the structure was under my control, not the website template.
- Make something ugly. Html is the foundations, the walls and the roof of every website. Every building project starts messy, stays messy and only comes good towards the end. A good text editor becomes your friend and I became best friends with my Brackets Editor.
- Make something pretty. I adopted a mobile first attitude to the design on the belief that it’s less problematic to expand than to compress. I created a responsive grid in CSS that also allowed me to totally understand the meaning of Cascade and started to apply my own ‘house’ style. I also tried a little CSS transitions, keeping with the tattoo theme of the coursework project and borrowing an SVG image and making a few things move and change colour (see above).
- Make it wobble. So, I’m on distant speaking terms with JavaScript (more the pointing at the menu bit rather than a conversation with the chef) and my respect for those who have mastered it has rocketed through the roof, but I’ve also found that jQuery allows me to do what I want to do whilst pretending to understand how it worked. Hence the pleasant scroll down to contacts and the hamburger menu transition as the screen squeeze down in size. I’ll get there!
- Test it out. So, the real users of my site are people like you. I need to impress you. I need you to remember me. As it happens, you’re a kind bunch and a few of you offered your time and plenty of feedback (usability test report link below). Some of the findings could be implemented, some require further work but will be included as the site get upgraded.
Solution
So you've come from my portfolio site to ... er my portfolio site. The difference is that the former one came from the cake shop and I got to choose the icing, whereas this one is the result of using every pan and cake tin in the house and making every surface sticky to deliver, well, pretty much the same result.
My sense of curiosity means there’s no website that doesn’t get the right click/inspect treatment. For any UXers that haven’t tried a little code, you’re denying yourself one of the most satisfying pastimes that also makes you understand how the digital world is wired together.
I am inspired, and plan to make myself a little better as a coder every day between times.
Results
Love html, love css, love/hate js. Already making plans to get a little python into my life. Have already installed developer tools for native apps but want to consolidate on responsive websites before going to deep into those ecosystems.
Enjoy.