Need help before buying

[bambinou]

Hello,

 

Photoshop became too expensive for my wife and I nad we were looking for a cheaper alternative, it seems that Affinity might be the one.

 

Before buying I would like to know if it is possible to create mobile or website designs with the app and export it in html/css automatically, will this software does this please?

 

 

Also what is the main difference between the designer and photo app.

 

I only want to do web designs.

 

Thank you.

 

 

Bam

[Callum]

Hi Bambinou,

 

Welcome to the Forums :)

 

Neither of our apps can export to HTML or CSS I'm afraid.

 

You can see the difference between the apps here: https://forum.affinity.serif.com/index.php?/topic/9233-difference-between-designer-and-photo-whats-4-me/

 

C

[bambinou]

Thank you for the reply.

 

I see...this is a problem, so how would you have a mobile app design work flow if you can only export your designs as images?

 

Thank you.

[v_kyr]

Mobile app design is here done via UI design prototyping/sketching, aka making UI mockups, storyboards and wireframes etc. which then will be later implemented/coded for the destination platform with corresponding dev tools by using the device's UI counterparts. - BTW initially mobile application development isn't first of all HTML/css web based, the later is just another simpler way it can be done, among many more powerful possibilities.

[bambinou]

Thank you for the reply.

The problem is that just using the designer tool to make just a mockup is a bit sad...

With photoshop you can design the mockup, and with a few plugins like http://exportkit.com/ you can then inject css(even php code) and export your whole layout responsive-ready in html and css which you then import all beautifully made in a mob app designer like intel SDK.

 

I was looking for a photoshop replacement but I think it is not going to work...if I need to use a lot of external tools to achieve the above result then I might have to come back to my old ways.

 

Now if the answer is that Affinity designer does not have the capability to match the power of photoshop plugins like exportkit, then i won't be able to work efficiently.

[Richard S.]

AD is a vector design app, and not intended to be a RAD IDE.

[v_kyr]

Thank you for the reply.

The problem is that just using the designer tool to make just a mockup is a bit sad...

With photoshop you can design the mockup, and with a few plugins like http://exportkit.com/ you can then inject css(even php code) and export your whole layout responsive-ready in html and css which you then import all beautifully made in a mob app designer like intel SDK.

 

I was looking for a photoshop replacement but I think it is not going to work...if I need to use a lot of external tools to achieve the above result then I might have to come back to my old ways.

 

Now if the answer is that Affinity designer does not have the capability to match the power of photoshop plugins like exportkit, then i won't be able to work efficiently.

 

That exportkit one looks more like a website design tool plugin, than a common general app tool. Meaning it seems to lack other programmable mobile app UI elements and is more focused on website related designs here. - However, no AD/AP don't offer such things yet and you have to look at other tools for such purposes, like explicite Web Designer software for the platform you intend to use it.

[bambinou]

Hello and thank you all for the replies.

 

So let's say I am given a UI UX design of a website by someone using Affinity designer, what is the next step from there? I am trying to understand the workflow from that point onward as I have been taking courses of UI UX design using the above tools.

 

My goal is simply designing something and have it cut into an html/css template. I am not looking at anything else(no logic implemented).

 

Is there any external tools I could use with Affinity Designer in order to achieve this result? As i do not want to code my design manually into html /css or this will cause me  to the job twice(which exportkit was successfully solving but it is expensive...).

 

The programmable part like adding php is not something I need as I can add this myself at the end when I have a working html/css template.

 

I understand Affinity Designer to be just a designer tool but I am trying to work out how designers using this tool manage to output a working html/css template of their work without using exportkit.

 

 

Thank you.

[v_kyr]

Well since most design tools export assets here into mostly common image formats, you would next have then to (re-)use those created and exported assets in the way you intend to use them.

 

For website creation it depends how you like to work here, meaning if more manual handcrafted for HTML/CSS with some appropriate plain editors (Brackets, SublimeText, Atom, Phase5, Notepad++ ...etc.) or with more WYIWYG based tools (Kompozer, Dreamweaver, MS Expression Web, Xara Webdesigner, BlueGriffon, Flux ...etc.).

 

For design software, which comes along with plugin/scripting APIs, there are often also some third party tools available, which then allow to some degree to do things similar like you did before with PS and that exportkit. - See for example ...

• Sketch and Protoship though it seems to be still under development
• see also here
• or this how to use article

In short, there are probably many tools for such purposes flying around on the net (for Mac or Win or both), so you best do some finer grade Google search after those topics, in order to get a better overall overview!

[bambinou]

Thank you for the reply and links.

Yes I did some research on Google and everything kept pointing to Sketch but I am on windows...This affinity designer tools looks superb but the html/css conversion to be done by hand via an IDE is overkill, sad as I would have loved to buy it...If they could have done like in sketch, an html and css export it would have been fantastic.

[v_kyr]

Well maybe AD will get in the future something like this, I don't know.

 

On the other side there are a bunch of similar collaboration capable web tools in this Sketch regard, some of them also seem to have desktop versions for Win etc., see for example the postings here. However, most of that stuff is somehow (at least in my eyes) Me-Too based, or jumping on a actually popular running UX-UI train, which is in fashion now!

 

If you are instead after a Win tool which does and offers most things in one package, take also a look at Xara Designer Pro X, this one has beside vector and image also website creation capabilities.

[bambinou]

Wow, this xara software seems amazing, thank you so much!!!