Jump to content

Affinity Designer: Advanced web design tutorials?

Recommended Posts

I've done a fair amount of web development — mostly Wordpress. Usually the projects I work on are too small to warrant being mapped out graphically beforehand. I paint with code instead and show clients live iterations on a staging site. But I want to have in my arsenal of tricks the ability to create designs graphically if I have to, so I'm looking to get into Affinity Designer's capabilities for this. Mostly I use AD for logos, so I'm not a complete beginner, but I don't find any tutorials so far that could get me up to speed with the basics and advanced features of using AD for graphical web design. Particularly of interest is the constraints feature for responsive design.


Can anyone point me in a good direction? The few tutorials I've found ostensibly on AD and web design haven't really been about web design as such, and I didn't find one that uses v1.5+ with its new features.


I'd appreciate any help or leads.

Share this post

Link to post
Share on other sites

Version 1.5 is in BETA at the moment and whilst bugs are being fixed and new features being implemented, probably would be wise for anyone to make a tutorial using a BETA.


I'm sure once its officially released the tutorials will come showing off those new features.





About me: Trainer at Apple, Freelance Video Editor, Motion Graphics Artist, Website Designer, Photographer. Yes I like creating things!!!


Twitter:@mystrawmonkey  @imAllanThompson

Web: mystrawberrymonkey.com  Portfolio: behance.net/allanthompson

YouTube: Affinity Designer & Photo Tutorials

Share this post

Link to post
Share on other sites

I would like exactly the same as OP,some webdesign tutorials would be awesome.

Now that we got the free Grade UI Kit a tutorial from making a working website from that would be great.

What i really would like is after you have made the design in ad how do you convert it to bootstrap,i think i read something about that it uses the grids of bootstrap but i have no clue how to get the design to bootstrap as a working website.


How about you mystrawberrymonkey ??

You make awesome tutorials and i have watched all your tutorials many times and they have helped me a lot to get started.

​The reason i like your tutorials is you make a finished product and you do not just show how things work,i find it a lot easier when you make something so i can see how and when to use the different functions.

I am a developer and not a designer and i probarly never going to be a designer so the way i work and am going to work is to use all the tricks such as Grade Ui Kit to just drag and drop things in AD and do some small tweaks instead of making things from scratch as a real designer.

Share this post

Link to post
Share on other sites

Hello MystrawberryMonkey,


I am also a developer and new to Affinity Designer.


Because I found out here that you write clear tutorials, I like to join the club here and will be very interested to read or view a tutorial about web related items.


By the way, I also use Scirra Construct 2 as my game development software and will be interested in any Sprite and Sprite animation tutorial to create sprites with Affinity Designer.


Thank you very much for the good work!!!



Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.