Adobe XD Tutorial | Login/Signup Page | Basic Course of UI/UX Design

Поділитися
Вставка
  • Опубліковано 2 жов 2024
  • Adobe XD Tutorial | Login/Signup Page | Basic Course of UI/UX Design
    ladobe xd tutorial,
    adobe xd tutorial for beginners,
    adobe xd tutorial web design,
    adobe xd tutorial app design,
    adobe xd tutorial 2022,
    adobe xd tutorial for beginners 2022,
    adobe xd tutorial bangla,
    adobe xd tutorial mobile app,
    adobe xd tutorial in hindi,
    adobe xd tutorial prototype,
    adobe xd tutorial animation,
    adobe xd tutorial app,
    adobe xd tutorial advancedogin screen design desktop, login page design in html, login designs, login page ui mobile, android login ui design templates, material design login page, mockplus login page, adobe xd web login template, adobe xd templates, adobe xd ui kits, login screen, xd app design, adobe xd dashboard ui kit, adobe xd projects, login screen ui, adobe xd tutorial beginner, adobe xd tutorial web design, adobe xd pdf, adobe xd prototype tutorial, adobe xd wireframe tutorial, adobe xd advanced tutorial, adobe xd tutorial 2020, adobe xd templates, adobe xd online, adobe xd tutorial, adobe xd tutorial web design, adobe xd tutorial 2020, adobe xd tutorial mac, adobe xd tutorial prototype, adobe xd tutorial in hindi, adobe xd online, adobe xd templates, adobe xd advanced tutorial, asm arif, arif
    #uiuxdesign #uiuxdesigns
    Mockup Download 🔻
    bit.ly/2XzsNjR
    Icon Credit 🔻
    www.flaticon.com
    Learn More About Adobe Xd🔻
    bit.ly/37hjyZ1
    #xd #adobexd #uiux
    ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
    Music credit 🔻
    ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
    Hip Hop Christmas by Twin Musicom twinmusicom.org
    Creative Commons - Attribution 4.0 International - CC BY 4.0
    Free Download / Stream:
    Music promoted by Audio Library • Hip Hop Christmas - Tw...
    ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
    Follow me on
    FB: 🔻
    / asmarif999
    Bechance: 🔻
    www.behance.ne...
    Pinterest: 🔻
    / asmarifbd
    Twitter: 🔻
    / impassivearif
    Instagram 🔻
    / asm.arif
    Thanks for watching.......
    #uiux #uiuxdesign #uiuxgifs #uiuxinspiration #uiuxdesigns #uiuxsupply #uiuxdedigners #uiuxbuttondesign #UIUXJobOpening #UIUXtraining
    2020 © ASM Arif All right Reserved
  • Навчання та стиль

