Skip to main content

How Wide for my Website

Lesson 5 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

How Wide for my Website

Lesson 5 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

5. How Wide for my Website

Next Lesson: Existing UI Kits

Lessons

Class Trailer

Getting Started

1

Getting Started with XD

02:21
2

What is UI vs UX

06:19
3

The UX Brief & Persona

11:22

Wireframing Low Fidelity, Type, Color & Icon

4

Wireframing (Low Fidelity)

01:58
5

How Wide for my Website

13:06
6

Existing UI Kits

07:49
7

Working with Type

09:09
8

Basic Colors & Buttons

14:14
9

Free UI Icons

11:45
10

Footers & Lorem Ipsum

05:27
11

New Pages & Artboards

04:20
12

Class Project 01 - Wireframe

11:11

Prototyping a Website

13

Prototyping & Interactivity

08:53
14

Create a Popup Modal

07:57
15

Prototype

02:54
16

Groups & Isolation Mode

02:30
17

How to Use Components (Previously Components)

17:19
18

Production Video - Left Nav

03:52
19

Repeat Grid

05:27
20

Updating Components & Repeat Grids

08:54
21

Prototype Tricks

06:03
22

Navigation Tricks & Tips

04:48
23

Class Project 03 - Components

04:07

Prototyping an App

24

Mocking Up an App

09:40
25

XD App on Your Phone

08:04
26

Fixing the Position

01:01
27

iPhone & Android Status Icons

03:10
28

Production Video - Login

06:45
29

Sharing Wireframes

13:32
30

Recording Your Interactions

03:13
31

Class Project - Wireframe Feedback

01:21
32

Mood Boards

07:43
33

Class Project - Mood Board

00:59
34

12 Column or Grids

04:57
35

Working with Colors

09:02
36

Tricks for Using Colors

06:34
37

Gradients

03:50
38

Class Project 06 - Colors

02:14

Text & Drawing

39

Use Web Safe Fonts

18:00
40

Character Styles

06:59
41

Font & Text Tips Tricks

05:43
42

Plugin Lorem Ipsum

05:39
43

Paste Properties

13:15
44

Class Project 07 - Text & Buttons

02:21
45

Draw Custom Icons

04:13
46

Strokes & Lines

14:28
47

Pen Tool

14:34
48

Drawing Practice

07:15
49

Production Video with Tips

12:27

Working with Illustrator, InDesign & Photoshop

50

Illustrator in XD

09:34
51

Class Project 08 - Custom Icons

01:49
52

InDesign in XD

11:38
53

Pros & Cons for Images

03:58
54

CC Library Connection

11:01
55

Adobe Stock

05:20
56

Free Images

01:48
57

Masking

06:44
58

Photoshop in XD

08:41
59

Infographic

12:12
60

Class Project 09 - Hi-Def Mockup

05:38

APP Design

61

Mobile Phone Mockup

18:08
62

Class Project 10 - Mobile Website

01:24

Placeholder content & Plugins

63

Hidden Features for Repeat Grid

05:17
64

Plugin - Content Generator

04:29
65

Plugin - UI Faces

03:15
66

Plugin - PhotoSplash

04:31
67

Plugin - Copy Cat

03:19
68

Advanced Asset Panel

04:37
69

Advanced Symbols

07:52

Micro Interactions

70

What are Micro Interactions

07:21
71

Button Grow

06:13
72

Animated Image Gallery

06:39
73

Full Vector Change

08:19
74

Class Project 11 - Micro Interactions

05:12

Prototyping Advanced, Voice Interactions & User Testing

75

Time Delay Transitions

04:42
76

Popup Menu or Modal

12:16
77

Animated Mobile Side Nav

03:26
78

Drop Down Menus

03:24
79

Drag Transitions

07:19
80

Number Ticker Scroll

06:51
81

Alexa Voice Commands

09:37
82

What is User Testing

16:53
83

Unmoderated UX Test

12:07
84

Class Project 12 - User Testing

02:23

Pitching to clients & customers

85

Mocking up in Photoshop

09:21
86

ProtoPie

02:40
87

Add Animation Using After Effects

09:39
88

Export Images & Assets

12:56
89

Export Code Using Design Specs

10:49

What Next

90

Class Project 13 - Roar Cycles

10:29
91

Conclusion

05:32

Final Quiz

92

Final Quiz

Lesson Info

How Wide for my Website

Hi there. This video is all about working out how wide your design should be. Okay. So we're doing website but this works for mobile devices as well and apps, how wide should my first page be? There's some easy tricks to work it out. Let's get started now. Alright. I promise you would get started and we are kind of let's open up XD. And the first thing we need to do is work out what to start with in terms of page sizes. So we're gonna be working on a web first design. Okay. Because all of our users at least existing company are using the, using the product via the website first and only small percentage of using it via mobile, you'll have to decide on your product and what you're doing. Yours might be mobile first. You just start with this for this particular course. We're going to work with mobile and then build an app but you might be working just with an app or an ipad app depending on what you're doing. So to get started with, just always pick this one to get started with this 9 w...

