Skip to main content

How to Design a Website as a Developer - #36

Published: October 12, 2020 | DevDrawer

Estimated Reading Time
2 minutes
Video Duration
1:47:34 minutes

Become a Patreon to show support and get exclusive access to content:

Read the full description for an important update.

Due to the popular response to the short clip of my design process in the video I did for freecodecamp, I decided to do a full video of my design process. In this video, I show you what steps I take before ever touching code. I use Adobe Illustrator for this project but you can use any design tool you have. The process is the same.

Join me for my first video tutorial where I actually design a website from scratch using Adobe Illustrator. I show you how to create a grid system based on Bootstrap's 12-column layout, how to create multiple designs, and how to reuse elements.

00:00 Intro

04:26 Creating A Grid (AI Guides)

08:37 Creating Elements and Design Patterns

13:31 Creating Our Header and Hero

28:55 Creating Our Content

01:03:02 Creating Our Footer

01:20:23 Creating A Second Page

GitHub Repo for files and Final Design:

Applications Used

Adobe Illustrator:

Computer Hardware:

Windows 10 Pro: (Amazon)

Samsung 500GB External SSD: (Amazon)

Samsung 970 EVO Plus SSD 1TB - M.2 NVMe: (Amazon)

Rosewill Hive-750S R750W PSU: (Amazon)

Phanteks Eclipse Tempered Glass Case: (Amazon)

MSI Arsenal Gaming AMD Ryzen Motherboard: (Amazon)

MSI Gaming GeForce RTX 2060 Super 8GB: (Amazon)

LG 34UM69G-B 34-Inch 21:9 UltraWide IPS Monitor: (Amazon)

Corsair 64GB (4 x 16GB) DDR4 Memory: (Amazon)

AMD Ryzen 7 2700X Processor: (Amazon)

Dell XPS 15 9500 15.6" Laptop / Windows: (Amazon)

Lenovo ThinkPad T15 15.6" Laptop / Linux: (Amazon)


Fujifilm X-T3: (Amazon)

Fujinon XF18-55mmF2.8-4: (Amazon)


Audio Technica AT2020: (Amazon)

Blue Snowball iCE: (Amazon)


I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to and affiliated sites.