Design the mobile website

Course contents
SECTION: 7
Color 3:42
SECTION: 10
Page adjustments 1:28

Questions

0
0
0
0
0
0

Course info

49 lessons / 3 hours

Overview

Web design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Photoshop. We’ll start right at the basics of Photoshop and work our way through to building professional website concepts.

I created this course for people new to the world of website design and Photoshop. I created this for people nervous about changing their careers into the world of web design.

You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what types of files and code are required at the end of your job. This course is for people serious about making money as a professional web designer.

Now let me help you earn more money, get that job and become more awesome!

What are the requirements?

  • You'll need a copy of Photoshop CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Photoshop or web design experience is necessary.

What am I going to get from this course?

  • 49 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

This course is for beginners. Aimed at people new to the world of web design. No previous experience is necessary. 

This course is NOT suited to people highly experience in the world of website mockups in Photoshop already.

Course duration 2 hours 43 mins

Get the completed files here
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

All right, in this video we're gonna  look at mobile design. And probably the most important part when looking at  building a mobile site is probably the  navigation, how you get round. Because the limited space,  you can't have our big menus like we  have on our desktop view. Knowing which one to pick can be difficult. A really good site here is this, um, access web do net site. It's an incredibly long link.

So use the link on the screen now to go  and find all the different useful links everywhere. Now we're not gonna have a chance to go through them  because there are so many different ways  of considering mobile menus. But let's look at the kind of main groups. This one here where we've got this thing called the burger  or the sandwich. The nav sandwich or the three  horizontal lines, whatever you wanna call it. This thing here, clicks  and the whole site shifts to the right.

Okay? And this menu appears. There's another option here where they stack. So you can see here, this is the desktop view,  but when it gets to mobile, they stack  as nice big buttons on top  of each other and with some other ones. This one here, I like just the burger by itself. When it clicks, there's a dropdown menu from it  and there are lots of different options.

Have a look through the site. There's,  there's a crazy amount to pick from. They all kind of flavors. A similar thing. Um, the big thing to decide is whether you're going  to burger or no burger. So like Smashing Magazine, we looked at this earlier.

I watched this, if I collapse this down,  they've decided no burger. They've got this word menu and that's totally cool. But you can see even in my Chrome plugin,  they've used the burger lots do lots don't. It may be a fad. I think it's probably around to stay  as a nice new icon for mobile menus. Let's go and build one.

So  what we're gonna do is we're gonna start  with the mobile site. So we're gonna get started building a couple  of parts of it, okay? Dragging parts of the desktop across  and then rebuild the menu. So the things I wanna start  with is the navigation here and the hero box. So I've selected both of these by holding command  and clicking both of them or control on a pc. What I'm gonna do is click hold and drag.

Okay, but holding on the al key first click and hold  and drag, move it across. Kind of get it centered. This over here, okay? Line it up and you'll notice that they've all moved  to my mobile version. Okay? So I'm gonna zoom in.

There's a lot of work to fix it up. Okay? So I'm gonna zoom in a bit and what I wanna do is,  I'm gonna have to use this. So I'm gonna go to my navigation box  and the bring your own laptop logo. I'm gonna move across, I can't see it  'cause it's over this side here, but I know if I hold shift  and drag it across, it'll move along in a nice  perfect line there. You guys are there.

Perfect. And my hero  box needs to come up a little bit. Lovely. Bring your laptop. It's gonna be there. I'm gonna move it up to be centered.

And this navigation though is gonna disappear  'cause services just doesn't fit. So I'm gonna turn that off. I'm gonna draw my three horizontal lines. It's really easy. Just use the rectangle tool. Make sure your fillers set to white.

I'm gonna have my stroke set to none and I'm gonna draw. You could do it with a line tool  as well if you wanted to do it. I find it's just easy enough to use their rectangle tool  and make them feel like lines. It's a bit big. So I'm gonna zoom in. You find if you are nice  and close when you're working on it becomes  a little easier to work with.

If I'm far out  and I'm start dragging these lines around, they seem  to snap, but it's a lot easier when we're close in. So I'm gonna hold down alts and draw my burger. You can see here my smart guides. It's telling me that it's matching the distance away from  the top one, from the bottom one. Great. Now the burger's quite big, so I'm gonna select all  of them, transform them and scale 'em down a little bit.

