UI/UX: How did I get started

Tushar Jain — Tue, 13 Apr 2021 11:17:39 +0000

In this blog I'll share my 1-year of learning journey as UI/UX designer and what steps did I follow and where I went wrong.

Who am I?

I'm Tushar Jain, a Full Stack Web Developer⌨, and a UI/UX designer🎨, currently pursuing my BTech course in Computer Science and Engineering from the Indian Institute of Information Technology, Ranchi. I've been into web development for a year. Besides this, I also do Competitive Coding and that too from the last year.

Background

Wireframing and UI and UX designing is the first step towards any web/app project but many beginners skip this step and start coding their project without having any basic wireframe in the first place which in return results in degraded productivity and delivery time of the project.

My Journey as a UI/UX Designer

It's been a year since I started with designing stuff and what I feel is that this is an emerging field in the industry. I started my journey with Figma and first of all, I practiced designing only landing pages for a month. In September last year, I got an opportunity to participate in a Wireframing contest in my institute and luckily I managed to win that contest which boosted my confidence.My submission for that contest - link

I also tried my hands in Logo Designing and these are few designs that were accepted in some projects :

Things which I learn

UI and UX are two different things.
All you need is good common sense to start UX designing and good taste in color selection and color contrasts to start UI designing.
Practice more and always showcase your work and take feedback from others.
Try not to forget about corner cases: 404 page, Loading Design.
Keep designs minimalistic but meaningful at the same time based on the client's requirement.
Keep yourself updated with designs trending in the market
Making a profile on Behance or Dribble is important
Keep Frame/Group/Shape names meaningful in Figma

My Projects

These are some of my projects which are designed by me 🚀

My Portfolio Website
GeekNote - A place for all your learning
House Of Geeks Webapp

Resources which I use

Software : Figma
Learning : Figma Official Documentation
Course : Complete Web & Mobile Designer in 2021: UI/UX, Figma
Fonts :
- I - (Poppins, Montserrat, Raleway, Manrope)
- II - (Sora, Crimson Pro, Inter )
Icons :
- Remix Icons 2.5.0 https://www.figma.com/community/file ...
- Zest Social https://www.figma.com/community/file ...
- Zest Free https://www.figma.com/community/file ...
People whom I follow :
Color Palettes : Color Hunt (Free and open platform for color inspiration)
Free Illustrations: https://freeillustrations.xyz/
3300+ Free Vector icons : Unicons by Iconscout

Connect with me

Similar Blogs

How I get started with Web Development

How I started my Web Development journey

Tushar Jain — Wed, 03 Mar 2021 12:01:43 +0000

In this blog, I'll share my 1 year of learning experience 📊 and How I started my Web Development journey with a glimpse at some of my projects and courses/resources that I followed in this journey and few tips from my side if you are aiming towards the Web Development domain.

Who am I?

I'm Tushar Jain, a Full Stack Web Developer⌨, and a UI/UX designer🎨, Currently pursuing my BTech course in Computer Science and Engineering from the Indian Institute of Information Technology, Ranchi. I've been into web development for a year. Besides this, I also do Competitive Coding and that too from the last year.

Background

So I joined my Institute in 2019 and in my first two semesters of my college life I just enjoyed learning nothing as I was just trying to take a break from that JEE phase of my life 😅 but somehow I managed a decent GPA. Then I came to know about this web stuff at the end of the 2nd semester and decided to take a dive into web development before the lockdown last year. By the way, I was never into this coding or any HTML stuff in my school life😐.

How I started?

I started my journey by learning HTML5 and CSS3 in parallel from W3School. (Tip: Don't Try to learn everything in the first go it's an ongoing process)

And wrote my first HTML script (Code Link, Site Link) with the basic knowledge I got in two weeks from the W3school. (Tip: Try sharing your work with others to get feedback).

From there I started learning Javascript from W3School. It took me few weeks from there to gather the required knowledge of javascript to build a TicTacToe Game. So In a month, I was having the basics of HTML+CSS+JS( although I didn't learn everything, I just learn those things which were required).

In April our Institute's WebD community introduced a Hackathon in web development with the problem statement that we've to develop an E-Cart system. Although I was not having any knowledge of Backend but I registered in it (Tip: Hackathon is a great way to learn something new in a fixed interval of time and I take part in Hackathons whenever I get time.).
And I managed to learn PHP and SQL and managed to make my submission for the Hackathon. Here is my submission and Know what?? I came First in that Hackathon 🥳

After that, I came across the MERN stack in August last year (MongoDb + ExpressJS + ReactJS + NodeJS) and started learning this stack and made few projects using this tech stack. Currently, I'm trying to understand this tech stack more.

Few of my Projects

GeekNote: A web app that provides organized notes and resources for our batch with a separate blogging system.
hG: Web app aimed to portray the Technical Society of the Institute.
IEEESB Webapp :
A full-stack website for all utilities of the student branch.
E-Cart System E-Cart system with an automatic invoice generation system
Event Broadcasting System: Portal which aimed at making a single event broadcasting platform for different clubs of the institute

Resources I followed

HTML5 - W3School
CSS3 - W3School
PHP+SQL - W3School
The Complete JavaScript Course 2021: From Zero to Expert! By Jonas Schmedtmann - Link
HTML, CSS, and Javascript for Web Developers offered by Johns Hopkins University- Link
Bootstrap Framework -Official Documentation
Front-End Web UI Frameworks and Tools: Bootstrap 4 - Link
Front-End Web Development with React - Link
The Complete Node.js Developer Course (3rd Edition)By Andrew Mead, Rob Percival -Link
MongoDB - MongoDB University

DEV Community: Tushar Jain

UI/UX: How did I get started

Who am I?

Background

My Journey as a UI/UX Designer

Things which I learn

My Projects

Resources which I use

Connect with me

Similar Blogs

How I started my Web Development journey

Who am I?

Background

How I started?

Few of my Projects

Resources I followed

Connect with me ✨