Affinity Designer Tutorial - UI and Website Mockups Using Constraints

Поділитися
Вставка
  • Опубліковано 21 січ 2025

КОМЕНТАРІ • 72

  • @manueldouglas3435
    @manueldouglas3435 2 роки тому +4

    O love your tuts because you actually draw something and explain the tools you used instead of just saying: 'this is the pen tool' then drawing a squiggly line

    • @ArtistWright
      @ArtistWright  2 роки тому +1

      Well I'm happy to hear that Manuel!

  • @terrycabeen
    @terrycabeen Рік тому +2

    I had absolutely no idea this tool existed. Fantastic work on explaining everything, too!

  • @NicoHeinrich
    @NicoHeinrich Рік тому +5

    Amazing tutorial. I always do my web design mock ups in Designer and this will make my work 100x easier!

    • @ArtistWright
      @ArtistWright  Рік тому +2

      Ah that's good to hear, and glad its of help. you should make a tutorial on it, I see hardly any tutorials on this subject.

  • @markuserikssen
    @markuserikssen 2 місяці тому +1

    This tutorial is on another level. Impressive stuff! Thanks!

  • @stephystuff2955
    @stephystuff2955 2 роки тому +2

    Can you please do a video where it's 100% designing a website offline using Affinity tutorial?

    • @ArtistWright
      @ArtistWright  2 роки тому +1

      Hi Stephy, thanks for your suggestion I love to hear all the ideas. Maybe ill do that the future thanks!

    • @stephystuff2955
      @stephystuff2955 2 роки тому

      @@ArtistWright that would be great! I'd like to how to take your offline website and upload it to Bluehost.

    • @ArtistWright
      @ArtistWright  2 роки тому

      Oh I've not done that before actually. Hey why don't you do it and I'll watch your tutorial. That would be cool

  • @Core2TOM
    @Core2TOM 8 місяців тому +1

    awesome! i didn't knew about this tool, this is exactly what i need 🙏 i love your channel! the tutorials are short, informative, well explained and presented without unnecessary talk. very professional. channels like this are rare.

    • @ArtistWright
      @ArtistWright  8 місяців тому +1

      Thats great to hear thank you, I'm working on a new video now. All about the width tool that just came out. For me it's something I've been waiting for since Affinity came out!

    • @Core2TOM
      @Core2TOM 8 місяців тому +1

      @@ArtistWright i'm excited for it! 🙂 btw what i'm looking for is an option to invert pixel masks (black turned to white, white turned to black) afaik there is no such option in affinity designer, only in affinity photo. or am i wrong?

    • @ArtistWright
      @ArtistWright  8 місяців тому

      Thanks again!

    • @ArtistWright
      @ArtistWright  8 місяців тому

      I use affinity photo for masking pixel images. Invert pixel selection is in one of the drop-down menus above.

  • @robertevans8635
    @robertevans8635 7 місяців тому +3

    This was a real eye opener for me. Excellent. Back in the day I did a couple of basic websites using html tables and lots of resizing in PS. I never resolved how to make the flexible formats require for smartphones and tablets - bingo, I understand it better now! Is there any chance you could do a follow-up tutorial showing export and web formatting and what apps you recommend. I'm now retired but still try to keep up to speed. Cheers

    • @ArtistWright
      @ArtistWright  7 місяців тому +1

      Thank you Robert, it's great to hear that the tutorial helped you. That is something I could definitely look into more, I will add it to my list. thank you for the suggestion.

  • @manollobango
    @manollobango Рік тому +2

    This is really a nice tutorial!
    Well explained and easy to follow!

    • @ArtistWright
      @ArtistWright  Рік тому +1

      Happy to hear its helping you out

    • @manollobango
      @manollobango Рік тому +1

      Can you tell me how you were able to change the artboard background to be colored?

    • @ArtistWright
      @ArtistWright  Рік тому +1

      @@manollobango use the rectangle tool to make a new shape the same size as the artboard, and choose your fill colour

    • @manollobango
      @manollobango Рік тому +1

      @@ArtistWright
      Okay, my bad! I didn't realize that the colored background is within the artboard 😅🙈

    • @ArtistWright
      @ArtistWright  Рік тому +1

      @@manollobango no worries. you can change how light or dark the UI is in settings

  • @tom_takes_the_shot
    @tom_takes_the_shot 2 роки тому +1

    Thank You so much for making this tutorial. Informative & easy to follow, keep up the good work.

  • @MrSanTang
    @MrSanTang 2 роки тому +1

    As usual, excellent video. Thanks.

  • @slamotte
    @slamotte 8 місяців тому +1

    nice! this came at such a good time. thank you

  • @phantomapprentice6749
    @phantomapprentice6749 Рік тому +2

    Hi so affinity designer 2 changed the interface a little and the constraints panel is under the Window dropdown, just in case someone else didn't know how to find it.

    • @ArtistWright
      @ArtistWright  Рік тому

      Good tip cheers

    • @ArtistWright
      @ArtistWright  2 місяці тому

      You can use the corner tool again and enter in the same values. Alternatively You can play with scaling options in the transform panel. Or bake appearance (although that will probably just stretch out the corners when scaling).

  • @skushassss
    @skushassss 2 роки тому +4

    Never knew this function exists in Designer but while watching this tutorial, I was following each and every step. Very easy to understand and follow as usual. Thank you so much! p/s: Somehow I can't seem to find the super thanks button..

  • @neodidi
    @neodidi 2 роки тому +1

    Ok... So from watching this.. I now understand the min and max scale constraint... Thanks man..
    Also, I just realized that Auto Layout in Figma is basically a very very complex constraint feature.. It can be achieved with Affinity to a large degree.. It will just take a lot of time at least for the early trials.. I believe the more you understand it, the better you'll be able to work.
    But yeah, I see it's possible.
    One thing that might be a challenge is snapping objects when changing their position in the board.. But man, I'll try out a few things later.
    Thanks again for this breakdown

  • @benvang6957
    @benvang6957 2 роки тому +1

    Well described, well illustrated.

  • @tamgaming9861
    @tamgaming9861 2 роки тому +1

    great tutorial - thank you for this!

  • @EdgardMello
    @EdgardMello Рік тому +1

    Very good tutorials.

  • @ZelKun_drw
    @ZelKun_drw 5 місяців тому +1

    I will attempt to use this for adapting designs into Google ad banners, which come in various sizes. It can be quite challenging to create all these adaptations. Thank you, I'm not familiar with how this panel operates.

    • @ArtistWright
      @ArtistWright  5 місяців тому +1

      Cheers! I often forget about that panel but it can be helpful

  • @Marty72
    @Marty72 2 роки тому +1

    Great channel. Consistently good content. Thanks.

  • @palladiumbc7576
    @palladiumbc7576 2 роки тому +1

    Love it ! THX

  • @franberth
    @franberth 2 роки тому +1

    wow very useful thank

  • @postmax81
    @postmax81 2 роки тому

    Very good explanation! Thanks a lot!

  • @markuserikssen
    @markuserikssen 2 місяці тому +1

    One question I'd like to ask: at 5:15 you expand the button and the rounded corners become bigger as well. Is there a way to keep these rounded corners the same size (absolute size) so the rounded corners don't become bigger when the object is being stretched?

    • @ArtistWright
      @ArtistWright  2 місяці тому

      In the transform panel there are force scale options.

    • @markuserikssen
      @markuserikssen 2 місяці тому

      @@ArtistWright Thanks!

  • @earlEOS
    @earlEOS 2 роки тому +2

    Awesome that you have a tutorial for UI design too! In the realm of UX/UI design, What's your insight on using Affinity Designer versus Figma? I am a UX/UI designer so Figma has the collaboration features that are necessary for remote and asynchronous work. But I find I can design mockups/screens quicker and more intuitively with Affinity Designer... just wanted your thoughts... ty in advance! Great content!

    • @ArtistWright
      @ArtistWright  2 роки тому +2

      Hey thanks Earl I appreciate it. I've not actually used Figma so can't comment on that sorry, but Ill check it out. Affinity Designer does not hinder my creative flow at all, it's a really smooth experience compared to the other software.

    • @omfgihopethisworks
      @omfgihopethisworks 2 роки тому +1

      If Designer had collaboration and prototyping/animations etc., I wouldn't need any other software.

  • @cazzzac
    @cazzzac Рік тому +1

    Great video!
    I used to use Figma but now I do all prototyping in code as that's how the UK government work. I'm wondering how Affinity Designer compares to products like Sketch. If, for example, I did mockups for stakeholders in Affinity, but then did full prototypes in code, has anyone had experience with this?
    And was the workflow noticeably worse in Affinity if you're not doing animations or prototypes?

    • @ArtistWright
      @ArtistWright  Рік тому

      Thanks Zachary! Ahh that's interesting (about UK Gov) I've not used sketch much so can't really give you a decent answer on that. Affinity is ofcourse an awesome piece of software. I see no problem in making the mockup in Affinity then coding after. I can't say I've ever done that though. Check out the official Affinity forum it's great for questions such as yours

    • @juurstudio
      @juurstudio 7 місяців тому

      Seriously prototyping in code? Seems counter intuitive, unless you're using some sort of page builder in which case it's not really in code any longer of course.

    • @cazzzac
      @cazzzac 7 місяців тому

      @@juurstudio Yeah, as a designer it's not the most intuitive setup. But this is what the UK government use prototype-kit.service.gov.uk/docs/

  • @kobelee9930
    @kobelee9930 Рік тому +1

    Thank you

  • @zouhrrr
    @zouhrrr 2 роки тому +1

    Thnx helpful

  • @TheDamogran
    @TheDamogran Рік тому

    thx