Maybe make them a little shorter. Okay? So that's my mobile burger menu. Great. What I'd like to do is when that button is clicked, I'd like  to overlay all of this stuff here  with a new div tag that appears. So I'm gonna use the rectangle tool  and I'm gonna draw a nice big rectangle for my menu.

And I'm going to put it inside. I'm gonna give it a color. I'm gonna give it a color. I'm gonna use purple. Now I'm gonna use a little bit of transparency. There's no reason you have to, just looks kind of cool.

So I'm gonna change it down to 90% just so you can kind  of faintly aware, see the stuff behind it. Um, so when it slides down, you know  that it can be potentially slide back up  and it's not a new page. So let's look at doing some naming. So let's put my bringer laptop in the navigation menu. Okay? And this one is gonna be Navi, uh, box navigation.

What I'm gonna do is I'm gonna start a second one, okay? And this one's gonna be called mobile drop down. I am gonna keep everything separate. So I'm gonna grab the rectangle tool. Is that my rectangle? That's it.

I put him in there. I'm gonna grab these three guys. Okay? And these guys here are my burger menu. What I'm gonna do is group them together, okay? Or link them.

The gee way to do that is to right click them  and convert them into what's called a smart object. Okay? And I'm gonna rename it,  I'm gonna call it burger menu. Okay? I'm gonna slide that up into mobile dropdown. Great.

Now I've got that. I've got that. What I'm gonna do now is I'm going  to switch out my burger menu. So I'm gonna have two. So this is burger menu, um, inactive,  active, and I'm gonna have a second one, which is going  to be my burger menu active. 'cause what I wanna do is do what I've done in this site  here, where if I scale this down, okay, we get down,  okay, this is what I've done on my New Zealand site  where I've got my burger and I click it  and there's a little cross to know that you can click it  and close it afterwards.

So let's switch back to that. Alright? To create it, I could use a few different tricks. The easiest way I find to get a perfect um, perfect cross is  to click once, have a plus. I don't use X because X X's don't they look like X's? They don't look like a cross.

Okay? So what I want is a plus on its side. So I'm gonna use plus and some fonts don't look great  and they're using this technique  because they're quite stylized pluses. So er of regular is great for this one. And what I wanna do is transform it. So I'm gonna use my command T, okay?

Or Ctrl T on a pc. I'm gonna rotate it around say 45 degrees. What you'll find is that click apply. It looks like a nice good cross. I'm gonna scale it up a little bit. Control t, make it a little bit bigger just  to match my navigation burger.

Cool. And this is going to be, I'm gonna copy that  and I'm gonna paste that here. Here's going to be  Active. So what's gonna happen is that's gonna turn off,  they're gonna switch between each other. Okay? Actually, what I might do to make it clearer  for the web designer is  that I'm gonna put the burger menu, okay?

In the actual navigation itself. So when people turn that on  and off, it's kinda behind there. And this guy's at the front. Next thing I need  to do is add the text. So I'm gonna grab my type tool  and I'm gonna click and drag a box out. And I'm gonna type in my bit.

So it's gonna be services I'm gonna do in caps. I'm gonna do Portfolio,  I'm gonna do team, and I'm gonna do contact. I'm gonna select them all, change  the font, dragging it down. I'm gonna use Myo,  I'll use Roberto, Use Roberto Light. Okay? Now what you wanna do is make sure  that there's enough space between these words.

You don't want to have people clicking one  and inadvertently clicking the other. So a good bit of line spacing is great. Mine's got it by default  because I've been playing around with it already. Um, if you grab your type two  and select everything, what you wanna be looking for is,  let's click on this icon here. Bring up your character panel. This option here, yours is probably set to auto,  which is 20 eight's.

Probably gonna be about 30 in terms of the line spacing,  I'm gonna crank mine up to about, uh, 60. Okay? You, depending on the font size  you're using, what kind of font? Um, it's up to you. Now that's gonna work for me. That's gonna work for me actually maybe even  a little bit bigger up to 70.

Just so there's a nice big gap between them. So big Fat Fingers can click on them really easily. This is gonna be my nav  dropdown, okay? And I'm gonna scale that up using Lovely. So that's going to be my dropdown notification. Now I need to go through and transfer all the things  that I've been doing desktop and make them work on mobile.

And we'll do that in the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025