Creating a personal brand is one of the ways to differentiate yourself from others and increase your online presence. So, I decided to build one for me. Let's dive into my creative process of how I create a personal brand.

Process

Finding a brand name

It is hard to find a unique brand name. Previously, I am using GanuDev as the brand name. GanuDev is coming from my birth state, Terengganu, and developer. It looks pretty cool to me.

But then I realize one thing, which is I love design more than code. So the word Dev is not fit well. GanuDes is not sound very good as well. Finally, I made my decision to use my name as the brand. Muazzim. It does sound unique and rare too.

Logo sketch

The next process is sketching the logo. I love using a letter as a logo and decided to use the letter 'm' as the base logo. The main idea is that I want the logo to be simple and easy to recognize as possible.

Focusing on simplicity, I decided to use a textbox as inspiration in the logo.

Digitalise the logo

It is time to digitalize the sketch. Using a combination of big and small bordered square, I created the textbox. For the letter 'm', I use a combination of shapes, boolean operation.  After a few tweaks, the final logo presented a custom typeface with the letter 'm' in a red textbox.

Custom typeface

I like the custom 'm' letter that I have created. So, I decided to design the whole alphabets. Using only Figma, I can easily design the entire alphabets and number set. However, this typeface is only for the logo creation, not in the copy design. You can see the blueprint and the final result below.

Variants

Happy with the result, I then created the variants of the logo. With different variants, I can make sure that my brand is always visible anywhere.

Animated logo

Using Figma Smart Animate, I can create an animated logo easily and use Kap to record the animation and export it as a Gif.

Styleguide

A brand is not just about a logo. It should also come with a complete guideline for the colors, typography, and icons.

What's next?

It was fun to create my brand identity and applied across a website, social media, and side projects. This personal brand is just a starting point. It is still far from complete. So next, I will focus on adding a set of illustrations to my branding and release V2 of my branding.

2020 has been a great year. Theres a lot of great tools for design and no code has been released despite the challenge that the world is facing right now. To get started with 2021, I would like to share 15 best design and no code tools that you worth to look up in this year.

1. Figma

Figma is the real time collaboration and the best (my personal favourite) UI/UX design tools. There’s already many great design tools out there such as Sketch, Adobe XD, Framer, Invision and so on. But why Figma is the most exciting to look up in 2021?

The reason is, they announced another exciting new feature to be released in January this year which is Interactive Components. This will be a game changer for design tools as we will able create interactions on the components level with ease. I believe they will release more exciting features in this year as well.

You can read all new feature announcement here.

2. Spline

A new 3D web design tool. It is the first 3D design tool that i think any designer can understand. I’ve tried it myself. The interface is so easy to understand and i can really create almost any 3D object with Spline. You can export the object as image, video, or generate preview links that you can embedded into your websites. We have seen that 3D becomes a new design trend last year. As designer, you should try Spline if you really want to embark in 3D design trend.

I can easily create a Figma logo using Spline in just 10 minutes. 👇

3. Dorik

Dorik is the no code website builder. Another web builder? It’s not what you think until you try it first. It is a flexible & easy-to-use nocode website builder with 120+ UI Components and 12 beautiful templates. To make it easy, Dorik is like in between Webflow and Carrd. With a beautiful and easy to use interface, you can really create and publish a nice website in minutes.

Some cool templates can be seen here

4. Glide

Glide lets you build an app simply from Google Sheet without writing single line of code, and its free. Officially launched in February 2019, Glide constantly release a lot of exciting features. With free plan, you can create unlimited apps with of course some feature limitations. Glide could be a really great tool to create MVP of your own products. With its huge templates library, everyone can really start creating an app with Glide.

You can get templates at here

5. Magma Studio

Magma Studio is a web-based digital art collaboration tool. It allows you to create and collaborate in making digital arts and paintings in real time with others. To make it short, it is Figma for digital arts. With free plan you’ll get unlimited basic drawings, basic brushes, stylus pressure support, up to 30 users/session and many more. You can see full pricing here.

