Setup for UI/UX Designers and Front-End Developers
Pixabuddy Setup for UI/UX Designers and Front-End Developers
New 2021 setup for UI/UX Design and Front-End Development
A good setup always matters for good productivity. This is my personal point of view.π Here is my brand-new setup for UI/UX design and Front-End Development. I want to give you the full information of my setup and give you each of the products link so, that you can easily buy the same product. Letβs start -
Device -
- π» Apple MacBook Pro M1 Chip with 8 GB RAM and 256 GB SSD Storage
Buy link - Click here
2. π Logitech MX Master 2S Wireless Mouse
Buy link - Click here
3. πΉ Logitech K380 Wireless Multi-Device Bluetooth Keyboard
Buy link - Click here
4. 7CR Wood Portable Laptop Table (The cheapest one) -
Buy link - Click here
5. Seagate backup plus slim 2TB HDD
Buy link β Click here
6. AmazonBasics 13.3-inch Laptop Sleeve
Buy link- Click here
7. AmazonBasics USB 3.1 Type-C to 3 Port USB Hub with Ethernet Adapter β Black
Buy Link- Click here
8. π High-speed Broadband connection (In my case I use GTPL connection with a speed of 100mbps )
9. π A music system ( This is totally optional, I need it because Music helps me to refresh my mind and boost up my work mood π§π .)
Design Tools - (UI/UX Design)
Adobe Illustrator, Adobe Photoshop, Adobe XD (Adobe XD Free), Figma
Get the Adobe Creative Cloud Subscription - Click Here
Figma is Free Software for everyone, and itβs live on your browser. But if you want to download and install it into your local machine, here is the - Download link
Front-End Development -
My stack = Html5, CSS3, SASS/SCSS, Bootstrap 3-5, Node.js, NPM package manager, Homebrew, React, PHP, MySQL, Git, GitHub, Visual Studio Code
All the process to set the environment like π
- Install Visual Studio Code - Download link
- Install local server XAMPP for OS X ( In my case Apple Silicon) - Open this link and download the file named - xampp-osx-8.0.3β0-installer.dmg and install it locally.
- Homebrew - Install it π Here is the full guide on how to install homebrew to follow the process and install it. π
- Install Node.js - Click Here ( Download and install it )
- React Installation - If you want to run or, create a React App on your local machine ππ» Visit this page
- Git Installation- https://git-scm.com/download/mac
Optional: I customized my mac terminal. If you want to customize your terminal then watch this video on youtube and follow the steps to customize your own.
You are almost ready with a setup like me π₯
Let me give you an idea so that you can understand how I use my technology stack.
For any Front-End projects - I use a folder structure like ππ»
π Project_name > π Assets (
π CSS ( π style.css + π vendors) +
π SCSS ( π abstracts + π base + π components + π layout + π main.scss + π pages )+
π Images ( π icons + π logo)+
π JS ( π script.js + π vendors ) ) +
π index.html
I use the node-sass compiler to compile the SCSS file into the CSS. Run some automation to build and wrap up the projects and make them ready for the launch. π
Here is something extra, I have installed laravel on my computer because Iβm working as a Front-End Developer in KiwisMedia and KiwisMedia is built on laravel framework. So, I need laravel on my local machine to contribute there.
Thank you very much for your valuable time. π Hope you enjoyed reading this blog.
Find my journey on KiwisMedia - https://kiwismedia.com/@saha
My portfolio website- https://www.pixabuddy.com/
Donβt forget to follow me on social media π- Instagram, Twitter, Behance, Dribbble, Pinterest