Power BI Mobile App Design From Scratch (End-to-End Tutorial)

hey in this video we are going to create a design for a mobile dashboard in powerbi it's going to be a small onepage email report showing the email volume over time we can select the view between year month and week we can filter our data below a line chart we have some kpis and below that we have a distribution over time between the emails we have sent and the emails we have received I took the inspiration for the design from dribble I also put the link in the description it's a nice lip data dashboard I really like the colors and the gradients and we are going to use figma to try to rebuild it first we are going to create a frame pressing F here we have the option to select this iPhone 145 Pro and this is going to be a background so we can call it background then we will add this blue part part to it create another frame and align it in the corner and also to the width and it can be 450 or 30 high and then we will add the field color to it it's going to be a gradient color and to the top part we can color pick a lighter blue and to the bottom part we are going to pick a darker blue going to move it to to the side a little bit and we won't add stars and stuff like that but we will add some disruption by creating a spotlight so I'm pressing o to add an ellipse the f is going to be white let's say 20% transparent and adding a layer blur effect with 150 pixel I rotate it a little bit something like this and then I copy this entire frame one that's the blue frame and drag the copy to the bottom make sure that it covers the antire background for the F we are going to color pick from this bottom area a lighter purple and then in the bottom this darker color and then we can add this glowing effect to it so let's go to effects and add the drop shadow the yaxis is going to be minus 50 minus is going to the upward Direction and the blur is going to be 150 with a color of this purple or pink and if you zoom in you see that there is also a light stroke we can also add it it's going to be white 20% 0.5 pixel wide and only on the top after that we are going to create this header part here I'm going to make a new frame and just align it in the top also to the vid and it's going to be 128 toall and the F effect it's going to be black with 30% transparency let's add a stroke to it too it's going to be white again 20% transparent 0.5 pixels and only on the bottom this time we can also have the drop shadow this is okay 10% blur black is okay too and we can add 10% to it these are minor differences but allog together they add up so this is going to be our first export uh we can select the entire background and go to export here we have the option to export it as an SVG which has a better resolution but some elements get lost sometimes for example in this case this glowing effect wouldn't be visible so for now export it as PNG export background save it somewhere and let's head to powerbi we want to make the dashboard for mobiles so we could use this mobile layout view the issue with this that it's pretty limited so we cannot even put a background for example instead of that let's stick with desktop layout and let's change the canvas size to our background size go to Canvas settings type custom and the he is going to be 852 with a vid 3 93 then go to Canvas background and we can import our image image fit to fit and we can start with our visualizations if you look back in figma we have this line chart with these gradients we can do the same so let's create a line chart and we will add from the measures the email account it's going to show the email account over time and we will add from the themm date table the month short column to the x-axis can make it a bit larger and then let's go to formatting General remove the title effects remove the background go to visuals on the x- axis we change the font to segue UI light 9 pixel is okay for the color we are going to pick a light variation of this background color so it has has the same blue shade in it I already picked some colors so you can just have this same light color add it to it remove the title and we do the same to the Y axis Val use segue U light color is light blue remove the title after that we can remove the grid lines and then let's go to the lines and change the stroke with to two the line type we can change to smooth so it has this curved lines I prefer the linear because it's more accurate but in this design we are going to use this one and then for the color we can select the light blue again then we can create some kpis some cards with the total volume and also some other measures so let's create a card we will add our email account to it go to formatting general effects remove background at the title and it's going to be total volume the font is going to be segue UI light again size is going to be 12 pixels and the text color this time is going to be this light purple or light pink just copy it and Center align it then go to the visual formattings disable category label then the call out value is going to be Subway UI light to 24 pixels and add this light purple to it too we can align it make it a bit smaller and then we can show for example the total volume last year and also how did it change compared to last year so let's copy the card we can replace the fields with email count last year and let's make it a bit smaller call out value going to be 16 pixel and then General title is going to be 10 pixel also change the title to last year and we can copy this and this is going to be our change and on the data field we are going to add email Count versus last year percentage we can align our total volume to the same vid also size them properly so they don't overlap then you can select all three of them and copy them one time on the other side here we are going to replace the email account with response rate this is not an accurate measure it's just the division between the sent and the received emails it's not really a response rate but we are going to use it for this design anyway let's go to the visual General and let's change the title to response rate then in the last year card we are going to use the response rate last year and in the change response rate rate versus last year percentage okay after this we can create another visual showing the distribution of the sent and the received emails over time for that we are going to create a copy of the line chart drag it to the bottom and it's going to be a stacked column chart here we replace the email account with the email account received and the email account sent then go to the formatting we can remove the legend then in the y axis and x-axis then in the axis we can change the color and now we will have a light color but with the shade of this purple background yeah the same color what we had here in the cards and here we can change the color this light blue to our light purple color the same for the y- axis and then we can scroll down to the columns and also change the colors for the stacks it's going to be a darker shade of this light purple and light blue the emails received are going to be this medium blue color you can copy the Hax code and then for the email account sent we are going to use this other code we can make it a bit smaller and I also want to add two cards here showing the total numberers of sent and total number of received emails but I also want to make them at the same time work as a button so whenever we select the scent it's going to filter all the visuals to the sent emails and the same for the received we cannot do this with cards but we can use this new slicer for that and we can add in the fact email data this folder column which has the received and the scent information go to visual settings formattings General remove the title effects remove the background go back to visual in the shape we can add a rounded rectangle the rounding is going to be 14 pixels then the layer lay out is going to be one row two columns with 16 pix up spacing and go down to the callout values the font is going to be Subway UI light 12 pixel is okay and we are going to pick the same light purple color or pink color Center aligned and then we are going to add some labels which are going to be our numbers Turnal labels and we will add this email count as data the font is going to be Segway UI light 24 pixels and the color of the numbers should indicate which part of this Tech column chart do they represent so it should have a conditional formatting the scent is going to be this purple and the receiv is going to be this blue I already created a measure for that which is this folder selection label color if this folder column is sent we will have this purple if it's receive we have the blue let's add it as a conditional formatting field value folder folder selection label color now we can also remove this padding between the value and the label and then we can scroll down to the buttons make sure that the state is selected here we will remove the border and for the fill we will add 100% transparency we can also go back to the padding and change it to custom and we will remove the top and bottom padding which gives us more flexibility with the space we can align it resize it a little bit something like this and then we can add some effects to the different states scroll up to the callout values let's change the state in the buttons we can skip the hover State because on mobile we cannot really hover with our finger we can just tap we can just press elements so let's select the Press here the filling is going to be white too but 50% transparent looking like this then let's select the selected State here feel right again but 70% transparency then scroll up and we change also in the call out values we can keep the press as it is but let's go to selected and here let's change it to segue UI color is white that's okay and for the label we can change it also to normal Segway U and here we should keep the colors so let's add the field formatting again measure folder so how it looks like whichever we select we have a little effect on the press and then the selected element is highlighted we can add also a slasher to it with the date so we can select different periods let's add the normal slicer and I'm going going to put this year field into it let's go to formattings slicer settings style is going to be dropped down then in the selection we can select select all remove the slicer header in values segue UI is okay we can change the font color to the same light blue we are having in the axis and for the background we can have the same color what we have here for the background I went back to figma and color sample this area and this is the code for it then let's go to general effects remove the background and we can resize it looks like this also we can change the order so the freshest date is on the top 2022 is also not Super Fresh but but still closer to the present and then we will add the card in fact we will copy this total volume place it in the middle let's change the field we have this date range label here then go to formattings call out value it's going to be Subway light 10 pixel and let's change the color to this medium blue then go to General title it's going to be the title for the antire dashboard email volume and it's going to be 14 pixel also the text color this time is going to be this light blue can move it down a little bit like that now we can do something with these kpis give them a little bit of structure we can put some dividers here so let's head back to figma here I'm going to create a line pressing L and holding down shift I can create a vertical line I'm going to make the width 104 pixel the color is going to be white and let's make it a gradient so we will put one stop in the middle and One Stop on both sides and they are going to be 15 60 and 15 and also if you don't see any changes is because we also have to change the direction of it so you can just drag these dots or markers and drag them along the line like this we can also round the corners of it or the endings of it and then we have a line like this you can move it in the middle and the top in fact let's make is a bit less visible so let's make it 70% transparent then I'm going to create two copies of it pressing controll D then dragging it or I can just select it hold down the alt and drag it also creating a copy I select all three of them and add the not to layout I'm going to put the alignment in the bottom center and then drag the outo layout all to the edges and also make these distances these are the gaps between the lines 104 pixel and then I'm going to make the enter Auto layout 140 pixel toll the middle line is going to separate the total volume kpis from the response rate kpis and these two are going to divide the last year and the change kpis we can make these two smaller select them both holding down shift and make the WID 40 pixels then finally we can put the divider also here to divide the kpis from the sent and received kpis holding the shift you can make it horizontal I'm going to make it like 300 wide Center align it and also make it a bit less visible 30% 50% transparency and also going in the linear I'm going to make the edges 0% looking like this we can also drag it a bit more to the top I align it to the end of these lines and then from this position I move down plus 16 pixels okay we are done with it now we can export it one more time but to have a better resolution we can actually double the size so I'm just going to copy it and pressing down K we have the option for scaling and we can add two other than that you can also select scale here and then we are going to export this antire background again as a PNG here we can go to page formatting canvas background and replace the image image fit set to fit and this is how it looks like we can move this down a little bit yeah something like this make this one a little bit smaller okay and now we have come to the tricky part we want to create these gradients here and this is not possible directly with the powerbi visuals we have this area chart here and we can add some some shaded area but in the options we cannot change it to a gradient we can only change a transparency but not the gradient itself we could use another visual a custom visual or we could use daab and build our own visual with it but this time we are going to use figma creating an image on top of this layer which is going to create so to say a reverse gradient from bottom to the top and then we will add another line chart chart on top of the image so we can maintain the interactivity with the visual so let's head back to figma I'm going to copy the entire background one more time before that I deleted my enlarged background and we are going to create a new frame which is going to have the same size like this middle Blue Area this is going to be our gradient we can remove the fill and why are we doing this is because if you would just use a simple gradient with a transparent in top it would cover this glowy pink area so to have it also in our gradient we will have it in this Frame as well so we are going to select this background and here on the selection pane just drag it within this Frame five so all the other parts are hidden and now coming to the frame first go to the background here on the C selection Pane and remove this field we don't need the white fi and then open it go to the frame one and here we are going to go to the linear and actually just changing this top color to 0% opaque then go to this Frame three here this is this area and we can remove it completely also going back to the field the transparency starts here and what we want is actually to start the transparency a bit lower but it's not good if we drag it because later the colors won't be properly aligned with this background color so instead of that we are going to add another stop here and make this one also completely transparent this way the transparency starts here and and this is full colored here I'm going to name the frame line chart gradient and one more thing what I want to do before export is deleting this Spotlight here and now we are ready to export select export simply as a PNG and let's go back to powerbi here we can go to insert and import it tells an image line chart okay okay set the style scaling to fit and we can place it on top of our blue area and go to view open the selection Pane and place our line chart right below our image and this is how it looks now if we want to make the effect a bit stronger we can just duplicate this image and now the bottom part is not visible at all then we can select the line chart copy it once crl Ctrl V and to place them properly we can select the bottom line chart again then with control select the top line chart again go to formatting General properties and if you move the position up and down then all the selected visuals are going to be aligned to the position to the Chart or to the visual which we selected as the first visual so it's going to be the bottom line chart going here horizontally move it up and down vertically move it up and down and just using the arrow on the keyboard and know they are aligned properly now select only the bottom line chart and here we can change it back to a simple land chart instead of an area chart so we have here we can select elements on it and also the line is properly visible the axes are visible and we have have this shaded gradient then we can do the same for the column charts let's go back to figma here I'm just going to create a frame going to the bottom the entire size and I'm just going to add the field to it make it a gradient and color picking here from the background and here from the bottom and then go back to the top one and change it to0 % opacity also you can add another stop here and let's change it also to 0% after that I'm just moving it on the side this is going to be our column chart gradient and let's export it as PNG and let's get back to powerbi here again insert and Export it as an image again style scaling to fit and we drag it completely down and resize it a little bit something like that it can happen that we have some coloring issue here on the sides that the colors are not matching properly it can be a little bit tricky to play around with it the issue is that if you make it full size powerbi still puts a frame a gap around the image so it's always going to be a little bit of difference but this time let not be perfect istic leave it as it is we can also move it a little bit upward so it gives a bit more gradients to it and this is fine for us then select the column chart move it right below the image and we do the same thing what we did before copy the column chart select the below one first then the top one go to formatting General properties and move the position up and down horizontally also vertically then select only the top chart and in this case we want to make the columns transparent so let's go to visual columns and change the color transparency to 100% for received and also for sent okay there's it's almost done there is one more thing I would want to add is to be able to switch the view between different selections so this is a yearly view we could add the monthly and the weekly view as well in the monthly view we can put on the days of the month on the xaxis and then the weekly view the days of the week for that I'm going to group all the line chart elements with the images this is going to be line chart then let's group these elements here it's going to be the column chart and I also drag the slicer to them and if we select them all and group them together this is going to be our yearly view I'm going to call it year and one thing before we do that what's important is here if we select one element it's going to filter the gradient behind it and also these are not visible if a month is not selected but that's okay for now that's not our Focus but the design is our Focus so to make sure that the gradient stays the same we have to disable the interactivity between these two visuals I'm going to turn this one off and also the images so we can access it select this element again go to formatting edit interactions and we can disable the interaction between them and now when we select something this stays the same okay let's get back to our different views I'm going to copy this entire year selection or year group and I'm going to call this month hide the year group and then go in the month to the slicer we can replace it with month year short so we can select the different months we can also change the Sorting to descending then let's go to our visuals and everywhere we will replace the xaxis instead of month short we will put month day number let's make sure it's on x-axis we can remove the grid lines it added it automatically it should look like this I go to the bottom line chart and again replacing the x-axis and also the grid line and then we have to do the same thing like before and disable the interactivity between the top and bottom land charts I'm going to select the top one I mean disabling the images and the top chart first then select the top chart and disable the interactivity enable them again or show them again and then I'm going to do the same for the column chart I replace the x-axis and also remove the grid lines and in this case if we select something it highlights like this so here we don't have to change the interactivity and again if you see these error messages it's because you select a month value here or a date value here and here you have a different date selection so you have to make sure that you select a specific month December and now it fixed but seemingly we don't have on the select to day any emails in December so yeah so we have some issues but we are just going to ignore them for this video we could alternatively put some default values in the measures what happens when they are blank or like invalid okay now we are going to do our weekly view let's copy the month group disable the previous month and let's call it week and here again we will have to disable the interactivity between the line charts and replace the xaxis instead of month day number is going to be weekday short and let's do it also for the column chart I'm going to do it offscreen when we are done with it we can create some bookmarks let's go to view on the top enable The Bookmark Pane and we are going to add three bookmarks let's call them week month and year and they are all going to be applied only for the selected visuals we can leave the data and display on current page is also okay and just click on selected visuals in all of them then we can select all the free groups now week is visible month and year are hidden and then this is going to be our week bookmark right click on week again and click update then hide the week group show the month group select all the elements again select the month update it then hide the month group show the year group select them again and now update the year botm mark now if you click them through just to check them sometimes there are some issues for example for week nothing is visible so just enable the week again select all of them and update the week okay now it works properly the reason for keeping the data in is because we want to reset these slicers to all again so make sure that when before you do the bookmarks all of these slicers have zero selections then we can add some buttons for the bookmarks go to insert buttons we're going to pick bookmark Navigator resize it and place it on this side in fact I'm going to give it a 40 pixel8 then go to visual shape give it 10 pixel rounded Corners then go to style the default style we can leave it on seg UI 10 pixels but give it this light blue color remove the borders and make the feel 100% transparent and we can skip the hover State again go and press we can make the font a bit larger let's make it white and also the FI is going to be white 85% transparent then go to selected again make it a bit larger white color for the font and the field color is going to be white with 70% transparency so now when we select something it's going to look like this and all we have to do now is to test it on the mobile so I'm going to save it and upload it into web services powerbi.com I uploaded it here in the powerbi service I'm just going to open it and this is how it looks like here but what we really want to see is how it looks like on mobile so I'm going to go on my phone so I'm going to go on my phone and just open the dashboard in the powerbi app workspaces and look for phone app emails you can enlarge it and yeah this looks nice but I really don't like these white edges around it and we can change it if we change the wallpaper of the dashboard so let's get back to powerbi service here I just click on edit I'm going to change the background and add a wallpaper to it let's say adding a blue color but maybe a bit less saturated and a bit darker something like this then I just click save and back to my phone if I refresh the visual let's see how it looks like make it full size again yeah it looks pretty decent to me selecting different views being able to select in the slicer different periods and also we could even add more visuals because it's very easy to scroll down in Mobile and yeah we could add some distribution by categories by subjects or by countries I put another side I put another page in the powerbi report so you can check how it would look like there so this is it I hope you like it if you want to see similar videos in the future you can click on subscribe you can also leave a comment or feedback if you want and see you next [Music] time

Channel: Your Own KPI

Views: 3,147

Keywords: power bi, power bi dashboard design, power bi figma, power bi design figma, power bi ui design, power bi ui, power bi visual design, power bi dashboard building, power bi visual, power bi create dashboard, power bi build dashboard, power bi design, power bi makeover, power bi tutorial, power bi for beginners, power bi course, power bi design tutorial, power bi figma tutorial, power bi ux, power bi mobile, power bi mobile dashboard, power bi mobile design

Id: 4hwjtb_P-es

Length: 38min 17sec (2297 seconds)

Published: Sat Jan 27 2024