If you’re into digital arts, you should give Magma Studio a try.

6. Rive

Rive is a real-time interactive design tool that allows you to design, animate, and integrate your assets into any platform. That’s sounds really cool. Once signs up, you’ll gets access to the free Individual plan. You can create unlimited private files and share public files with the community. I haven’t try Rive yet, but I can see it is a really powerful and easy to use animation tool. It is currently open for beta. You can get a hand of its beta version here.

7. Play

Play is a new no code app builder for iPhone. Yes. With Play, you can design and create apps using your iPhone without writing a single line of code. With its very intuitive interface and all the cool features they have shown, I really can’t wait to get my hands on it. Play is currently in private beta, so you need to request for it to get you into the list (I haven’t get my access yet).

8. Quarkly

Quarkly helps you create websites as quickly as a website builder. And as beautifully as a graphic editor. Imagine that you can design, create and build websites with just using one tool. That’s what Quarkly is made for. Combining both design and development features, Quarkly is really worth to try. It is now in beta, and you can easily try it yourself. And the best part is, it’s free! You’ll get access to all Quarkly features during beta.

9. Bildr

It’s the Figma of nocode. With Bildr, you can easliy design and create reusable components that you interconnect into a fully functional web app. What so crazy about Bildr is that they claimed that Bildr is built and maintained entirely with Bildr itself. That alone lets you see what Bildr is capable of. It is still in private beta, so you need to request for an early access. I’ve applied mine last year, but until now I haven’t got my access. But yeah, Bildr is definitely worth to look at in 2021

10. NoCodeApi

NoCodeAPI is a tool that lets you connect to third-party APIs without any backend. It is super easy to setup and integrate the API to your own application. It has free plan which comes with access to all available APIs, unlimited applications HTTPS Encryption, and 900 API requests per month. Of course, if you want more requests, you need to subscribe the paid plan. With NoCodeAPi, it is really easy to setup and test APIs with your application.

11. ClipDrop

ClipDrop is a AR copy paste tool that let you extract real objects, people, drawing, and text which then can be paste to any other website and apps like Figma, Photoshop, Keynote and more. It is available on Android, iOS, macOS, and also Windows. From the demo, it looks really cool as you can extract the real objects by simply use you mobile. No more Photoshop any any other third party tools just to remove the background of the object. ClipDrop subscription start at $79.99 per year to get full access to all features. Although it offer free tier as well, but it comes with limited number of Clips that you can extract.

12. Bravo Studio

Bravo Studio is the native app builder that turns your Figma app prototype into native iOS and Android app without writing code. You can turn design components into native app components with Bravo Tags. You can also connect to real data from Airtable or REST APIs. To preview your app, you need to download Bravo Vision app to mobile. With free plan, you’ll get unlimited projects, but with limited numbers of shares and builds per week. To get unlimited builds and shares, you’ll need to get the paid plans.

13. Draftbit

Draftbit let you create, customize, and launch mobile apps all from your browser. The core of apps built will be React Native apps. Imagine that you can create your own React Native app without any coding required. Everything is just drag and drop like what any other design tools thats you already familiar with. It’s also still in beta right now and you need to request the access. I’ve tested it and personally I really like the tools. One note is that you will need to use Expo to preview your app in your mobile.

14. Pory

It is similar to Glide, but the approach is different. Pory lets you create webstites from Airtable without writing any code. What you need to do is connect your Airtable base with Pory, do some field mapping, and that’s it. Your website is done. With free plan you can create unlimited website that hosted on pory.io subdomain. If you want to use you own domain, you need to subscribe to Pro plan that give you additional premium features.

15. Modulz

Modulz is another cool visual code editor where you can design, develop, document and deploy your design system without writing code. It is a bit different from Quarkly as Modulz focus on close the gap between design and code by produce accessible, performant, production-ready design systems. We can see that Modulz is a tool to create and deploy the design system, not building the functional web apps. Modulz also currently in private beta. So, we don’t know yet about their full features and pricing.

Honorable Mention

Some of other worth to mention tools that I personally like

1. Carrd

