Affinity Designer Tutorial - UI and Website Mockups Using Constraints

Поделиться
HTML-код
  • Опубликовано: 29 окт 2024

Комментарии • 72

  • @markuserikssen
    @markuserikssen 4 дня назад +1

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

  • @manueldouglas3435
    @manueldouglas3435 Год назад +3

    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

  • @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.

  • @terrycabeen
    @terrycabeen Год назад +2

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

  • @Core2TOM
    @Core2TOM 5 месяцев назад +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  5 месяцев назад +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 5 месяцев назад +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  5 месяцев назад

      Thanks again!

    • @ArtistWright
      @ArtistWright  5 месяцев назад

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

  • @robertevans8635
    @robertevans8635 4 месяца назад +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  4 месяца назад +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.

  • @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

  • @thomas_fodor
    @thomas_fodor 2 года назад +1

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

  • @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

  • @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..

  • @MrSanTang
    @MrSanTang Год назад +1

    As usual, excellent video. Thanks.

  • @tamgaming9861
    @tamgaming9861 Год назад +1

    great tutorial - thank you for this!

  • @slamotte
    @slamotte 6 месяцев назад +1

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

  • @benvang6957
    @benvang6957 2 года назад +1

    Well described, well illustrated.

  • @EdgardMello
    @EdgardMello Год назад +1

    Very good tutorials.

  • @Marty72
    @Marty72 2 года назад +1

    Great channel. Consistently good content. Thanks.

  • @ZelKun_drw
    @ZelKun_drw 2 месяца назад +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  2 месяца назад +1

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

  • @kobelee9930
    @kobelee9930 11 месяцев назад +1

    Thank you

  • @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.

  • @jeffreypostma6832
    @jeffreypostma6832 2 года назад

    Very good explanation! Thanks a lot!

  • @franberth
    @franberth 2 года назад +1

    wow very useful thank

  • @palladiumbc7576
    @palladiumbc7576 2 года назад +1

    Love it ! THX

  • @stephystuff2955
    @stephystuff2955 Год назад +2

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

    • @ArtistWright
      @ArtistWright  Год назад +1

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

    • @stephystuff2955
      @stephystuff2955 Год назад

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

    • @ArtistWright
      @ArtistWright  Год назад

      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

  • @markuserikssen
    @markuserikssen 4 дня назад +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!

  • @zouhrrr
    @zouhrrr Год назад +1

    Thnx helpful

  • @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 4 месяца назад

      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 4 месяца назад

      @@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/

  • @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  4 дня назад

      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).

  • @TheDamogran
    @TheDamogran Год назад

    thx