DEV Community: Godwin Effiòng

Getting started with Figma and Setting Up as a UI/UX Designer

Godwin Effiòng — Wed, 28 Jun 2023 00:08:02 +0000

Today, I’ve started documenting my Journey starting as a UI/UX Designer. I’ll be doing this continuously as I keep learning. With my little idea as a graphic designer using Corel-draw, I’d say using the Figma Application to design, is like being on steroids and I’d be so glad to make the best out of it.

Firstly, who is a UI/UX Designer and what does it entail? UX stands for “User Experience”, and UI stands for “User Interface”. The UX is on designing user personas and flows, wireframes, conducting user research, test products on real users, while the UI designer’s job is to bring the UX designer’s ideas to life. They are in charge of designing how the product is laid out visually. So, it’s okay to say that they both work in tandem.

A UI/UX designer’s job is to create user-friendly interfaces that enable users to understand how to use complex technical products. If you’re passionate about the latest technology trends and devices, you’ll find great fulfillment in being involved in the design process for the next hot gadget. The UI/UX Designer helps create products with a good user experience. They are responsible for understanding what users want from their devices and then designing it so they can find all of its features easily without any hassle.

Before I kick start into how to set up the Figma account and then create a new file, renaming your file from “Untitled”, choosing the templates you want with different sets of presets, adding frames, working with pages, adding contents, creating and editing shapes, adding and formatting text, placing images and creating a mask, and setting up local fonts on the browser by installing the plugins and downloading the installer as pkg-file.

Then move on to working smartly with Layers, Components and Constraints, Versioning, and finally Prototype — making it interactive, device preview, sharing and exporting what you’ve designed. I’ll be writing on all of these topics as I make progress with previews from Figma, but before we continue with that in our next article, let’s take a look at “The Generic UX Design Workflow” and see how Figma fits in.

The Generic UX Design Workflow

Concepts, brainstorming and gathering Info

User Flows — How they navigate through the app, and website to get from point A to Point B.

Wireframe/Design — To help designers think and communicate about the structure of the software or website you’re building.

Prototype — To make it so that people could get to test it out on devices — Like making a “tap” on the button, they can go on another screen for instance and get a “feel” of how it’s going to work.

Share/Test/Feedback, and iterate changes based on that feedback and work with others collaboratively.

Then finally build. — This is a real generic process depending on the project, there could be more depending on the design.

Join me in my next article as we delve in properly into designing our next big Project as we focus on the user and their journey with the product.

Creating HttpCookie Class in C#

Godwin Effiòng — Mon, 07 Nov 2022 14:26:55 +0000

Here, I want to Initialize Cookie in my Login Page. Firstly, what's a Cookie? This is a piece of information that's stored on the client's machine especially user preference information like Username, Password etc.

Now, Once logged in, I want the system to pull the user's records/information and store in the cookies. You can also set the number of times for your cookies login to be active, that's storing it and holding it for a particular duration. This here, makes it persistent or non-persistent.

Since, I want to initialize it on when "Logged-In", meaning I want Login records such as Username and Password etc.("UserInfo"). So, my block of code should be inside the Login Button click btnLogin_Click of my Login Page. So, I started off by creating the Cookie with the below block of code: E.g;

HttpCookie cookie = new HttpCookie("UserInfo");

Then I Check if the cookie exists in the current request by reading the Cookie Info and displaying it and also printing the properties of each cookie object with the below code;

 if (cookie != null)
{
 //This here, prints the properties of each cookie object
 cookie.Values.Add("Username", cookie.StaffUsername);
 cookie.Values.Add("StaffNumber", cookie.StaffNumber);
 cookie.Values.Add("StaffName", (cookie.FirstName + " " + 
 cookie.LastName));
 cookie.Values.Add("Address", cookie.Address);
 cookie.Values.Add("StaffID", Convert.ToString(cookie.StaffID));

 // This here, Sets the value of cookie to current date time.
 cookie.Value = DateTime.Now.ToString();

 //This here, Sets expiry to cookie object -clears within an Hour.
 cookie.Expires = DateTime.Now.AddHours(1);

//This sets the HttpContext object for the current HTTP request.
 HttpContext.Current.Response.AppendCookie(cookie);
  }

This is how I Initialized My cookie in my Login Page, I'll be writing more on Cookies as much as I'll be getting to use it.😊

How I Opened up my new entire project and all of it's files from Git Bash to VSCode.

Godwin Effiòng — Wed, 18 Aug 2021 23:19:11 +0000

Remembering I had a task to work on, whilst using Git, I started of with firstly navigating to the directory where my projects usually are i.e xammp/htdocs, since I'm working with PHP. Then created my project folder "mkdir folder name", later created the project file and it's extension using "touch project file.extension".

Finally, opened the newly created file in VSCode using "code space and then the name of the project folder" i.e "code project_folder/" to open up the project folder and files in VSCode.😊😊