Carrd is simple, free, fully responsive one-page sites builder for pretty much anything. I really love how simple and easy the tool is. I even built my personal website muazzim.com using Carrd. Moreover, Carrd offer a really cheap Pro plan that start from $19 per year. With pro plan, you can connect to your own custom domain, embedded forms, add Google Analytics tracking and more. Carrd is really worth to use for those who wants to start building websites.

2. Bubble

I can say that Bubble is the most powerful no-code platform for creating digital products out there. There’s so many great product and startups built with Bubble. The tool itself is definitely powerful. You can design, create, and deploy web apps all within Bubble. However, the learning curve is quite high. So, if you coming from easy to use tool like Glide and Pory, you may need take a time to get familiar with the interface and all the features they provided.

3. Vectary

Another great and easy to use 3D design tool. Vectary lets you create and design for 3D and Augmented Reality objects, all in browser. Vectary is more matured compared to Spline. Each tool has their own pros and cons. But one thing in common is that both Vectary and Spline is really easy to understand and use. As a designer that mainly creating 2D designs, I really love to see this kind of tool available in the market.

4. Anima

Turn high fidelity prototypes from Figma to developer-friendly HTML, CSS, and React code components. It comes with Figma plugin, that we can use to setup our prototype to be export to code. I only try this once before. Lately they just release Anima 4 with more polished interface and features. So, I can’t wait to get my hands again on this tool.

5. Boomla

Boomla is a free forever web builder. Yes, you read it clearly. It is FREE. You can use Boomla to create unlimited websites with you own domain. How crazy is that. You only need to pay if you want to add advance integrations or increase the storage limit. It makes Boomla is the most affordable web builder that offer so many premium features in the market.

That’s it! 15 design and nocode tools that worth to look up in 2021. If you enjoy reading this, please give a claps.

Also, let me know in comments if you have any other great tools that are exciting to look at this year.

Hi, I’m Muazzim. UI/UX Designer from Malaysia. Currently working at one of the best Hong Kong startup, Vanna. In this writing, i would like share on my journey in this challenging year 2020. This will be a really long and boring writing, so feel free to leave it. But, if you really interested to know the journey that i’ve been through, make sure you read until the end. 😆😆😆

The Beginning

I’m gonna be father!

The beginning of the year, I was shocked by happy news which is my wife is pregnant!! We both happy and can’t wait for our baby to come out to life 😆.

COVID-19

We though live normally, but then COVID-19 strikes our country. The Malaysia government has announce the Movement Control Order (MCO) across the country. At that time, only one person is allowed to go out for foods and groceries.

Work from home

I was forced to work from home (at this time I was still working at Dyson). I’m so glad that the company really care about their employees and take this approach. My working time become flexible and I can really take care of my wife.

Move out from Johor

It’s almost mid year, and the situation is getting worst. We afraid that this situation might be last until end of the year. So, we decided to move out from our rent house and go back to my wife’s hometown at Kedah.

New life

Since beginning i really love doing UI/UX Design. Even when i was working at Dyson as Web Developer, I’m volunteer my self to do all the designs for every of our projects. In Q2, I decided to start looking for a job change, and retires myself as web developer (just kidding about the retirement, I will be always code).

Got few interviews

I think i sent more than 30 applications through job platform like Linkedin, Jobstreet, and Glassdoor. I must said that UI/UX Designer role is quite high demand in Malaysia. I even got interviews from some of good companies like Zalora, Razer, HP, Celcom, Petronas, and Vanna (place where I’m working currently).

Yes. I got rejected on my very first interview at Zalora. It makes me realise that I need to keep learning and improving myself in order to get my dream job.

First assignment

Passed the first round of interview with Vanna. They giving me an assignment. The assignment is all about designing screens for their upcoming product, and I only got 2 weekends to finish it. Luckily, I manage to deliver the assignment on time despite having a lot challenge as my wife is already at her 8 months of pregnant.

Officially become a father

On 2nd September, 2020, my little princess is safely born. I think I am one of the happiest person on that day. We name our daughter Khalisha Azzahra. She’s so cute like her father of course 😝.

