Mobile-First Design In WebFlow | Riley Jones | Skillshare

Mobile-First Design In WebFlow

Riley Jones, Coffee Fueled Creative

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (52m)
    • 1. Introduction

      0:54
    • 2. The Mobile-First Approach

      4:44
    • 3. Wireframes

      2:31
    • 4. Moodboards

      0:58
    • 5. Webflow Explained

      0:46
    • 6. Webflow Further Help Info

      0:34
    • 7. Webflow Workspace

      1:21
    • 8. Homepage Foundation

      7:28
    • 9. Styles Pt. 1

      7:00
    • 10. Styles Pt. 2

      7:50
    • 11. Styles Pt. 3

      7:46
    • 12. Styles Pt. 4

      6:53
    • 13. Final Stylings

      2:27
    • 14. Final Remarks

      1:14

About This Class

The goal of this project is to have a better understanding of how to take the mobile-first approach when it comes to designing content in Webflow. We will consider practices of User Experience when it comes to structuring content and deciding how to display the right information on a mobile-screen. Within the Webflow platform, we can easily take our designs and put them into a working prototype to where we can see it in a live environment. 

Requirements

  • A love for learning new things
  • A passion for engaging with content

Helpful To Know But Not Necessary

  • Basic HTML and CSS

Transcripts