ide. Okay. And we're going to change the size as we go along. So just click on this and it opens up a page. Let's save it. It's gonna file. It's gonna save, I'm gonna put mine on my desktop. I'm gonna make a new folder for it. And this is my instructor. HQ mm hmm mock up. Okay. That's the folder that's gonna go into. If you're on a pc, there's like a new folder icon at the top or just dump it on your desktop. Now if you are in a Mac and you can't see any of that because you're like, oh it looks like this. Click on this little arrow here, you'll be able to see a lot more of the details like favorites and click on desktop. I've made a folder. I'm going to give this file a name. I'm gonna call it instructor. HQ. And this one's the mock up and this is going to be the 1.0. Give it versioning numbers like this. Okay. And when you make teeny tiny changes, maybe spelling or just a little bit of changes you'd call it. You? Re save it as .1 and if you make big fundamental changes you call your change that kind of hole number there. Okay. It's just a good way of keeping track of where you're at. Especially if you send versions out to a client and they're like, hey, have you done this? And you can double check they're looking at the right version and not like out of date version. Cool. Save It. So in terms of the page width. Okay, this is, it says 1920 it's the pixels across the width and that is too big for our website at the moment. Let me show you what I mean. So let's check out this website here. So you can see it stretches to the edge but there's a kind of an internal boundary. That's why we use 1920 which is kind of like the full width of the screen that I'm using. Okay it's a really big screen and really common really large size. And but within here we've got some like internal boundaries. Can you see everything kind of lines up within that little gap there like this one as well. You can see the color stretches to the edges and but the nav background does but not the inside part. So there are some sites that do the full use of the screen which is really cool. What we can't do at the moment though is within XD to see this one here responds. Can you see the justice as we work along? We can't do that next day. We just have to pick a size and design for it and then later on we can adjust it for the different breakpoints. But really we can't make this happen until the website actually gets coded and done. So we need to pick a size and how do we do that? Let's jump back into X. D. So it's 1920 pixels across. So within here we need to put some boundaries, how wide should it be? There's a couple of good ways to check. So one of them is under W three schools dot com. This site here is just a handy resource for web design things if you type in browsers. So slash browsers And if you come down to browsers display, you can start looking at things like in the whole wide world in January 2018, what is the most common size? So in here this is a really common size to be using at the moment. It changes all the time. It's going to jump up to that eventually. But at the moment This is the kind of really common size. You can see 32%,, 34% even of the world. Use that size. The next comment is this. So if you hit this size and it all fits within this kind of width, Okay. It means it's gonna look fine on this, but these lower sizes, it's not going to quite fit in. But you can see the percentage is getting quite low. Now you need to decide who your clients are. So look at your persona. Remember our guy Dave, I want to say Dave can't remember, we just gave him a name. He's a technology person, he's going to have probably this size screen. So we're going to say this and above, you know, if we use the size that's going to cover everything, he's not going to likely have any of these lower ones. But you say you're working with, you know, a site that is maybe a developing countries that don't have not up to date screens. You might go for something like this. 10 24 is another common like there's a smaller size that you want to go for. The other thing you can to double check is and if you're working with a client who already has a website and you can ask for them to check out their google analytics. So I've asked for access to there's okay. So um I looked at the analytics and they gave me a sign in. They can give you like a view only access so you can't mess around with their stuff but you can have a look and what you're looking for is going to the audience check out their technology and I'm gonna look at their browser, wait for it to load. You can see they're all using chrome. Okay well at least 67% of them. What I'm looking for a screen resolution here, you can see a large percentage of them are using this 1920 you can see this 13 66 a good percentage of them. And then it kind of you can see this size here. Okay. That kind of fits with in between these. Okay, so 1400 pixels across. So if I do this size it's gonna capture this this this this this because they're all you get some smaller ones in here down to 4%. So if you've already got stats check it. The other thing you might check is and if the client comes and says yeah let's really work on this website. You might find that really you should be working on either the mobile version first or a mobile website version first or an app. You can check if they've already got data like this. You can go into things like mobile, look at overview, You can see in here a huge majority of this particular website, 88% are using desktop. So if the client comes to me and said, look, let's build this mobile app to refresh the site or mobile version of the website, I'd be like, oh, let's look at doing the desktop first because this is where everybody you might want it to be mobile. But really the, you know, majority of people are using it this way. You still might end up going this way, but at least gives you some data to actually talk about rather than looking at hunches and as well, if you're going to be testing on a product and see, you know, how well this mobile phone is going and click on devices and we'll tell you like you can see a huge percentage of them are using an apple iphone and you can do some sneaky stuff by looking at screen resolution in here to decide like what version of the iphone people are using. Often this can give it away all the iphones, new iphones, this will be an ipad. Um yeah, So all right. So we've decided we're going to use the size of 1366. So we're gonna jump into XD and put that in. Okay. So what we want to do is we want to keep this 1920 across because we like to design, I guess with this this extra stuff, this is the final thing we're going to be making. We want those extra stuff on the side here because Designing within the 1316 can be really tight and I'd like to see what happens with the flow on the outside. So what we're going to do is just set up a column in the middle here to give us that visual guy that's just kind of like light blue thing here. So let's do it. Have the outboard selected. You click on the name at the top. That's the easiest way. Okay, click on the word here. And what we want to do is over here where it says grid click on this and where it says layout. Okay, where this dropdown is, we're not gonna use square. It's done more for mobile app design. We're gonna use layout because we're doing the web one Now. In terms of the columns, I'm not sure what's here by default, but what we're going to do is the easiest way to get it exactly what you need it to be is we're going to say we want one column. You can click on any other box. You can see we've just got one kind of big column here. We can say I want this column width to be 1366. I'm going to click on any other box. And what it's done is it's worked out. The padding here on either side is 277 either side. And what I'm gonna do is I'm actually going to work within this wire frame just to this. I just want to know where those edges are and that's it. I'm going to leave it there. You might be working to a grid system, Okay. And you might be a designer working two grids or you might be a web designer and you know, you have to use a framework that uses like a set of grids. It's just handy for consistent layout. If that is, you now change it back to 12. So do this thing first, get it the right with and then divide it by 12 columns, clicking the other field. Okay? Or tab out and you can see it's just gone through and added a nice little grid. This doesn't export okay. It doesn't preview in any of the devices, it's just here. So when you're drawing things out and you're trying to line things up, you can see it snaps to it and it means you can start doing things where you get some consistency across. So everything fits within this grid system, we'll look at it a bit more when we get into the kind of high fidelity part of the course. So what I'd like to do though is click on the name, I'm going to turn mine back to one, make sure it's set to 13 66. And what you might find is that sometimes the numbers jump around. It's because the divisions are quite hard to do. 13 66 math wise is quite hard to divide by 1920. So you might find this changes a little bit. So I'm just gonna force to be won by 13 66. I'm going to make it my default so every time I make a new page it's going to jump to this, The next thing we want to do is just the view ports height. Just means remember when we looked over here and analytics we we looked at technology actually just jump to this one. Remember the kind of default display size was there? It is 1366x768. Okay, so that's the kind of initial view or view ports height just means when somebody opens up the website on their screen they're only gonna see they're not gonna see 1000 and 80 pixels. They're just going to c 768 and that return and that little imaginary line here, it's not imaginary. It's there. But that line there doesn't print as well, doesn't come out, it's just there to show you this is your above the fold, this is your stuff that people will all see based on if they are using that screen. So you gotta make sure all your call to actions above here or your hero images are above this line here. Anything below here. Okay, potentially has to be scrolled to see now. What we're gonna do is a bit of navigation. Okay? So the basic navigation before we move on is zooming in and out. There is a tool over here which I never use. Ok, click on it, click once you zoom in, hold down the option key on a Mac or the volcano Pc and click once and it zooms out. What you'll find is you'll never use it because you'll use the shortcut now. We're not going to go into too many shortcuts but there's just some that are just the tool is too hard to use. So on a Mac, hold down the command key so look down your keyboards, the apple key and hit the plus on your keyboard and then I'll zoom in. Okay if you hold down the minus, so Comanche down, hold minus it zooms out. Okay, so plus plus plus zooms in command minus minus minus zooms out. If you're on a pc, it's similar, you hold down the control key so look down, grab the control key and hit Plus plus plus to zoom in and minus minus minus to zoom out. The other thing we need to work out is how to move around. Unlike some of the other adobe products, there's no kind of scroll bars here, so look down the keyboard, grab the space bar key, hold that down your hand turns into a little hand. You click hold and drag it around so give that a go hold space bar, click hold, drag couple more things before we go because we're looking at the grids here, they're quite dark. Okay, It's hard to design over the top so you can click on and see this little colored box here. It says columns, click on it once and you can pick a different color if you like. I'm going to leave mind whatever there was, I can't remember what it was row vaguely this color, but I'm going to lower the capacity of it. Okay, so you might pick a different color, different Hubei dragging this around now, I've really messed it up. Okay, and just lower the opacity so there's a hint of it so I know where the edges are but it's not interfering too much with my design. Getting in the click out to other things I want to do zoom out a little bit, remember your shortcut command minus or control minus on a pc click on the name and what that does is it gives you the kind of overall settings for the outboard. That's what this is called the big empty page. What I wanna do is I want to be able to see the bottom slider here and make this quite long because we're going to add lots of bits and pieces to it. You'll end up changing this depending on your content, but I just want you to make it nice and long now. Plus what we want to do is rename the art board. So you do that by double clicking it here. Okay. And just deleting what's in there and I'm going to call this one home page home page even And I might give it the pixel width just to help the developer later on. Everybody knows that that's how white it is. I often do that. Okay. Just because the actual pages 1920 across, but I wanted to say, look, that's what I'm designing for here. Nice. Let's save it file save. I'm not gonna do this long version anymore. I'm going to start using some of the easy shortcuts, like command s on a Mac or control s on a pc and we're ready to get into the next video. Alright, Let's jump over

Class Materials

Bonus Materials with Purchase

Six Completed Files
Exercise Files

Ratings and Reviews

Haseebullah Johar
 

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

Student Work

RELATED ARTICLES

RELATED ARTICLES