КОМЕНТАРІ • 290

  • @johan19840
    @johan19840 3 роки тому +40

    the next challenge after that is to do the same in CSS hahaha

  • @yagamiraito4834
    @yagamiraito4834 3 роки тому +1

    Why when i want to change my png icon color it suddenly become a solid color box? Anyone know my problem ?

  • @DynastySheep
    @DynastySheep 4 роки тому +25

    Instead of selecting each layer to change colour simply 'CTRL + Left Click' each of the layer in the Layers tab. It will save you time and will change to the colour to the exact one for each layer.

    • @raomuhammadusama9244
      @raomuhammadusama9244 4 роки тому +1

      Or you can select each layer with shift+lclick and change there color from their

  • @nathin2045
    @nathin2045 3 роки тому

    One of the best tutorial for adopexd projects 👍👍🙏

  • @saadrahman9679
    @saadrahman9679 3 роки тому +1

    Are you Bangladeshi?

  • @jukacuber9560
    @jukacuber9560 3 роки тому +3

    Too many ads!!! Man, it was so hecking hard to watch the whole video, there was an ad every 2 single minutes

  • @phanikumarparitala
    @phanikumarparitala 4 роки тому +18

    After seeing this video it is easy to create a login/sign up page . Awesome tip and good explanation 👍

  • @BalalHmWorldofficial
    @BalalHmWorldofficial 3 роки тому

    vdo dekhbo naki add. 10 minutes er vdo 10 ads. its totally embracing. plz ads ratio ta koman.

  • @naeembabakheil
    @naeembabakheil 3 роки тому +2

    good .. but my question why XD why not Illustrator ?

  • @iooiiooi-xz9xy
    @iooiiooi-xz9xy Рік тому +1

    thanks sir
    but my question is this how to link buttion vo touch for examole we dract go google count

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

      i\ll provide you next tutorial

  • @jackmchale3081
    @jackmchale3081 3 роки тому +2

    Am I the only one who realised he spelt email wrong? 😂

  • @jacreation4646
    @jacreation4646 4 роки тому +3

    Bro they didn't show file ,edit,object option in Upper Layer

  • @nobodyblank4017
    @nobodyblank4017 3 роки тому +3

    Sir how to convert this form into html or php files??

    • @Tatiana-s6
      @Tatiana-s6 3 роки тому

      I wanna know that too..

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

    It’s really helpfull tutorial. Your explanation is clear and easy to understand. I’ll be waiting for your next tutorial. Big thanks and thumb for you

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

    Bhai ise html me bhi kar ke dikhao pls

  • @nameless1858
    @nameless1858 3 роки тому +3

    Email Address - Spelling Correction :p
    rest is all Beautifull

  • @undesign_
    @undesign_ 3 роки тому

    So useful. Thanks for sharing🔥

  • @santoshrane
    @santoshrane 4 роки тому +3

    Hey after you make this design, how to do you make it live? Which software do we use to capture fields and link it to database? Thank you

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

      ive seen people use anima to transfer it into a react script, th anima pligin also makes it possible to add adnimations i believe otherwise react will give you the possibility to scripty your svg the way you want them to animate.

  • @shabnamsabu4235
    @shabnamsabu4235 4 роки тому +7

    Learnt my first ux/ui design. Perfectly explained video!!!

    • @AminXD10
      @AminXD10 3 роки тому

      You have to learn coding to create ui

    • @shabnamsabu4235
      @shabnamsabu4235 3 роки тому +1

      @@AminXD10 not really to design ui

  • @ernestekwogemetuge5781
    @ernestekwogemetuge5781 4 роки тому +7

    Hello Arif. Thanks so much for the video. It's quite helpful. But I have a quick question please.
    At the end of this design, how to do you safe to post for your Instagram feed.

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

      export it in jpeg formate

  • @nazim3152
    @nazim3152 4 роки тому +23

    You have great ideas in UI designing amazing work keep it up.
    And thnx for this tutorial, I really loved it as well as your Adobe XD playlist 👍👍

    • @nazim3152
      @nazim3152 3 роки тому

      @@ayanarko8890 thank you buddy 👍

  • @rafaelcortez5009
    @rafaelcortez5009 3 роки тому

    Windows mask not findable solution:
    On Keyboard QWERTY = Shift + M

  • @יאיראהרון-ז3ק
    @יאיראהרון-ז3ק 2 роки тому

    I tried to this the elign with some object but it's doesn't work..the result is diffrent then yours..help?

  • @manzoorelahiks8865
    @manzoorelahiks8865 3 роки тому

    bhai why are you making a fake accent, say things normal & simple - sentence formation is indian & you trying to make it with foreign accent - that is making me difficult to watch the video

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

    I Appreciate Your Work Bro, Let Me Know What Is The Use Of That Plus Sign?

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

      new page or add something

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

    Haha sorry to ask, i have zero experience in coding but I created an ui now how to convert it into an application.

  • @sunnysaini8407
    @sunnysaini8407 3 роки тому

    all is good but email spelling is wrong sir

  • @mishencetu
    @mishencetu 3 роки тому +4

    I like the tutorial and thank you for it but the clicking is just killing my brain

  • @akshayavhad3824
    @akshayavhad3824 4 роки тому +1

    How to convert it into html ?

  • @lildtk5858
    @lildtk5858 3 роки тому

    Thanks so much bro

  • @noursrour3217
    @noursrour3217 3 роки тому

    Perfect explanation👏👏thx

  • @bhumika.rohilla
    @bhumika.rohilla 4 роки тому +2

    i cant find mask in my windows xd please help

    • @blessdarah1256
      @blessdarah1256 4 роки тому +1

      Yes, that is not available. However, you can use the Ctrl + Shift + M to create a mask when two objects are selected, with your masking layer on top of the other.

  • @m-k3
    @m-k3 3 роки тому

    كيف؟ شلوون؟ 😂 😂
    - - - - ✌🏻 ✌🏻

  • @14onyx
    @14onyx 4 роки тому +3

    Just want to point out, 12px font size is very small. should be at least 14px. so the rest of the objects aligned correspondingly

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

    It’s really helpfull tutorial. Your explanation is clear and easy to understand. I’ll be waiting for your next tutorial. Big thanks and thumb for you

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

    Your English is awesome 😉😉😉😁😁😁😁😥😥😥😲😲😲

  • @pedroelton7040
    @pedroelton7040 4 роки тому

    Thank you for the video. :) subscribed!

  • @joniwes
    @joniwes 3 роки тому

    cant watch video.. left corner thing . is making me epileptic

  • @AminXD10
    @AminXD10 3 роки тому

    This won't work.. just a picture

  • @msbGrafix
    @msbGrafix 3 роки тому

    Very Nice Brother...

  • @AbdulSamad-yu1zn
    @AbdulSamad-yu1zn 3 роки тому +2

    Can i use your this design in my Business app?

    • @AsmArif
      @AsmArif  3 роки тому

      sure! make accordingly!

  • @akashp4863
    @akashp4863 4 роки тому +5

    Im a graphic designer. I accidently watched this video. I realise that I can do UI design.

  • @sridharanjaganathan4698
    @sridharanjaganathan4698 3 роки тому

    Adobe XD is a pain one right ! Is there any open source available for beginners

  • @snaakie
    @snaakie 4 роки тому

    I like the use of gradiënts but honestly the design doesn't make a lot of sense UX wise.
    First: most of the time you won't use the login with Google/Facebook. Especially if you care about your customer's privacy. Many people use this in their Dribbble designs but to professionals it feels like bloated design.
    Second: there is no option to login, only register. What happens when I have already made an account and decided to sign-out and sign-in again?
    Third point: why would there be an add button on the bottom left, what would you want to add in a login screen?
    Have fun designing

  • @bozhidarkostov
    @bozhidarkostov 4 роки тому +21

    No maaan, nooo! Emlail - noooo :(

    • @admin-co5ol
      @admin-co5ol 4 роки тому +1

      Who cares Emlail or Email😂😂

    • @bozhidarkostov
      @bozhidarkostov 4 роки тому

      @@admin-co5ol me again

    • @admin-co5ol
      @admin-co5ol 4 роки тому +1

      @@bozhidarkostov Then what?

    • @TacoKai
      @TacoKai 3 роки тому

      @@admin-co5ol I do :|

  • @ZarachYah
    @ZarachYah 4 роки тому

    Excuse me. Can you help me make my first Android app? My idea isn't unique. I just want my own simple app. An app that gives referral points. It is that simple. I don't have any experiences.

  • @winniev1427
    @winniev1427 3 роки тому

    nice learned a lot and email ki spelling galat h or koi btt ni !

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

    Can u explain 1 png file 2nd file name?? plz tell me again.

  • @cassandragrayes6149
    @cassandragrayes6149 3 роки тому +15

    Love this design. You’re giving me great ideas for my sign up and sign in screens. Question though - what’s the purpose of the plus sign?

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

    Is Maths required for UI UX designing?

  • @Nyctogore
    @Nyctogore 3 роки тому +3

    Yes, Emlail *yes, just yes*

    • @r.pawlow
      @r.pawlow 3 роки тому

      Imagine type checking.
      "Text must be type of E-Mlail*

  • @dipsikhaphukan5563
    @dipsikhaphukan5563 3 роки тому

    Hello, I am a complete beginner, I am using a windows laptop with an android phone, which app screen should I choose for the development as I cannot find android mobiles option while building the app design. And am working in Adobe XD. Please help.

  • @madinsaan5802
    @madinsaan5802 3 роки тому

    Can any one help for learning ui and ux so plz dm me

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

    How you make the intro? Lol

  • @dorabenarbia6027
    @dorabenarbia6027 3 роки тому +1

    thank you asm you are amazing

  • @alterakdraws9023
    @alterakdraws9023 3 роки тому +8

    this is a great video for beginners who want to feel confident that they can do UI! Thanks :)

  • @madhav3444
    @madhav3444 4 роки тому +4

    how these designs are going to work with coding

    • @priyanksisodia5889
      @priyanksisodia5889 3 роки тому +1

      yeah i have a same doubt , i guess they are just for template,so that we can make them using JS,bootstrap,CSS using these designs as refernce

    • @madhav3444
      @madhav3444 3 роки тому +1

      @@priyanksisodia5889 hmm , maybe

  • @Miviene13
    @Miviene13 3 роки тому +1

    Nice short tutorial of Adobe Xd i would like to tell what i see:
    These logos has very bad visibility. I would also change plus edges to rounded because u are using round shapes.
    and who is watching this.. you should be a little more critical. You can learn from others mistakes, dont take everything as flawless. :)
    Also feedback help the author being better and better.

  • @Hindu10111
    @Hindu10111 4 роки тому +1

    very nice work thanks a lot.
    pl do more stuff for us.

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

    do i have to buy adobe xd or can i get it for free

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

    It’s really helpfull tutorial. Your explanation is clear and easy to understand. I’ll be waiting for your next tutorial. Big thanks and thumb for you

  • @axatpatel6751
    @axatpatel6751 4 роки тому

    This waz fuckin awsome . The color gradient u used reminded me of samsung , but Bro seriously this was such a dope idea ...I hope u will get more success...Keep doing this type of stuff I'm enjoying....😊😊😊😊😊

  • @shraddhagupta6727
    @shraddhagupta6727 3 роки тому

    I have downloaded the latest version of windows in that we don't have the top menu bar which is frustrating can you help in it or give a link of olderr version wich can work in windows laptop

  • @nocompromise8264
    @nocompromise8264 3 роки тому

    How to upload .db file (Of SQLite Database) to user's Google Drive?, in Kotlin?

  • @iamnaveenjangra
    @iamnaveenjangra 3 роки тому

    Don't Put too many ads dude...plzzzz

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

    What is the name of the font you used in your design??

  • @hetafo9918
    @hetafo9918 3 роки тому

    It’s okay to use public icons with my design? Or should I have to mention who make it?

  • @zeeshaantandel2188
    @zeeshaantandel2188 3 роки тому

    how to resize the svg image?? didnt get it

  • @kaushikrajkhowa377
    @kaushikrajkhowa377 3 роки тому

    I have no option of file,edit,object

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

    thanks

  • @MushtaqAhmed-bh2cj
    @MushtaqAhmed-bh2cj 2 роки тому

    how did u make shadow in thumbnail?

  • @makeuphelper99
    @makeuphelper99 3 роки тому +3

    This was so helpful, thank you!

  • @cbi0369
    @cbi0369 4 роки тому +1

    this is only application designing software, not a coding software 🤔🤔again this software only for ios🤔🤔

    • @AsmArif
      @AsmArif  4 роки тому

      iOS and Windows as well

  • @kiehore9961
    @kiehore9961 3 роки тому

    What is use of this photo in Adobe ,is it just photo or any hidden behind it , like apps or web page

  • @arafatwahahid
    @arafatwahahid 3 роки тому

    ভাই এগুলো দিয়ে কিভাবে এপ তৌরি করবো সেই প্রোসেস গুলো ভিডিও দিয়েন

  • @Tatiana-s6
    @Tatiana-s6 3 роки тому

    why the plus sign? didn't get it....

  • @sruthiur7351
    @sruthiur7351 3 роки тому +1

    thank you so much it was really helpful : )

  • @SmolPixel
    @SmolPixel 3 роки тому +1

    I am missing the file, edit, object tool bar at the top.

    • @AsmArif
      @AsmArif  3 роки тому

      watch on the left .. 3 line is the menu bar for windows. The rest of the options are a right click of the mouse.

  • @LeoIIXII
    @LeoIIXII 3 роки тому

    did you literally wrote emlail instead of email lol xD

  • @zlatkoiliev8927
    @zlatkoiliev8927 3 роки тому

    May I ask what is the purpose of the plus button? Ona a login page?!?

  • @News_Shorts-
    @News_Shorts- 3 роки тому

    Which screen recorder you are using??

  • @rajkumar-ww3tp
    @rajkumar-ww3tp 3 роки тому

    Mask with shape option is disabled for me, what is the solution

  • @mrworldwide9172
    @mrworldwide9172 3 роки тому

    But how to make it in android studio

  • @ballpool-qq8hr
    @ballpool-qq8hr 2 роки тому

    How do we connect it with backend ??

  • @sigmamale520
    @sigmamale520 3 роки тому

    abe ads kitne daale hain bhai

  • @aadithvinod11
    @aadithvinod11 3 роки тому

    Pls check your spelling next time but great tutorial

  • @amirhosseinbagheri3369
    @amirhosseinbagheri3369 3 роки тому

    thanks for the video. peace!

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

    And then how it get in app store?

  • @naitikkathiriya
    @naitikkathiriya 4 роки тому

    as a designer in photoshop-illustrator only video doen't 100% helpful for now but your starting bg music was so atteactive and nice.. i relly appreciates it brother! can you plz give me the link for it.

  • @keltalztv
    @keltalztv 3 роки тому

    Your intro is too long sir

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

    Your email typed wrong

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

    hello how do you manage to split the color and have a second? i use windows

  • @IslamicSereniity
    @IslamicSereniity 3 роки тому +1

    That's good

  • @jj0309
    @jj0309 3 роки тому +1

    RIP - accessibility

  • @UgoDraws
    @UgoDraws 3 роки тому

    Can i do this with adobe illustrator?

  • @yousufmahmud2947
    @yousufmahmud2947 3 роки тому +8

    You have great ideas in UI designing amazing work keep it up.

  • @pokiri4747
    @pokiri4747 3 роки тому

    In the thumbnail pic the design has signal bar.how to add them?

  • @joniwes
    @joniwes 3 роки тому

    pop up is against clear mind

  • @amjadawan4150
    @amjadawan4150 4 роки тому

    how to send a layer in last layer .. plz help me .. beginner

  • @kaleemahmed7724
    @kaleemahmed7724 4 роки тому +4

    Thank you sir. Learned a lot.