web design wireframe app

web design wireframe app

hey, pixels! in this week’s tutorial, i’ll be showingyou how to design your very own interactive app prototype in adobe xd. the design for this app is very nice and modern. be sure to visit my blog, xopixel.com to readthe article for this tutorial. now, let’s get started. in adobe xd, click the artboard tool and select‘android mobile’ from the predefined artboard sizes (right-hand panel). you should have a total of two artboards onyour workspace.

now, we’re going to make the gradient backgroundin adobe illustrator by creating an artboard that’s 360x640px and using the gradienttool. the two colours used to make the linear gradientis a blue and green color. once the gradient has been made, copy andpaste it onto the first artboard in adobe xd. now, we’re going to work on the first artboard. first, let’s give this app a name. place the logo 122px down from the top ofthe canvas. then, using the rectangle tool and draw arectangle that’s 283x47px.

there should be a 35px space between the logoand the first rectangle. round the corners of the rectangle by 27px. duplicate the rectangle shape two more timesto create a total of three and place them below one another leaving 21px of spacingin between each. fill the first two rectangles with white andthen set their opacity to 20%. the last rectangle will have no fill and awhite 2px border. now, we’re going to add some icons. first, we’re going to add the hamburgermenu icon to the top left corner. then, we’re going to add the mail icon tothe left-hand side of the first rectangle

and then the person icon in the second rectangle. we’re also going to add some text for allthe textboxes and button. finally, we’re going to add three socialmedia icons (instagram, facebook, twitter) at the bottom. now we’re going to start working on thesecond artboard. first, we’re going to copy the design onthe first artboard and then paste it onto the second artboard. move the whole design so that only a partof it is showing. then, slide the gradient background over tofit the entire artboard.

this is so that when we add the prototypeeffect, it will look like the menu is sliding out. be sure to delete the hamburger icon and addan ‘x’ icon in its place. we’re also going to delete the ‘sign-in’text and the last two social media icons. to create the slide out menu, draw a rectanglethat’s 222x640px on the left-hand side of the artboard. the color fill for this rectangle is blackand its opacity will be set to 60%. then, we’re just going to use the text toolto write out some links that we on the menu. to make the app design interactive, we’regoing to go into the prototype mode.

then, we’re going to select the hamburgermenu icon and drag the wire to connect it to the second artboard with the followingsettings: slide-right, ease-out, 0.2s. for the second artboard, we’re going toselect the ‘x’ icon and drag the wire to the first artboard with the following settings:slide-left, ease-out, 0.2s. finally, to test out the app prototype, clickthe play icon and click then click menu icons. it should look like you’re opening and closingthe menu. this looks really cool! i hope you enjoyed this tutorial. give this video a big thumbs up if you likedit.

subscribe to xopixel for more great designvideos just like this one. i’ll see you in next weeks video!

web design wireframe app Why Article SEO is Damn-Suck?