How do I incorporate my designs properly into Webflow

Community resources Product feedback
1

Hi guys!

I need some real expert advice/feedback.

I am relatively new to Webflow, in fact I am pretty new to web design. I have previously focused my freelance career on logo design and brand identity, but I found new love and excitement for designing websites.

I used a few web builders like Wix, Squarespace etc, which were great! but after research and a few youtube videos, I stumbled upon Webflow, which seems to be a pretty powerful tool! for me this was great, I’ve never written a single piece of code so this took my interest, I have designed a couple (small) websites already! (using Webflow)

It was now time to amp up on my web design skills and get creative, as you will see in the following screenshots, I design a high res web frame using Adobe Illustrator, this helps me get my ideas out quicker than Web flows restrictions allow me to.

As you can see in the Illustrator file I have designed the websites main page with multiple sections (ignore placeholder text). I used the background of each section and export it as an SVG, I then use my sections in Webflow and give them a background image, the background image is infact the SVG that I exported from illustrator.

So basically, I design the website (prototype) and use the background as an svg filling the ‘background image’ of a section in webflow.

Heres my problem!

I know this is not the correct way to do this or implement my background visuals into my website, however I do not know another way to do this. This method makes it hard for me to create a fully responsive website as I have to create multiple Illustrator files according to the device size I want it to be made for.

Could anyone shed some advice on how to better implement my skills in illustrator into webflow, for example, How can I make a background full of multiple SVGs whilst still allowing me to create a responsive website that looks roughly similar across all devices.

I will include my link so you can view the website for yourself.

43
432560×1522 443 KB
24
242090×1600 392 KB

https://preview.webflow.com/preview/envers-website?utm_medium=preview_link&utm_source=dashboard&utm_content=envers-website&preview=5cb67f8fad79a5eb208a31fdfce808f7&mode=preview

2

Hi @Enver_Mehmet,

Others will jump here too. But first, I recommend watching as many tutorials as possible. Go through the entire tutorial set (that’s what I did, all in one day) :slight_smile: I was so excited! It’s much better to digest in one sitting, than wait days between each one.

What you have here is multiple layers, which will need multiple types of Div layers with various CSS position.

It’s not really an easy answer, it does take a while just to create one page, with proper Div structure. It does help to know CSS before embarking on a design like this. However, if you watch the tutorials it helps. Or you can just have someone do it for you, or hire an expert here to do a video conference to show the steps.

There will be different needs when using SVG versus PNG. There’s different types of images to use; inline or background, etc… etc… It just takes time and practice.

Check out the tutorials here again: Webflow 101 crash course | Webflow University