Today we will design a responsive website using the responsive resize UI kit from UI8. We will use the responsive resize feature to change the size of components, text areas and images of a webpage. It’s extremely important to have a responsive design for any website. I am also linking the Adobe Xd file below:

Adobe XD File: http://bit.ly/responsiveresize

Responsive Resize UI kit: https://www.behance.net/gallery/72045189/Responsive-Resize-Kit

Join Facebook Design Group — https://www.facebook.com/groups/punit…

Music in the video: “Ruminate” by R.LUM.R

Follow Me on Twitter:
https://twitter.com/punitweb
Follow me on Medium:
https://medium.com/@punitweb
My Behance Profile:
https://www.behance.net/punitweb

#webdesigntutorial #adobexd #responsivedesign #adobexdtutorial #designtutorial #uidesign

source

26 Comments

  3. Hi Punit! This looks really cool and neat. However i have one question regarding responsive design and i hope you can help me. While designing responsive pages, whats the best practice? Designing for mobile first approach or website ? Also if there is any way the process for designing for the devices separately can be speed up

  7. hey, what happens to the to navigation bar when we scroll down? As soon as we scroll down we need an automatic animation of short background which separates the navigation bar and the screen. How do I can do that?
    I want to keep the landing page just like you did here (with no background), but the moment I scroll down it gets mixed with the white screen. so I just want to add a background only in the scrolling movement, so i doesn't get mixed, and looks clean.
    IDK how to do this. I'm Struggling so much. Can you help me? please.

  11. Hi, I have a square element box with a number in the center of the square, I want this number to always remain inside the height and width.

    Just below the number (also inside the parent box), I have another responsive element box with five colored balls inside, in horizontal formation and stack property. Every time I show or hide one or more balls, the size of this last element (width) adjusts itself, by the stack / resize property.

    The problem is: I want the element box of the balls to remain horizontally centered in relation to the square parent box and its brother the number. Currently, when the ball box is resized, it does so by remaining fixed to the right side, it does not remain atomatically centered.

    Can anyone suggest or help how a position can be forced when an element changes size due to showing / hiding any of the components of an element? It is important to show or hide it, resizing with the mouse the largest element if it respects it , but hiding or showing the components of the ball box does not.

    Can you put in the values тАЛтАЛof eg padding operators like 50% – "(x value)" px?

    Thanks a lot.

  17. Thanks for this intro to the responsive design. I was however expecting a different outcome at the end: when previewing /playing the prototype, the desktop design would, as you make the "browser window" smaller, respond/shrink in real time, and then when a certain width is reached, the mobile design would replace the desktop design automatically. In other words it would mimic the real-world behavior of responsive/adaptive websites. Can this be done with XD?

Leave A Reply

Please enter your comment!
Please enter your name here