New responsibility, new challenge, and new experience for both of us.

First presentation as father

While still happy with the birth of our daughter, I had to present the assignment that I worked on to Vanna. I’m so glad that they giving me a few days for me to get prepared. Basically I did the presentation during my paternity leave. So, I can really focus on that presentation.

Got the job!

I’m so blessed. That’s the only thing i can say at that moment. Vanna has offered me with the job and i accepted it! All the works i did before is finally paid off. On 19 October, I’m officially a full-time UI/UX Designer at Vanna.

Wrap up

2020 has come to end. A lot of things happens. Everyone struggle in this year. Some loss their jobs, some loss their family members due to COVID-19. I’m really grateful that all our plans goes pretty well.

Ready for 2021

It seems the situation will be continue in 2021 too. We need to keep moving forward to survive. As for me, I have started to plan my 2021 goals. It’s a bit sad because I only manage to complete 35% of 2020 goals. So I target that for year 2021, I will try my best to complete 100% of the goals.

Due to COVID-19 pandemic that strikes our world, I have forced to work from home. While working from home, i have more flexible time and of course more free time. Thus, i decide to do my own redesign project. Project that i decide to do is to redesign the Google Finance portal. In this article, I will tell how I completed this project.

Process

When it comes to redesign activity, we have a few processes involved. This is my process in redesigning UI (every designer have their own process).

Usually i start with Design Audit, then start creating low fidelity wireframe, follow up with high fidelity wireframe. Next, i’m creating a design system so that my design process will be much faster. And lastly, i will create an interactive prototype.

Let’s start with the processes.

1. Design Audit

In this process, I’m start with looking at current Google finance portal. During this activity, I will focus on reviewing not only the aesthetic, but also the experience and the easiness when using the portal. It is very important for me to know the entire portal to understand how the portal works. I take screenshot for each pages in different viewports (tablet and mobile).

With Figma, I can take auditing process to whole new level. I put all screenshots and arrange it according to the page and viewports as shown in the image below.

Once i done arrange all the screenshots, I will use Comment feature in Figma to define all possible UX problems in each page.

Here’s a few problems that i manage to identified

• The look and feels of the portal is just the same with normal google search. Compared to Google Trips portal, it has a nicer design and feel more like a single Google application.
• Inconsistency in ui design between desktop and tablet/mobile view. This will make user confuse with the interface when they access the portal from different device
• Navigation tabs in desktop view is not in ‘fixed’ position when the page is scrolled down
• In some cases, stocks displayed are repetitive. This can be seen when the user add the stocks that has been in the ‘You may b interested in’ section. The stocks will add into Watchlist, but it will still remain in that section as well. This cause the list to be longer, and no new recommendation for stocks.

2. Low/Med-Fi Wireframe

Based on the audit, I will start thinking of the solution to solve the problems that already been highlighted. Usually, i will look for design inspiration at site like Uplabs or Dribble.

Taking Google Trips as my inspiration, I start to draft my wireframe.

So what is wireframe? A wireframe is a simplified visual representation of a layout for an application’s interface. It can be represented as the architectural blueprints of the application itself.

Type of Wirefame:

1. Low fidelity
2. Medium fidelity
3. High fidelity

Low fidelity or low-fi wireframe is a just quick sketch of our ideas. It usually just a white and black sketches on the paper. But, for this activity, i will skip the paper sketch and jump directly to next level of wireframe that called medium fidelity wireframe. The reason is i already have a good reference for my idea which is Google Trips portal.

Medium fidelity wireframes is a more detailed and realistic UI components compared to low-fi wireframe, and usually it is created in monochrome or grayscale palette. I start by putting blocks that will show roughly the layout, size and position of each elements. On a single glance we can already see the entire layout of the screen itself.

3. Design System

Creating a design system or style guide is an optional process. You don’t need to have a design system to create a hi-fi wireframe. But it is good to have as it will make your design process much faster and save a lot of your time.

