How to Design and Code a Responsive Illustration Style Website - Part 1

This is part 1 of 2 for a responsive illustration styled website for a design service team. We will be creating a landing section with a nice illustration, a team section highlighting each members skillset, a about section showing the format of the design assist users will receive monthly, a call to action sign up section and a footer. Hope you enjoy :D

Have a great day and don’t forget to Like,Share the video and Subscribe for NEW VIDEOS every Week!

Project Files:

Illustrations:

Used:
Adobe Xd (Design)
Brackets (Code)

Previous Video:

My Links:

[alexandru.pintican]

Your grid layout is not centered, you have unequal margins.

[mariospittas]

Should we name our layers for the project? Is it a good practice for Adobe XD?

[mariospittas]

Thank you very much. This helps me so much!

[gregfreeman]

what version of XD are you running I can't open the file

[HastDesigns]

Dude you are teaching me how to design. Thank you.

[jawadsikander]

hi there where is the fonts and the colours i don't see that in the folder

[Samurhigh]

cool tutorials dude! thank you for the help!

[trandamihai]

Hello!

I'm following with great interest your videos about designing in Adobe XD.
I'm curious and would like more information about the grid system. I noticed in 2 clips that you used 2 different systems (links below with print v1 and v2).



What are the differences / rules? When using smaller columns and larger columns?
Is there still 960 grid or Bootstrap?

Thank you!

[ilurielteixeira]

Amazing project! Man... You are awesome! Keep doing this :)

[ElLevidente]

Do you find Adobe XD a better tool for web/app design than Sketch? Because I currently do all my designs in Sketch, wondering if there are any big advantages to switching over.

[CosminSerbanDesign]

Hey Caler, you're making me more intereated into trying out XD, the page came out fantastic, subscribed! 🤘

[shouryathebest]

Hey man, this really is a helpful tutorial. But i have a question
I have recently introduced myself to web design, i have been self-studying about web design by following tutorials on youtube and the problem i'm facing is regarding the spacing. I have no idea about the spacing and using the grid system, i'm unaware of the standards that i should follow (if there are any).
-How do you manage the spacing between the objects such as logo and the FREE icon you used
-How can i maintain the semantics and spacing within the whole document.
-why did you used those specific values for gutter and the column width.
-what should be the height of a header.

i know these require great amount of expertise, experience and skills, but man i seriously want to get into the web design and development stuff and since there's no one to guide, so i'm asking for a help here!

[ibernohoffmann]

Hello Caler, nicely job man.. congratulations. Listen, maybe you can create a video talking about your workflow, fonts, colors, how and why this choice... Love your designs, it's really great!

[dhexterpro]

Very inspiring. Can´t wait to see in code. :)

[rooiboquality]

Im sure if I would never have done anything related to UI UX but I would have watched these videos for a few months I would be a professional web designer the first time I touch my pc 😄. Awesome video love from Spain
Also how do clients pay you? I'm trying to figure out what the best payment method would be for a freelancer. Paypal transaction seems unprifessional...

[IndranilTiwary]

Hey.. caler I am really loving the design and code series.. waiting for your part 2.
Can you mentor for the path of UI/UX?

[nikhiltyagi]

This is amazing! Thanks a lot for using Adobe xd instead of sketch. We non Mac users always miss out on good reconfigurable because 99% of them are with sketch

[rektgvaur]

You are great Broo!!!!
You know everything related to design 😎😎😎😎👌👌👌

[apost]

Are you planning on making tutorials for Adobe Illustrator?

[masadamsahid]

30 mins for a desktop homepage and a mobile homepage. Great works!