1. Introduction: everyone. I'm really Jones and I'm a weapon graphic designer. Brought me to my class mobile first design Wen Flow Ah, project is gonna be designing a front page for a restaurant site. And through that, I'm gonna show you guys a mobile first approach to our inner process offer content and structure is going to be focused on a mobile platform. And from there we'll also create mood boards to get a better feel and look to how we want our sites to be. Once that is wrapped up, well, they're all over content into Web bloom and in Web flow will begin. Finalize our build and design for a page. If you like some cool ideas and integrating some fun things into your process, feel free to join the class and we can start having fun. 2. The Mobile-First Approach: I want to go ahead and explain how we're going to implement a mobile first approach into our process. And really, it's all centered around how we see our content with a mobile first approach. You start with the smallest device possible. In this case, it's gonna be a smartphone. So already it's a limited space to where the focus on the content becomes more important as faras, where you lay it out and how you structure it. You can think about it kind of like a storyboard toe where there's certain points of the site you want your users to interact with. There's a beginning, a middle and an end. It is up to you to kind of craft that experienced tour. You can God the user to get the important information you need from the site. This is where first impressions become really important because since it's a limited space , there's only so much the user can see a front. So when the user comes to your site those first couple seconds, they're really important. So it's good to make a first impression as faras. How have you structured your content toe where the user seeing the most important information first. So for the first step, we're going to go through this process of figuring out the content. So we're gonna list out categories or sections we want on our home page that can either be a section for men. Use a section for a display of the locations, and hours can really be anything. As always, it relates to the mission of our restaurant home page. So once we get all the categories of the types of content, one on her site will start rating them by importance. So you can choose kind of what's more important for the user to see first and then others and kind of scale those, however, order you might need to. And then, from there you can start getting an idea of how to structure everything with that importance toe, where the really important information is on top toward the user season information. And then once you grab that interest, you can kind of filter in the rest of the information across the site, and from there we'll start using wire frames to kind of capture what that looks like and refine our structure. So here's some examples from up front you have a slider Internet info section. So I already know what kind of food this restaurant has. And then also I know kind of who they are from, like a personal aspect, kind of the atmosphere they create, and then it you go along down the site. There's more important information, like reservations and menus. Once I've kind of gained interest from this one point. This other side is interesting because it puts all kind of the technical information up front or even hours her location. And then you can browse the menus if you want. Just going another way of thinking how you might structure your content. This there's really no right a wrong way. It's just kind of up to you. What you decide is important for your restaurant, for your your user, and this side is interesting because this is the mobile site. Then you have the desktop. Part two of the content completely shifts in a different layout, says something interesting that can happen with the mobile first design. You could really play around your content and how you want to structure things. This is our last example toe, where they made the decision tohave the reservation information up front. That's when they wanted the user to grab onto when they're coming to the site. So the booking information's out of the way, and then more informations on toward the lower part of the page, as faras hours, days and more contact information would. That said, Don't you guys now toe list out the categories and types of content you would like included on your home page? It's really up to you as faras What you think might be a valuable experience for the user once you've created that list, then going and rate them based off a love of importance. So write them by what you think the user can gain most value from from the beginning of the website to the end, where the most important will be at the top. Once you've created your list and rated them, don't forget to post them to your project page so you can kind of see how other people rated important information this way or that way. And from there we can move on to our wire frames 3. Wireframes: There's an example of how I went about thinking about the content on my side and the first part of the document. I just went enlisted out stuff. I thought the user could benefit from visiting the site so there'd be a location section, a call to action section, which would be to reserve a spot social media section, a section shown hours. Another section displaying popular items that are within the menu, like the food menu in the Footer would be split up into two more sections to where it be a kind of a reminder of the locations of the restaurant and the site menu was that was finished, I said, Our thinking about the order of how might they come across on the home page. This is what I ended up with two where the hours and locations sections of the first thing on one thing to the users to see as faras when the restaurants open and where they can go to find that restaurant and then beneath. That would be the popular items of the food that the restaurant serving and from there, if they looked at that, there is gonna be the call to action with a button to reserve a spot for that restaurant. And then continuing on there is gonna be a history section giving more of personality and intro to what's kind of behind the restaurant. And then, from there that's going to the Social media section for users to connect with the restaurant and then in the Footer will be locations and then another small call to action to reserve and then the site menu. Once I've ordered everything, I went ahead and sketched a lot of ideas that how the structure and layout of things might work. Once that was finished, I went back and refined my wire frame. So what this looks like now, and I filled it in with content to give more of a feel of what the site might actually look like. And you begin to see the story of the site and the points of interactions that users can make. So from here, I want you guys to take your items that have been ordered by importance and create a wire frame creatives menaces you want. And once you've gotten a good idea in our status side of an idea, refined that wire frame fill. It was some just generic content. It could either be filler content or you can go ahead, and but the actual content you went in there and once that's finished, post that to your project page for everyone to see how you kind of want about visualizing your structure. And from then on we could start figuring out mood boards and going into a Web flow and creating a mock up of our design. 4. Moodboards: the next step in our process is gonna be creating our mood boards. In this example, I'm using Pinterest, but you can really use anything you would like as long as it's a place where you've gathered all your imagery and inspiration that with your mood boards doesn't have to be specifically Web based. It's really whatever kind of inspiration aesthetic you might want to include into your site . And so, with this mood board I have for my shop chose to go with a pizza shop, and the things I've collected are things involving different kinds of typography, colors, layout, aesthetic with textures and even more some design elements like icons. So that said, going out gather as many images and resource is you would like. And once you feel like you've gathered enough paste a screenshot or filed to a project folder, and then we can move on to the next step, and that is including all of our content and design, and to would flow 5. Webflow Explained: If you don't have a workflow account, all you need to do is get a Web flow dot com and sign up for a free account. And if you don't know, weapon was. Basically, it's this tool that allows you to code and design at the same time, and that's me wrapping it up simply. There's a lot more to it, but basically it provide you these features that allow you to work with the design and then , as you're designing, it's in putting clean code toe where you wanted to. Once you're finished, the project can export that code and hosted on the site. So if you don't have an account, go over the Web flow dot com, create a free one and then in the next videos also you guys an intro to the basic features we're gonna be using for our home page. 6. Webflow Further Help Info: If you guys would like a more explanation of the Web float tools, I recommend going to help that Web flow dot com slash courses such getting started. And they provide quick, easy lessons that explain a little bit more in detail of the tools and Web flow and what they do. And you can easily begin to understand the purpose for each specific tool that will help you if you decide to view some of these in the middle of your projects. 7. Webflow Workspace: So after we've created our account, go ahead into your dashboard and we can start making our site at the new but new website. We'll give our website a name, said it to public and then had to create website. Now this is the workspace we'll be working in. I'm not going to explain all the features it offers because there is a lot and you can do a lot of cool stuff. But I'm just gonna explain the basic ones were going to be using for a project. So on our top bar here we have this a toggle preview button which basically just previews are side as if it would be on a live Web browser. And then in the middle part of the bar will be our break points for different kinds of devices on a left bar. Over here we have our add elements button, and we'll be using all of these modules to form content and to allow us to put content onto our site. And you can either drag and drop these onto the page or you can just click and we'll add them in. So that said, we're gonna now go ahead and start sectioning off our web page 8. Homepage Foundation: So now we're going to go ahead and translate our wire frame into web flu so we can start building from a foundation to a finished design. So I'm gonna start with my header section and this will be like for most of the sections, as far as the routine to where we'll add a section from the elements panel. Then we'll add a container, and I'm gonna add a knave bar, which I scroll down. There's a nap far right here. And then we're good on my navigator, which basically shows. But I've included on my page. I'm gonna click on this section. Name it. Header. That should be good for that section. And what makes my body selected to Where are the next section include the container? And in my case, I have a header. Well, actually, before I do that, make sure my containers selected one of two grids. Two columns. If you want a mix and match your grid, you can use these settings. But I was gonna keep it these two columns and end my column. So I'm gonna make sure my column one is selected. I'm gonna have a header beneath the header. Would have a non ordered list. So if I scroll down it here, I ordered a list, and I'm gonna do the same thing for column to when a select heading one. Copy some reason, command, see or control. See if you're on a PC, select in my column to and then Paste. How did the same thing for the honor list. So select it. A copy slept column to paste. And when they select my section again And when I name this one location, dash hours and now on to the next section, Trump's gonna give the body selected next section container. When this one I'm just gonna have and h two and then beneath at age two, we're gonna have a button. It's gonna be like called the action section. So it Celeste, my section the nameless actually see ta short for called to action section. Now moving on, gonna add another section with a container and then in this container is gonna be similar to my 1st 1 So when I have heading the nature one and then beneath that one of three item blocks of basically I'm kind of three def blocks, which is just gonna hold separate kinds of content. You need three of themselves. Make sure that selected copy, then paste two times two or there's three of them and then I'm gonna name this section. Featured dash items. Okay, moving on to the next section is gonna be about me section. So at section the container within that container and what have heading And then a paragraph block. And underneath that I'm gonna add by selecting my section when, at a class to it called about us. If the last couple sections in at a section a container and add three def blocks, you're going to be my social links. Some copying a pace to dip blocks select in my section from name it so sure section and in the final section at section on the container And within that container, I'm just gonna have list and keep it a Nord erred. And then beneath that list, I was gonna have a text block gonna make shirts in the container, not the list. So the textbook and I actually wanna text block beneath my social items when I use it as a hash tag area. So drag us back into my social section towards showing up right there and then for this final section. I'm just gonna name it my footer. Okay, so that should be it as faras having the foundation for where one of the my content in and then styling it at the same time. So once you guys are finished with creating a foundation for your home page, post your web flow link to your class project so people can view your work in progress and define that used need to go back to your dashboard at the settings button on your site. And in this sub domain that would flow dot io you're l will go directly to the site you're working on, and now in the next video, we'll start adding our content and styling for our design. 9. Styles Pt. 1: So now that we've set up a foundation for our site, we can start adding styles to it and pulling these styles from some elements I liked from my mood board as faras typography, choices and color. And so I added some different content to what I've laid out the previous video toe where I added a heading in this menu area. And then instead of the location and hours being in a grid, I just added to def blocks and then kept the heading in the list. And then also in the social Media section, instead of having dead blocks, I used link blocks and this was manages for an easier layout of how things move around Someone to start in the header. Make sure this you sit there, OK, and I'm gonna give it a background colors one going here. I want kind of a gold color. There you go. And I want to save it. Someone hit this button toe, add the swat so I can use it for later. And I want to get rid of this great box, which is gonna be from her knave bar. Don't click my nap bar. I want to give it a class call this. I mean yeah, bar. And basically, you can't customize you're elements. Unless it has a class name. It doesn't have a class name. You won't be able to access these styles. Panel Someone going to background when I go to transparent. That would take away that. Okay, now I'm gonna go to the heading. Give it a class name of logo title. I'm gonna add three point pizza. I'm gonna to typography module when a color of white and I'm with the font to be I was world. And then I'm gonna change this to upper case. It's all caps and give us tracking and I want the weight to be normal. Perfect. So now I'm gonna add my logo image someone to click the brand box who set up when I go to add elements, I'm gonna add an image replace. Imagine that an asset manager and I've uploaded the images and icons and textures I know I wanted in my design and basically to do that use go to your assets panel here and upload and you can upload all your files and will keep it in this library. Someone add this and not gonna mess of any settings. That's perfect. So I'm gonna go into my menu and I'm gonna style these links. So I do this pain have item. These were gonna be also hold all caps and then I'm gonna give it some lie night or not Lie night, but tracking when you change the color and increase the font size actually want this to be flight legends of find sites of 16 pixels. So now I'm gonna make thes same styles of basic Liam's gonna go here at a class, and then main item comes up a copy over their styles and I'll do it for this one too. Perfect. So now I kind of want to rearrange layout up here, so I wanna go back into my container. And actually, since the Knave Bar has its own container, I was gonna go to this one because I really want to control what's inside of thing similar to continue, I would do mean of bar container, and I'm gonna get a layout. I'm gonna use the flex box display setting. You can use floats if you're familiar with those which kind of pushes things left and right . I really like the flags box layout. It makes it really easy to kind of make some interesting layouts. So this one is just gonna be a basic so own want everything justified, centered, And I don't want them stacked on top of each other, someone to change the direction of the flex box to call him. And then I'm going to go to a line center, which puts everything in there and then just a small little change. I want to put my brand or my logo on top of this. There we go. I'm just going to go now into my brand link. I was gonna call this love you, and then I'm gonna give it a top margin, 20 pixels. And so these outside buttons will control your margins. And how I'm controlling is I'm just holding down my mouse, and then I'm kind of moving up and down. You can control it with that. You can also just click and enter the exact amount if you want Proportional, even sides toward you want 20 on top? Tony on bottom, you hold the Ault option key and drag that and we'll do both. And then these inside buttons are gonna be for patting, which is the space inside of these boxes. So this was good for now. Now we're gonna move to the hours and locations section. 10. Styles Pt. 2: Now I know up front on a background image in this someone go to this section, which is right here. Number the background and add a background image. So what of my assets? I want this one over here. That looks good. I'm gonna use this image as a high. DP Eyes was just gonna be a higher resolution. I want to move this around a bit. This seems good. And now the my type og ra fee is gonna be a little too light for this. Someone darken it up when I hadn't overlay it. Kind of measure the transparency, my overlay. So this is good for now. Now I want him make some styles to my body overall. And so if you select a selector, you can see this all pages. So these are very global styles that will affect certain things. Right now, I just want to change my body fund two pt Sarah off. I want those to be 16 pixels and white. That should be good for now. Now I want to go into my heading, which is in my location in our section. I want to do a style for all my H one headings. So click this again to select a class. And then there's are a tag already set up for all h one headings. Someone to change this to Oswald Normal all caps, one pixel for the tracking. And I want these to be the gold we've been using. Now, I'm gonna go into my in order to list my going to the settings and just hit no bullets. Those bullets aren't there under the same thing for this one. So but, uh, my other content block ordered list. No bullets? No. When I add some information, someone going to my a Norden list list item, and I'm just gonna add a textbook copy did. And then we're going to this other list item and paste the same one. And with this top list item, I want this to be bold. So I just highlighted it. And that makes a bold no gonna get of this last one. And since thes air similar in a copy of this list item into the next diff lock I have down here paste. There you go. I want to give it of these. That should be good. Actually meant two more again and then my changes headings to our hours. Oops. And do that You can undo things by command Z or even hit the undo or redo buttons. Um, this this should be fine for now. I actually don't need this button text here, So I want to go back into my hours and location container. And, like, we did appear when he use class name, hours, dislocation, container, they were gonna use flex bucks again to position these. Someone's going to just justify center and then actually want justify space around, give that space and one last thing on a good in my sections block and just give it some pad ings. And when a hit the old option key or the control key on PC's pulled this down, just give us a more space. Actually, in a lot of space, about 50 pixels should be good. Okay, That should be good for now. No, there's a call to action section someone click on my section, section the name, and then now I want to give it a background color and kind of wanted dark gray, something like I don't see. That should be good. A little bit lighter, Erica, I'm going to save this evident dark gray change this to so grab people the user's attention And since this is a different heading than these, I'm just gonna give it a specific class is me C T eight title and everything is different is just the color is gonna be white and how to style the button. I'm gonna go into the link Name this c t A beauty in for button. I want the background to be this gold. Do you know what? Remove it. Go go on the phone to be Oswald Oh, caps when the tracking And then I actually want this to be dark gray And then the background will be the gold perfect. And when going to the border real quick, just give it a little bit more rounded corners for five pixels should be okay and I'm gonna go back to my c t a section I've got a typography and just give it a center line toward pushes everything in the middle and then we give it a little bit more padding like I did the previous section 20 pixels should be good. It looks like there's some margin on this someone to go in here. That's inheriting some top margin since it's a title and all that heading tags have margin . Something to go in here. That 20 There we go. Okay, that's good for now. 11. Styles Pt. 3: Now, I'm gonna go back into the sea. Featured items when I go in here, featured items and then I have my def blocks with my heading my out of class to this and it's gonna be item title. I want to change the background, another background, but that font color to the degree. And I also want to choose, actually, just to get things simpler, I was gonna get all h two headings. Now, change that too, The dark gray. And then it shows up on the other ones. So we're not repeating ourselves all caps and with a fund to be oz wand normal and then a little bit of tracking Perfect. So this at some information here, you know, when I add some paragraph styles and this paragraph style again kind of a global paragraph style, it's gonna add these color PT Serif is great. 16 pixels is OK for now. I was gonna add some more information. Okay, Perfect. And in the section on a texture in the background, someone go to my this section right here featured items that works and without a background , when you add a background image, I don't want to add this texture Just very subtle. Yeah, that works. And I'm gonna want and overlay just a white one. It's It's not too dark. That should be good in us. Now I'm going to do the same thing when it comes to positioning off the someone going to the container and add featured items, container, goto layout, flex box and then things will start moving around. I want to be centered or space your own. And since it's heading, is inside of the container were using It's gonna be a affected by the style. And I don't really want that Someone take this out of the container for now just so I can focus on this Featured Adam container down here Now, everything should be working. I'm gonna do a line center actually wanted a line top to the titles are all on top. And then I'm gonna go individually into the div blocks to change some of the styles. So when I call this featured item and since we have the flex box set up in our container thes child settings which are the elements inside of the container, we set flex box on these show up to a recon kind of adjust how it works and someone apply this featured item style to these other ones of the will work the same way. Okay, some using the don't shrink and actually looks like the expand works a lot better. So we'll keep it at that. And now four, my container or my section. I'm just going to go to my topography and do a center line. And actually, I like you like this, but I'm gonna go into my H one call. This featured not featured. Yeah, Featured item title and just Teoh centered on that. That works perfect. I'm gonna go back to this section and just give us a more padding is there's some more breathing room within the box we have going on 30 picks was good for now. Great. And into the story and photos. All I want in here is a background image of my section selected minimizing that going into my background, adding the image one Heidi p. I gonna want it in a good spot and you can even control it even more with the adjust buttons. And again, I'm just holding my mouse down and dragging down. You should be good and then I also I'm gonna want a dark, overly again. Just a little bit. 30. Should be good. Okay, I'm going to change this to our story and then just add some more content here, and then this is gonna be different from the other paragraph tags we set up. So I'm going to our story content typography. Just change it, toe white. And I'm going to change some things in here. And then I'm gonna give this a little bit more padding in the section from hitting the story in for this section, going to lay out holding my fault. Option key. It's giving out a little bit more space. Three pixels should be fine. 12. Styles Pt. 4: and social media at a little title here. Double clicking. Connect this. And then, like I did with logo I'm gonna add I want to go into this link block and add an image. Most girl done here. Image I want to choose. Click the Link block. And when added image and I don't need another one, I just need one more item in this container, and it's just gonna be another text block. This is gonna be hash tag content. The typography is gonna be Oswald for the front star grave color or caps, one pixel. I want this to be 28 pixels. Should be all right. Actually, 20 forces shit work section, typography. I'm just going to do a center line that I'm gonna go into these link blocks. Call this social link. I wasn't handsome margin. So right Margin actually would have some left margin instead. That's all of them. I guess it's better someone had some right margin. 20 picks of seem alright. And the normal s and Barda mark bottom margin was 20 pictures. Yeah, 20 pixels should be good. And then, just like with the future of times, I'm gonna add that same texture to the social media section Some in section and I'm gonna go to background at background image And there's texture on what, Adam overly. It's that white over laburnum. I'm gonna bring down the transparency that should be good. And finally, the fitter section. So I'm gonna go into my own order list, but I'm gonna use a text link. I'm not gonna worry about that right now and that I kind of want all my other items too. Like this someone. I delete the empty ones and then copy and paste this when I just made. And then I want to change the type biographies. This is going to be footer. I mean, you item, except to getting to go to bear ain't going to the link. So let's take off this class to remove a class I need to do is go back to your styles button, click this and then hover over it and you couldn't remove. So I'm gonna go into the link in Name it Footer. I mean, you item women typography do a dark gray. Actually, I want white. I don't want this. My foot or section toe have the dark gray background There you go. But I do not want these bullets. So I'm gonna go into my a Nord list. I'm going to the settings and no bullets. Now, I'm gonna go back to styling my link foot or menu item. Change the front. Oswald. Keep it in normal. Oh, caps. I do not want thes underlines somewhere. Set that to none. Now I'm going to apply the same selector to the rest of the items. Then I wouldn't want to lay out these in a different layouts when a good in the container and in this footer container and I'll give the flex box Leo kind of what we've been doing and actually went That's not gonna work. We can leave that there. But what? I need to be in the list. Footer menu. Now we can use the flex box. Okay. Basically, my foot or menu needed a with, So I just added 100%. Please lay out like that. Now I need to go back in here. Make sure these are not underlined. Perfect. Okay, I just saw that I needed deaf this sizing not on it was messing up layout. So now I'm gonna go into my footer 13. Final Stylings: and give it this padding. 20 pictures should be good. I must do a little bit more. 30 pixels is good. I don't like how the social Media give us some padding to 15 and there's gonna be this heading margins Social Media title. I was gonna take that away. Okay, Cool. Hurry. And then one last thing I'm gonna add in the footer container. What? I had a did block or a textbook, Actually, I want that. Just I don't want that in the container, and then I want to set the stiff block. Is just gonna be a with textbook. It's just gonna be a copyright. Typography is gonna be centered. Adam's gonna dio change this, Oswald. And I want this to be light. That would give it a top margin. Justin pixels perfect. So you can kind of see how quickly it is to create home page, just the tools that Web flow gives us. And so go ahead and start designing your home page based off of your inspiration and your wire frame structure. And then once you're finished getting all the styles in, make sure you publish your site. You'll go appear in your copy, the link that you've had on the discussion board and we can see kind of how your sites are 14. Final Remarks: So I hope you guys have enjoyed learning about the mobile first design process and how we've approached that into our projects and also hope you guys have enjoyed getting introduced to and learning Web blow from a friend. You can see how cool it is when it comes to creating fast Web pages and get a loan websites and also creating a design that's live in the browser that's adaptable to code. So if you're interested in taking your designs a step further, I highly recommend going to the Web flow website and going into your dashboard. Then, in this toolbar down here, there's tutorials and courses, and they offer a lot of awesome material as far as what you can do with blood flow. When it comes to interactions like hover states, transitions and some cool other effects, you can do so again. I hope you guys had a great time doing this, and hopefully I'll see you again in future classes. Thanks