Tag: UX design

Posted on

Figma plug-in 4 UX: html.to.design – Fabulous!

Table of Contents

html.to.design Figma plug-in
  1. html.to.design
  2. Installation
  3. Use
  4. Conclusion

Figma plug-in

html.to.design is a new plugin for Figma that looks to be an amazing ally to any UX designer.

I decided to give it a go and see how it can help workflow and creativity. Keep reading to see what I found…

html.to.design

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.

Installation

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.

Conclusion

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.

Posted on

Lo-fi Figma Prototype

As I carry on studying UX, I am proud to have made my first Lo-fi Figma Prototype! Here is the link:

https://www.figma.com/file/29fmuGt6ymNFHWqfWCm9IJ/Coffee-House-Wireframe?node-id=0%3A1

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.

User Flows

A paper wireframe that I used for my lo-fi Figma prototype.

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. 😛

Posted on

Build Wireframes and Low-Fidelity Prototypes

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.

User Flows

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:

A user flow chart sketch for a service review app. This is a typical Wireframe or Low-Fidelity Prototype for UX Design.
“create a service review app for a fitness trainer”

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.

Keep learning!

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?