Converting UI Design to code

[affinota]

Hey there!

I never had something to do with UI-Design. But now I understand, that it seems to be a rather good way to create websites. The background is, I want to get away from restrictions on the wordpress and the endless searching for themes, that have the fully freedom of design and are also responsive.

The thing is, at the end I will have the affinity (design) file and not real website. So I looked for the process of converting this stuff to code. After reading and watching some information I still don't really understand the whole process.

Designer itself do not bring this possibility, isn't it? So I must use some online services or other programs. What are you using for this (something that do NOT bring monthly subscription)?

And what about such stuff as gallery sliders or moving objects. Can this also be created in Affinity Designer and then just translated into code? I suppose, not.

Or, is the thought behind the UI-Design just like: the designer makes the design and the developer bring the whole thing to the code? So perhaps there is no real possibility to get the whole idea to the working website without coding by self, because UI-Design is not like the WYSIWYG-Editors, isn't it?

 

Best regards

affinota

[GarryP]

The Affinity software is probably not the best option for creating website prototypes.

As you have seen, because the Affinity software cannot export to HTML/CSS, all you get is a visual (non-working) example which then needs to be created again in something else, so the work has to be done twice.

You can create parts of the website with the Affinity software – icons, banners, etc. – but the ‘guts’ of the site would best be done with something else.

I think you would be better-off doing a web search for free website prototype design and trying some of the things that have been specifically created to do the things you want to do.

[affinota]

6 hours ago, GarryP said:

I think you would be better-off doing a web search for free website prototype design and trying some of the things that have been specifically created to do the things you want to do.

ah, ok, thank you! So "prototype design" is the new WYSIWYG or is it something else?

Via mockplus, figma and so on I can create AND upload the whole working website to the server (without wordpress and such providers) isn't it?

As it seems they have also free acounts.

 

It would be a great thing, if Serif offers such tool for money! I hate the system of monthly subscription in all the modern apps.

[bayustudio]

Yes, Affinity and other design app like Photoshop only produce static concept design.

Then you need a process commonly known as PSD to HTML.
For this, You need to learn about HTML & CSS. While many designers are also able to do this, this process is usually done by a different role which is a web front-end coder.

That's the common workflow in professional web development.

If you are not html/css savvy or want to do it yourself, there are also no-code page builder solutions, where you can build the page visually, point & click, drag & drop. Kind of like Affinity Publisher, but in web medium output.

Example:
non-WordPress providers: webflow, wix, squarespace.
In wordpress platform, there are Divi (paid), Elementor (freemium).
WordPress itself gradually adopts a page builder approach with its Gutenberg project.

Regarding to gallery sliders or other moving objects, usually they already available as part of its building block.

Even a lot of professional agencies also use the no-code page builder approach for faster processes and cost-cutting.

But For a bigger budget, for maximum quality, you can hire front end developer 🙂

Thanks

[affinota]

ok, thanks for the explanation!

My skills in HTML/CSS are very low, I can maybe add some things to code, but not create the whole website by my own. Till now I used wordpress, but it's restrictions and the search for good themes kill all the power. Even with Elementor (I use the free version) I feel not really free to design. The payed version of Elementor or Divi is (just as nearly every app nowadays) with monthly subscription. That's why I love Serif, it has NO monthly fees! You can just by an app (freaking oldschool).

So I thought, there must be better solutions nowadays.

Are things like mockplus and figma the way to build the design WITH code together? Or do I understand it wrong and these are just platforms as wordpress, which offer such functionality?

[bayustudio]

Ah, I see.

I'm not sure about mockplus, but for Figma, AFAIK its just a design tool that specialized in UI & web design (like Adobe XD).
We can create interactive prototypes that are clickable, multi-pages, etc, but those are just for concept presentation and still not a real website.
It can show CSS code for each element. but i think those are just for a guideline to make code conversion easier for developers. (things like size, color, border size, etc).

There are 3rd party services integrated into Figma that try to automate design to code conversion, but i have no experience with those tools.

I think in the past, Serif has a product named web plus that looks similar to your expectation.
However modern sites need to work with different screen sizes from mobile to desktop (responsive design) and also rely on CMS like wordpress. maybe thats why tools like this have been discontinued.

So as far as i know "page builders" like WP/Elementor, Wix and Webflow are the closest thing for designing web pages visually.
Webflow getting popular nowadays, i heard it can export the design to html/css, so you don't need to use their hosting.

But yeah unfortunately most those tools are subscription based nowadays

Thanks

[v_kyr]

8 hours ago, affinota said:

My skills in HTML/CSS are very low, I can maybe add some things to code, but not create the whole website by my own.

Look after tools like webflow , Pinegrow Web Editor and the like, or more general tools like BlueGriffon etc. - For responsive web designs one usually just needs a good capable text editor (Sublime Text, Visual Studio Code ... ) and some frameworks + libs like Bootstrap, jQuery etc., as far as you have some base HTML/CSS/JS/Sass coding knowledge.

[affinota]

On 6/30/2022 at 10:39 PM, bayustudio said:

We can create interactive prototypes that are clickable, multi-pages, etc, but those are just for concept presentation and still not a real website.

oook, thanks! I understand. So figma and Co. is not, what I'm looking for.

I use the free version of elementor for a while, but it's restrictions and the searching after best customizable themes is a killer for design process.

 

What is the difference between Webflow, Pinegrow, BlueGriffon and such editors as Element or Divi?

 

#Edit: wow... as it seems, Pinegrow is what I'm searching for! It's fully offline and I can just upload the whole file structure to the server. It also has many presets for the page layout, that I can just add to the page (Elementor like). The problem is, that if I want updates for the program version I must subcribe (just as elementor divi and co.). If I just buy the program it will be outdated after 1 year. So... bad... very bad.

 

Webflow has monthly fees. grrrr!

Edited July 2, 2022 by affinota
addition

[v_kyr]

1 hour ago, affinota said:

... #Edit: wow... as it seems, Pinegrow is what I'm searching for!

Well there are a bunch of such tools like Webflow and also WYSIWYG & source editors like Pinegrow or Sparkle. But most better such tools got commercialized (paid versions), or have dived into the the online/cloud based abo pay model scheme. - For past times free WYSIWYG & source editors the following here tells what for example happend over time with things like Nvu & KompoZer.

 

[affinota]

oh, yes, there was a time of Bluefish long time ago! There I made websites in tables and frames

I have not a really big problem with commercialization, but with monthly fees. Serif do it in a good way. You can buy the app and get updates AND you can buy some additions for extra money. That's a good way.

As it seems, the Pinegrow is nearly the only one, that

• offers all the visual help like Elementor,
• but is not template based,
• in a cloud or just on the server
• AND there is a possibility to buy it (without further updates) instead of paying monthly fees

Sparkle is just for the Mac and the rest seem either to have just monthly fees or to be made for programmers.

Is there something I overlooked?

[v_kyr]

17 minutes ago, affinota said:

Is there something I overlooked?

Maybe a net search & look through such Web Design Software (Builders, Editors etc.) will show some other alternatives ...

• 40 Best Professional Web Design Software Tools for 2022

• 15 Best Website Design Software Available in the Market Right Now

• What is the best alternative to Pinegrow?

• Top 10 Pinegrow Alternatives & Competitors

• Free Pinegrow Web Editor Alternatives

• ... etc.

... look through available tools, what they claim to offer and possible user reviews of those then!

[affinota]

ok, thanks! I will look for that.