So what is design system? Design system is the single source of truth which groups all the elements that will allow the teams to design, and develop a product. It will consist not only the graphic styles (colors, fonts, illustrations, icons) but also all key elements and components which represent the brand of the product itself.

But for this project, I will not create a full design system. I will only create the design system specifically for ‘Your stocks’ tab. Also, I want to make sure my design has its ‘Google’ identity. So i decided to refer the Google official Material Design System as well.

First I define what are the key elements that should have in the UI such as buttons, icons, texts, images, menus, and so on. Figma’s Component is just like Sketch’s Symbols(If you familiar with it). You can create reusable objects for your project. This components will act as guideline not only for designers, but also for developers during the design hand-off activity. Once we create the Component, we can duplicate it to create an instance and override its properties without affecting the Component’s properties. And if you change the properties in the Component, all instance will follow the new properties. With this, we don’t have to update manually the objects one by one.

Below is the snapshot of some components that I’ve created for this project. All of these components is created by me by referring to Material Design guideline.

There’s one last thing that is missing from the design system which is illustration. As I mention, i’m using Google Trips as inspiration. In Google Trips, we can see there’s a really nice and minimal illustration at the top. So, I want to create something similar to that but with my own creativity. My idea for the illustration is the view in the meeting room with stocks market charts display on the wall. So, i start ‘google’ a nice meeting room. Using that, i created my own illustration just for Google Finance.

4. Hi-Fi Wireframe

After done with the design system, it’s time to create a high fidelity or hi-fi wireframe. The differences between low-fi and hi-fi is that, hi-fi wireframe is focused more on its aesthetic. This is the process where we finally add colours, shape, icons, images, illustrations, and text contents.

This is the hi-fi wireframe

5. Prototyping

Lastly, it’s time for prototyping. In this process, i will use my hi-fi wireframe to create a prototype that user can interact and navigate. Prototype is very important not only for the user to test, but also all stakeholders including project manager, and developers.

Another cool thing about Figma is that, you can comment in the prototype as well. This will make our usability testing have a real time engagement between the users and designer. As a result, we can iterate our design faster before we hand over to developers to code the product.

You can view the Demo

PS: Click on the top left hamburger menu icon to select different viewports.

Final thoughts

Overall i’m satisfied with my design for Google Finance. This UX project helps me to improve my skills a lot as UI/UX Designer. I know that my design is not the best solution, but that’s is how it is. Design is a never ending process. Design will keeps evolve to solve more problems that we have not yet seen. That is also why i love doing UI/UX design.

Damai is a new way to monitor qadha prayer especially for Muslim users. With Damai, users can see prayer times, manage their prayer and fasting qadha, view weather information, and look onto their prayer insight. This project is actually initiated by one of my best friend, **Amir Farhan.** He is Android Developer and also the one who will develop this app entirely.

The Problem

As a Muslim, there’s a time we may miss our prayers due to some reasons, and its our job to ‘qadha’ what we have missed.

‘Qadha’, is refers as to fulfilling or completing those duties that one may have missed due to some reason or other.

The Goal

Developing an app for muslim people to keep monitor and manage their qadha duties not only for prayers, but also for fasting.

Tools

• Figma
• Notion
• Macbook Pro 2015

Process

My process will be different for each projects depending on many factors such as the project goals, business needs, complexity of the problem, time and etc. Here I’ll describe my process for designing this app.

1. Discovery

Understanding the core of the product

Before doing any ideation I started to gather the requirements and list out all possible core features of the product.

Core product features

• Prayer Time by user location
• Managing daily prayer
• View, add, and edit qadha list
• Weather information
• Push notification when prayer time, and to remind the user to qadha their prayer

Analyzing similar app

Analyzing the existing similar app design and puts together in moodboard for future reference. I’ve also downloads some of the apps to know what are the pain points and strength of the apps.

Features Prioritization

Prioritization of the features ensure that we can focus to deliver the most important features first. From the features, I have list out all possible screens that i have to design and categorized them to Must have, Good to have, and Not required

2. Ideation

Sketching and Wireframes

