Illustration Style Website – Responsive Speed Design and Code
Hey Guys! I just want to say a huge thank you to all of you that’s subscribed to my channel, we just hit 100 subscribers! I plan on continuing to provide variety content on my channel focusing on Web design, Ui/Ux and front-end developement! I appreciate the support and Let’s try to hit a 1000 subs this year! That’d be awesome! Once again – Thanks everyone for the support. 😀
Today i have a speed design and code video for you guys for an Analytics Company. This website is created using Flat style illustrations, This is my first time doing a speed design + code – Took me about ~2 – 2.5 hrs to complete this. I hope you like this speed art to code video, have a great day and I’ll see you in the next one!
This is not the most efficient way of coding, and i may have repeated a few lines in some classes by mistake – but it get’s the job done for now :D. And i have added the responsive part for mobile – if you would like to have it responsive for mid size screens, use the same process and change the layout to your liking. To follow my code use 0.25 speed. Enjoy! Please like and share this video if you enjoyed it – and don’t forget to hit subscribe – I post new videos every week! 🙂
#speedcode #uidesign #designmedium
Source Code:
Subscribe:
Social:
Dribbble:
Instagram:
Illustrations used from :
They have some really sweet Illustrations – and is completely free to use for personal and commercial projects! I recommend checking it out for your design projects!
Software used:
Design: Adobe XD
Code : Visual Studio Code
Music provided by NCS:
Track: floatinurboat – Spirit of Things [NCS Release]
—————————–
Track: Floatinurboat x Chris Linton – Holding On [NCS Release]
Music provided by NoCopyrightSounds.
Watch:
Free Download / Stream:
——————————–
Song: Ship Wrek, Zookeepers & Trauzers – Vessel [NCS Release]
Watch:
Download/Stream:
The background image for Analytics Made Easy was made by you? Or you found it somewhere else and if so where?
Cool.. but doesn't explain anything…
when you have a deadline in an hour
What was the purpose of the grid in the UI? Didn't seem like you even used it?
I uploaded but saying stylesheet is missing solve the problem please
Came here because I made a similar design and had some problems writing clean and perfectly working CSS code. Thanks
This is a dream…
mark一下
Thank you very much. I was searching that how to use illustrations in webpage. And your video helped me so lot or i can say completely. thank you
This is REALY Amazing!
Now this is what u call a front-end developer
Amazing, great job!
it will be really helpful if you dont fast forward it. still helpful. Thanks.
How long did this take?
Please what is song name in this video
Can I get the code to copy it to complete it quickly
The video itself was superb but the music is so obnoxious
Really nice . Awesome . Did you also know backend design?
Please decrease a little bit speed pit at 2 please or low
Can u plz simply the process of converting design in code plz it would be helpful
My Intro Image does not align correctly with the text.