I decided to give it a go and see how it can help workflow and creativity. Keep reading to see what I found…
Honestly, I didn’t even know that Figma plug-ins exist! I am a bit of a newbie and am still getting my head around Figma. It does seem like a very cool tool, and it’s certainly an industry standard for UX designers. Just a quick search on Indeed returns more than 1000 UX designer jobs that require Figma!
I admit that I find browser-based apps very click-heavy. As an old school Internet user, and someone quite used to the UNIX shell, I tend to use key commands more than clicks. Browser based apps don’t always allow key commands as the command might pass to the browser or system, rather than the app. So, I am moving with the times and adapting to browser based apps.
I had to log into Figma first. Then I went back to the plug-in page and clicked on the link. This opened a blank design. I navigated to the left menu and found the plug-ins. Lo and behold, there was html.to.design.
I tried to import the very page on which I had found the plug-in, https://www.figma.com/community/plugin/1159123024924461424/html.to.design . As this page is behind a log-in, I was not able to import it into the Figma plug-in. In the app dialogue box, they write:
“Need to import a private page behind a log-in? Get notified when this feature is available”
I signed up to receive updates in the hopes that this might also serve to trigger my memory later on! I notice that my mature brain is good at long-term memory and pattern perception, but my short term memory, which used to be absolutely razor-sharp (my mother used to say “you have a mind like a steel trap”), is not as reliable as it used to be.
How does html.to.design work?
I imported my own page and immediately the whole design and structure showed up. I played around a bit and made a prototype which you can view here.
This Figma plug-in is on fire! I love anything that makes life easier! One of the tricks they teach to aspiring UX designers is to UX the page of a company that you’d like to work for and send it to them when you apply for work. I think that this plug-in could be a real ally for UX designers new and seasoned.
The process from ideation to prototyping is pretty straightforward, but is surprisingly long in execution, especially when you’re new to it. The Coffee House project is our common project on the course, and we use it for every assignment before proceeding to our portfolio project. My portfolio project, as I have said before, is to create a service review app for a fitness trainer. The two prompts are quite different, and the user journeys are different, but the user flows are fairly similar, and there are frames that can even be recycled.
After creating paper wireframes and then digital wireframes, we created paper user flows and the digital user flows. Over the on the right is one of the paper wireframes that I made, which I later digitalised on Figma. I like the design iteration as it gives me lots of chanced to refine my ideas. In fact, when I started the prototype, I had only drawn five paper wireframes. The final lo-fi Figma prototype has 11 frames!
Yoast SEO is telling me that the 190 words I have just written is too little, and that I need to bump it up to 300 words. I guess that I could, but I prefer to just go ahead and post this, and take my dogs out for a walk before evening falls. I have been working hard, and studying hard, and I would like a little time off. So, thanks Yoast, but not today. 😛
After a short pause, I am back on the Google/Coursera UX Design Certificate course! “Build Wireframes and Low-Fidelity Prototypes” is the title of this unit, the third of seven.
Wireframes and Low-Fidelity Prototypes
Wireframes and Low-Fidelity Prototypes are the first step in creation of a solution for your product. That is a bit mealy-mouthed, isn’t it? Wireframes and Low-Fidelity Prototypes are a sketch of what you’re going to build. You take all that user research and start to turn it into something concrete – a design!
Whether you are working alone, in a small team or in a big team, the process of making ideas become realities is complex. Getting mislaid, off track or too granular too early is easy. The ideation stage, in which we created personas, empathised with them, understood their user journey and made problem statements has placed us in a position to now define what it is we are going to build.
Instead of a problem statement, we use a Goal Statement. We are building on the research we have already done by now defining what we are going to do and how we are going to measure the results.
After that, we make a first user flow. They asked for a a sketch. I did that. But after submitting my work, I was that other students on the course had gone ahead and made a proper flow chart. It took me a little while to figure out where on Google Drive this can be done. I thought it might be slides, but it turns out to be Drawings. Once I got there, I faffed around a bit with design. But, I managed in the end. Funny, hey, how something relatively low-tech like a flow chart still has its learning curve. About a year ago, I started using Google Drive in earnest. I did a little certificate course (funded by the Valencian Government) and discovered that I quite like Cloud Computing. So, without further ado, here is my User Flow Diagram:
Where UX gets interesting!
This is where UX gets its hands dirty. Musicians attest that it is much harder to compose a song than to hum a melody. Getting ideas out of your head and into the world is hard, but it is the essence of any creative process. Creation requires patience, dedication, reiteration and plenty of self-doubt. I am happy to be back on the UX course! I took a little rest because I signed up for a dj course at MixPeople DJ School. It was awesome, and I learned a skill I have been wanting to polish for a long time. The Wireframes and Low-Fidelity Prototypes course began with a review of concepts from courses 1 and 2. I felt super chuffed (that is British slang for happy) to discover that the ideas, concepts and methods had stuck and I was able to remember them clearly after a nearly two months rest. Yay for my old brain.
It is never the wrong time to study. It is always the right time to acquire new skills. Whatever strikes your interest, creates curiosity or stimulates serious reflection is worth learning about. It is tempting, these days, to read a few blog posts, scroll some forums or fast-watch YouTube tutorials, then consider yourself something of an expert. There is a certain humility is actually learning, in studying, trying to make new knowledge stick. I say go for it, get learning. UX does it for me right now. What would you like to learn?
The Elements of User Experience by J.J. Garrett proved a stimulating and thought-provoking text book which gave substance to my UX Design Course. I loved the book, and made time almost every evening to read a few pages. Upon awakening, I would try to remember what I had read the night before.
Studying is a slow and steady quest. Rarely can I dedicate large chunks of time to my course, but I chug along. I could have rushed into Part Two of the course, Start the UX Design Process: Empathize, Define and Ideate. But, I thought it wiser to buy the two books referenced in Part 1 and thus gain a more solid footing in the material. (The other book is The Design of Everyday Things. More on that later…)
User Experience (UX), like many things tech-related, is a relatively nascent field. As we have broadened and deepened our relationship with technology, we have become more discerning and habitual in the way that we wish to interact with the tech. Making the user adapt to the company’s or the programmer’s vision (or bias) is no longer acceptable. It is a sure path to ruin in today’s competitive online market.
Enter UX. Twenty-five years ago, with insensitive regularity, tech savvy folks would sniff that “the user just has to adapt to the interface”. Since then, certain standards have been established that make information design and interface design more predictable and, well, usable. After all, that’s it: what we want to achieve with UX is a usable site that aligns with the product objectives.
The 5-Elements UX Model
Garrett identifies 5 User Experience planes: Strategy, Scope, Structure, Skeleton, Surface. The Elements of User Experience is a model that accommodates both information and interface design.
The author begins by explaining that the two points of view are opposite but equally necessary. Those who look at the Internet as a big database, who think mostly about the search for and delivery of information, view web development from one perspective. Those who see the Internet as more of an “app”, as something that lets you do something, contemplate it from another perspective. JJ Garrett came up with a model that serves both standpoints.
The Elements of User Experience
This image is adapted from Garrett’s original work (2010)
A full description of the theory and application of the Elements of User Experience Design is well beyond the scope of this post. What I hoped to do is comment on a few things about the book and the course.
Takeaways from The Elements of User Experience
First of all, it is perfectly possible to do the UX Design Course and not read this book. I undertook this as an extracurricular activity and am I ever happy that I did. The course description of the five elements of UX is more than adequate. But, the book gave history, breadth and depth to the subject.
Secondly, Garrett is extremely good at defining common terms. It can be easy to think that you know the difference between interface design and information design, but some assumptions are not always true. Furthermore, it is good to challenge your own understanding. I feel much more confident now in distinguishing between the different parts of a web site or app.
Thirdly, reading this book helped me to perceive a bias that I did not know I had: I am an information person and have always approached the Internet from that perspective. Despite being a lover of pretty things, I was always thinking about the information. I discovered that bias whilst reading this book and now look at UX Design from a different perspective.
Fourthly, there is some Google bias in the UX Foundations Course. This is a criticism that I had seen levelled at the course, so was looking out for it. A fair chunk of time is dedicated to the “Design Sprint“. The Design Sprint is typically a week-long intensive in which the prototype design of a project is hashed out. Interestingly, in the last section of Garrett’s book, he says:
“Product development is rarely a sprint…thoughtful, deliberate design decisions will cost you time in the short term, but they will save you much more time in the long term.”
The Elements of User Experience, page 160, JJ Garrett, New Riders Press.
Fifthly and finally, Garrett emphasises the importance of planning and documentation. Every site I have ever created has been done on the fly. When it is for personal use, this is fine. But for professional work, improvisation will only get you so far before confusion, conflict and cracks begin to show. So, point taken. From now on, planning, wireframes and design comps are the order of the day.
The Elements of User Experience was an invaluable book and an excellent time investment. I was really grateful to the print book! Why? Well, I am studying alongside my busy work schedule and I don’t always want screen time just before bed. We all know how that turns out, right? To have a real book to read, just before bed, highlighter in hand, was just…lovely.
I am halfway through the second part of the course. I will keep you posted. Thanks for reading!
A web site redesign needs UX and to define UX, you need a User Survey. So, using the Elements of User Experience, I created a User Survey. I will compile the results once they’re in. Let me fill you in on the background. Read on.
The Elements of User Experience
The Elements of User Experience is a fantastic companion of the UX Certificate course I am doing. This book teaches you how to think about web site design from two distinct but equally necessary perspectives. Web sites can be viewed as depositories for information storage and retrieval, or they can be seen as applications, that allow you to “do” something. To accommodate both points of view, Jesse James Garrett developed his theory, the Elements of User Experience.
The Five Elements of UX are Strategy, Scope, Structure, Skeleton and Surface.
Alteayoga is the name of my yoga project. I currently use alteayoga.es, but have alteayoga.com parked on Google. I will design the site with Webflow, a platform that we looked at in the Part 1 of the course, Fundamentals of UX Design.
The first thing I have to think about is the Strategy. To decide the Strategy of the site we are designing, we have to define two things: the product objectives and user needs. The product objectives are defined by the site owner or stakeholder, while user needs come from the users.
Thinking carefully, I figured out what I want, but how do I know what the user wants? To find out, I created a User Survey based the Elements of User Experience.
Taking pen to paper, I defined my objectives – or, my strategy – for the redesign of Alteayoga.com. From my side, I want Alteayoga.com to
Open me to a more international/English speaking market.
Allow me to book and manage requests for online classes. (I often get such requests from students/patients who meet me on their visits to Altea).
To define the user needs, I need to do some research. Accordingly, I used Google Forms to create a short survey. My aim was to keep it short, neutral and simple.
To define my strategy, I need to know if my users use online wellness classes and if so, via what platform. Do they read wellness blogs and subscribe to them? Do they subscribe to wellness email lists? Knowing this will allow me to decide how I present the material and the project.
If you’ve read this far, maybe you can give me five minutes of you time? The forms are hosted on Google Drive, but you don’t have to log into to access them.
I hope to get a few responses, so that I have some material to work with. Even though I am taking longer than suggested to do the course, I truly feel that applying the methods contained in the course gives me the best chance of success. The course is very practical, and we will create a UX portfolio, but behind that, I need my web sites to be solid. So, here’s to defining my strategy!
Adobe Creative Cloud is about levelling up! I decided to increase my membership level and subscribe to the entire Creative Cloud suite. It’s really exciting to get access to all those fabulous, industry-standard apps!
My go-to apps are Open Source. The philosophical stance (free, collaborative software) fits my DIY ethos. Way back in the 1980’s, when I was but a little punk rock chick, DIY culture was the the order of the day! We used to make mix tapes, photocopy zines, sew our own clothes and cut our own hair. There was a real vibe about doing it yourself.
When I first got into Internet, DIY culture was still going strong. In fact, the early net was all DIY. I remember my first IT jobs – there was practically nobody with Computer Science degrees! We were all self-taught and therefore, hackers. We hacked around in the back end until we made it work, and that was that.
Obviously, this method is not scaleable. In order for the Internet to grow, there had to be order, consistency and method.
Linux went from being DIY to distributions. WordPress, while still free, uses plenty of paid plugins. And OpenSource design software like Gimp and Inkscape works fine…but doesn’t have the polish of Photoshop or Illustrator. The pattern fills in Inkscape are shockingly simple. I am sure that I could find some user generated patterns, but that would mean digging around the Internet, and a time investment. At the end of the day, I don’t have time for that, and choose to pay for the professional option, rather than pay with my time.
So, by subscribing to Adobe Creative Cloud, I am levelling up! As I was about to publish, I realised that I ought to have created a graphic for this post, so I saved this as a draft and came back to it later.
I logged onto Creative Cloud and installed both Photoshop and Illustrator. (Adobe Acrobat DC was installed this morning, in order to edit a PDF for Hacienda, the Spanish taxman…but that’s another story!) Lickety-split, I made this combined graphic from the wordsoup from yesterday’s post, a photo from a session last summer, and a lovely iridescent fill provided in the app. If the workflow is this good, then the money investment is definitely offset by the time saving.
(Editing before posting, I realise that I need to make a background for the text so it stands out. Tomorrow. Right now, time to go to the beach and get the best sunshine of the day. Peace out, RR)
I decided to do some extra study about Personal Branding for my UX Design Course. Personal Branding for UX and design is essential these days. You have to stand out! Part One of the Google/Coursera Foundations of UX Design Course included an in-depth discussion of personal branding. As aspiring UX Designers, we shall be called upon to present ourselves to the world, and sell ourselves as professionals. Although I finished the Module easily, I decided to study the element of personal branding in greater depth, dedicating a significant amount of time to it in the past three weeks.
How do others see me?
Personal Branding for UX Design is about establishing your online presence as a UX Designer. For newbies, this essential step both prepares us to present a portfolio to potential clients or employers, and solidifies our self-impression of ourselves as UX Designer.
It was particularly intriguing to compare what I think of myself to how others see me. I set the barrier very high for myself and think that healthy self-criticism is essential for both knowing oneself now, and growing in the future. My tendency is to be very direct and I know that this can sometimes be hard to take.
So, I asked on Facebook. Hey, it’s 2021, what else am I going to do? I am so grateful to all the friends who took some time to help me. I ended up with 200 words to work with for personal branding. The ones that showed up time and again where hardworking, perseverant, high expectations, friendly, creative, offbeat/original, intelligent, direct and “todo terreno”, which in Spanish means “all terrain”. Well, those fit pretty much with my own idea of myself, so the experiment was a success!
Comparing other UX Designers’ Personal Branding, I noticed a lot of originality, breadth and creativity. This emboldens me to present myself pretty much as I am. This may sound obvious, but as a rather zany character, I often felt compelled to “hide” parts of my character rather than shout it loud and proud!
What I did add, and which no one else flagged up, was the word “Autodidact“. As you will see from my about section, I am good at a lot of different things. I have a relentlessly curious mind, verge on the restless and honestly do not know what it means to be bored. There is always something to learn! “Thank goodness I do yoga and meditate” say I, only half-jokingly. My need to learn is constant. When I face a problem, or encounter something unknown, I study it. I make notes. I create a mental map of it, integrate it, and make it fit with the rest of the encyclopaedia I carry around in my head.
My resume now lists the winning words. I created the graphic below with Inkscape. All the words, both in Spanish and in English, are arranged. I chose the circle because it suggests both an eye (seeing myself) and a spiral into the centre.
Now that I have finished this exercise with gusto I will jump back into the course, on Part Two. I can’t wait! check back for more reflections and musings. I really must get an email list going…
The Atkinson Hyperlegible font is free, accessible and award-winning. I came across it during my UX studies.
The Coursera/Google Foundations of UX Design course is super interesting. It truly makes the learner look at design and technology from a different perspective.
On a recent assignment, we shared an example of accessible design. I identified a snippet about a post that I had seen on Facebook. Bo Forbes is a yoga teacher whom I follow. She announced a new Masterclass and included alt-text on her post. Given that Bo Forbes teaches trauma-informed yoga that is meant to be accessible to all, this is highly appropriate.
Another student posted a very interesting link in the discussion forum. Atkinson Hyperlegible Font “…focuses on letterform distinction to increase character recognition, ultimately improving readability”. The font is duly downloaded and shall be installed on this server as soon as time permits.
I tried to find Atkinson Hyperlegible in Google Fonts, but it is not there. This is an oversight, considering that “..the project was honored with the Fast Company Innovation Award in 2020.”,
Well, back to studying!