We had a list of screens to cover all features so I started to sketching the designs to detail out the flows to discuss and share with developer to get feedback.

I know its not the best sketches ever, but with this I can see the rough idea of the app already.

After discuss with developer, I get started with the wireframes. I created this set of low-fidelity wireframes of all of the key screens needed

Design Review

We do design review often during this ideation phase as I’m the type who want to get the feedback fast. With built-in comment feature combined with the pencil tool, doing the design review directly in Figma is a lot easier. I categories each screens whether it is APPROVED , need to REDESIGN , or have to TRASH the screens before moving to mid-fidelity wireframes.

Mid-Fidelity Wireframes

By now I have already gathered enough information to get started with the mid-fidelity wireframes. Creating mid-fidelity wireframes will also have a few design reviews and iterations as well. This is the final mid-fidelity wireframes that i have created.

3. Visual Design

After working the changes into the wireframes, it was time to proceed with the visual design. At first, I create a light theme design but after discuss with developer, we have agreed to use dark theme for Damai app.

Design System

Damai is not a big project, and not much ui screens too. So, the design system that i created is only covers the style guide, components, and icons. The design system act as single source of truth and it is important especially for a non-designer to easily look on to the design components and assets. By establishing the design system, the developer hand-off process would be much easier as well.

Style Guide

This is a style guide for Damai mobile application. This style guide only contains colors and typography.

Components

Components consist of UI elements such as cards, item list, form inputs, charts, and buttons with each of them has different states for different scenarios.

Icons

I’m mostly using Google’s Material Icons in Damai for basic usage. For a more specific usage, like showing different prayers, i created our own custom icons.

Damai Logo

With inspiration from Arabic alphabets, I created Damai logo. The process is start with sketching, turn the sketch into vector, and finalize the logo design.

Final Logo

By adding some effects(combination of Inner Shadows and Drop Shadows), i make the logo to be more stands out

This is how the logo is animated in splash screen

Final Design

After a few more iterations, I designed the final screens with Figma. I conducted prototype validation during the process to determine the best user experiences of the app.

My aim was a clean, modern look that helps users fulfill their goals quickly. Also helps a new user especially a non-tech user to pickup the interface easily.

Developer Hand-off

The next step would be to hand-off the final prototype screens and other assets to developer. Figma has a very powerful developer hand-off tool built-in, so we don’t need to use third party tools like Zeplin to do the developer hand-off.

Inviting developer to Files and Prototype

In Figma, we can invite collaborators to a Prototype, or to the File itself. Inviting developer as a Viewer is enough because we don’t want them to mess up our design works 😝

Viewer can:

✅ Select layers from the Layers Panel or Canvas

✅ View properties of selected Layers in the Code panel

✅ Copy text content from Text objects

✅ Measure distances between object in the Canvas

✅ Add or reply to Comments in Files and Prototypes

✅ View Prototypes in Presentation View

✅ Access Components via the Go to Main Component link

Keeping files organized

As developers get access to design files, which are filled with dozens of in-progress frames, iterations, components, and more, it’s good practice to communicate which parts of the files are ready for implementation and which are still being worked on.

Here’s my way of organizing pages in Figma

Code panel

The Code panel allows Viewer to see how to express objects in code. This will help developer to see the selected objects properties in following formats:

1️⃣ CSS (CSS only, no HTML)

2️⃣ iOS (Swift)

3️⃣ Android (XML)

Whenever viewer is in Code panel, they can easily measure the distances between object in the Canvas. The red lines with the distances will be displayed when you hovered on it. This make developer easier to refer on the measurement of the components.

Wrapping Up

Creating a design for mobile app is fun and challenging project. Through ideation process, I was able to validate Damai’s core features and also discover what most people want to have in managing their qadha.

I’m happy with the end result which help me improved not only my UI design skills, but also my UX research skills.

Next steps

Although this project concluded with a solid prototype, I would still like to continue testing and improving the design. The app itself is still in the development, and I always there to support the developer with the testing.

Once Damai is launched, i hope everyone can support us!