Figma & the BBS UI Day 1
Notes & thoughts as I build the User Interphase of our website from production to shipping
*Notes from the production journal.
The only way to learn a tool is to actively create in it.
Figma Design Tool.
I found myself where I was running out of time, and I needed to be able to ship a product in our institution, so I decided that it won’t make sense to fully code the entire front end and the back end of our website, I instead opted to use a web builder like Elementor or Webflow.
Nobody prepares you for the fact, that, if you don’t have a tight design for your UI or what you are tying to achieve with your web builder tool, it’s basically pointless to try and use whatever you are seeing. You are going to have to ship something. You have to. There is no in between about that.
I got started yesterday with the goal of shipping a web builder project, in Elementor, since I wanted to use Word Press as my back end.
I only want to be able to ship two pages. The home page and then the LMS that the students can then log into it. As the other coming weeks keep building, I shall ship the other pages as a continuous iteration.
Thinking of the UI in terms of Flexbox
I have been studying CSS & front end technologies for a while, I thought, I shall make the UI such that it can be made into DIVs that are responsive. I thought, hmm, maybe this way when I go ahead and start writing the CSS, I can comfortably make it responsive. Actually, it has to be responsive, because I anticipate that most of the people who shall be viewing our website will be doing it from a mobile phone and not from a desktop.
Research and Execute workflow
As I have found myself in this unique position of needing to finish this project quick, I cannot separate the processes of research and execution, they have to work in tandem. Such, I find that I am learning a lot in the process, but I cannot articulate my learnings, as would be different had I been able to do a deep research first before jumping into the process of working. Now it has to be in conjunction.
I think this is how most quick projects are executed. You could probably find that, some people have a checklist that they go through when they are working on such like a thing. and when the project is quick, there are almost similar learnings.
Deep resources within the figma community.
I have used some incredible resources within the figma community, I used especially two free community projects to think about how I am going to grow mine. To think about the colors, typography, icons, and other elements. I was so impressed to notice some attention to detail from these creators, and it gave me insight in how I can name my tools, organize my pages etc. one of the best tools is Landify UI Kit.
Name your X to iterate.
I learned this process back when I was doing graphic design, as a powerful concept to imagine visual directions. when you name a part of a design or a layout in your big design, you are able to imagine different directions that it could take. Because of this freedom, I could quickly ideate a few directions that my layout could take.
Just work on the interesting part first.
when I started working on the UI, I found that after really flexing a few ideas on the header, I quickly got stuck on my next part of the UI, it’s then that I decided, for the quick framework that I had decided to follow, I will just pick the most interesting part and execute on it. I shall not follow it chronologically.
Creative confidence
I have learned the power to execute on an idea that drops in the mind, even when it looks as though it’s stupid, you just have to trust that if you follow that hunch, something will give! So if an idea drops in the mind, you best pursue to see where it goes.
the challenges
the art direction and the copy writing for the front page wasn’t tight.
A few more things.
- Tools I used — figma community files, icon packs, webpages
- Research I got — some dribbble shots I refferenced
- Things I learned -
- I learned about how to create global styles — Type styles and color styles.
- How to create a case study based on the context of your problems.
Creative work as a work in progress
My insight is that creativity is a work in progress. Everything you make today, you can improve upon tomorrow, you can tweak upon tomorrow, and it never stops.
Update
I finished the Landing Page, a day later I hope to do a proper deep dive in the project UI and the lessons as well as the challenges I encountered
