From illustrator to website (WIX)

Process & Techniques
, , ,
#1

Hello all,

Thank you all for the great help on this forum and the interesting topics, I really learned a lot so far.

With this knowledge I started designing a website in Illustrator, I based the shapes on the artboard which is for Web standard. Now when I export the image (PNG) to add to Wix (https://www.wix.com/) The image automatically reshapes, and I have a hard time on getting consistent outlines on each page. Meaning that the size is slightly different on each page.

How do you convert your mockups to a working product?

Thank in advance!

1 Like
#2

Usually in UX, we either prototype using something like Axure, Invision, Flinto etc or work with a developer to build a prototype. Have you tested what you have designed? Bear in mind it’s quicker/cheaper to test in the prototype/design phase.

If you’re going to skip the prototype stage (not advised) and go straight in with building using Wix, you might have more luck posting this on the wix forums

1 Like
#3

Hey Lykc,

Thanks for your reply!

You explained the process wel, and I completely agree by first making a prototype. I did this, but the idea of the website is very simple. Their is a main navigation bar on top with 6 different topics and each topic is a new page, that’s the idea.

But I was wondering indeed how the process goed from the last stage of UX/UI, once you delivered the assets to the developers.

Thanks once more!

Cya,
Maarten

#4

What about trying to use Adobe XD at the beggining? Now you have it totally free. And you have the possibility to animate screens a little bit.

Also you can do it with Sketch: https://medium.com/sketch-app-sources/prototyping-inside-sketch-49-how-it-works-and-what-you-can-do-7a48c829f282

Other option maybe is use Adobe Muse instead Wix. You can build your web (prototipe) without knowledge in web code.

Cheers!