Block 1

 Let’s get working on this assignment then. So here is the Penpot file that already exists and you can get this from the resources section. And you can see that while it’s got a kind of a layout, it’s almost wire frame ish. It’s got some icons, it’s got text. It’s just the text is not really anything. It’s very small. It’s also this kind of cartoonish comic font. And so it’s not, at the moment, there’s not really any typographic hierarchy going on. Our eye is entirely led by the icons and the layout itself. I’ve made all of the text black on a white background as well, so we’re just focusing on the typography itself.

Now color does come into it. Even shades of gray will have an effect on the typography overall. But for now, we’re just looking at changing those font features.

Finding the existing typographies

If I go to assets, I can see under the typography section here, these typographies are already set for me. So every single font is this Comic Neue and it’s size 10. It’s regular, and it has a line height of one. We have different typographies for the banner title, the body text, the emphasis text on the body, the card heading, card number, which would be these numbers here, the logo, which is up here, the placeholder text, remember, that’s what’s inside of an input box, the sidebar headings, which would be this text here, and the sidebar navigation links as well.

So we’ve already got some typographies. We might want to make some more. We’ll have a think about that later.

Choosing an appropriate font

So first up, I wanna think about what kind of fonts do I want here? What am I trying to convey in this design? Well, it’s a utilitarian design. This app isn’t about personality. It’s not supposed to be exciting. It’s supposed to be functional. I want to be able to get as much information as I can at a glance. So readability is very important here. So I’m thinking probably a sans serif fonts, maybe geometric some letters that are very easy to read.

So when I go to make my font choice, say I am going to start with the title of the banner here. I’m going to edit it. And if I scroll down through these different fonts, I don’t really know what they each look like, I’m not going to go through and click every single different font to try it out, because we’ll be here forever. Look, this is just in the realm of the Cs. So I’m going to jump into the Google Web fonts site, so I can actually just browse the fonts more easily over there.

So let’s jump over there.

Now, the Google font site just has a list of all the fonts, and you can also filter your fonts by these various filters here. They’re fairly simple. So I want a sans serif and I want, I’m thinking geometric. Those nice, very easy to read shapes , although most of these other types would be pretty cool as well. I think super ellipse or glyphic, they’re probably going to be a bit trickier to read. They’re more sort of slightly decorative style. So I’m gonna go geometric. So that’s instantly filtered the fonts by geometric fonts.

Next up, I am going to choose what I’m going to have in this preview. Like this text is nice and everything, but it’s not telling me enough about the details of the font. Now I’m gonna start off by gonna type the name of the site itself ‘cause it’s kind of important that that looks reasonable and readable. And do you remember earlier I told you about those letters that it’s important for them to be distinctive in a font? And that would be number 1 uppercase I, lowercase l, and also uppercase O and 0. So you can even see when I’m typing the text into the input box here that the uppercase , the lowercase, no, the uppercase I and the lowercase l are both identical looking. You can’t tell the difference between the two.

So here I can now start having a look through the fonts and see what I would like to use. This one feels a little stretched out. I think Poppins is quite nice. What’s also important to me is I want to make use of bolder weight fonts in my design, and I might also want to consider using italics. So it’s kind of useful to go into these fonts and check out what’s available to me. So you can see this does have different weights and it does have italics, so that is handy. If I did want to do that, let me get back. I do like DM Sans, that’s handy. And as it’s a variable font, I know that it does have different weights and italics available to me. Although if I do look at DM Sans, you see again how this issue with the uppercase I and the lowercase l are identical in this case, so maybe I won’t go for that one.

So let’s keep scrolling down. Maybe we’re looking distinctively for differences between these two letters, but more of a difference than just that. Ideally, we want an L that has a little tail on it like that. Yeah, there we go. But this is still a bit rounded, Comfortaa. You can tell that that’s a cozy font with its lovely rounded shapes.

Hmm. What do I like the look of? Ah, Montserrat actually has alternates. Now alternates are a different type of the font, so another version of the font where it has alternate letters for things like that L and that uppercase I to make them more distinctive. So that’s very handy. So I could bear that in mind.

Maybe I could go back and use Montserrat for some things. Instrument Sans, that’s quite nice, clean, easy to read. Hmm. Readex Pro. I like the bold weight of that. And these are very distinctive letters. Now let’s have a look at what the weights are available to me so I have extra light to medium. I don’t have any slanted options for italics, but that’s, it’s looking a, that’s a pretty good one.

So I don’t mind that. Uh, DM has a mono spaced version of the font Didact Gothic. That is quite cool. And Gabarito, and look that very distinctive letter shapes there has different weights for me, but it doesn’t have any other any italics, although I think maybe in a dashboard the likelihood that I’ll need italics is potentially less. So maybe that’s not a factor in it.

And I think after all this scrolling through, I think I’m going to go for a font that I already know works, um, that I do believe is in here, which is Inter. I mentioned into earlier as being a font that was designed for interfaces, and so this is quite a good option. But you see, whilst it does have the same shapes for the uppercase I and the lowercase l, it does have a variety of different weights as well. It’s very evenly spaced, very large x-heights, this lower part of each of the letters, and it’s easy to read. So I think I’m going to go for that one.

Applying the chosen font

So now I’ve decided which font I need to go to. I can just go back into Penpot and find that font in the Font Family interface.

Banner

So let’s start off here with the banner title, and I’m gonna search for Inter. Now we go, we’ve got some text now. I dunno if you remember before that I mentioned zooming to a hundred percent when we’re designing the text. So that’s using the reset button so that we can actually see how is it going to look to the user.

Now if we think about the hierarchy of our typography here. This good morning message is not the most important text on the screen. I mean, it’s greeting someone so you want them to see it, but really the information they’re looking for is this task completion rate, their deadlines, their inbox, so it, these probably want to be a little bit bigger than that. So I’m going to maybe start off with a base size of 21, and I’m going to make it a little bit bold. And I’m gonna keep the line height at one because this text is only going to really be on one line. It’s unlikely that it’s gonna be so long. It will drop onto two lines. So let’s save that for now.

Body text

Now if I go through, let’s change the body text next ‘cause there’s quite a lot of that. We’ll do Inter for that too. So you see that instantly has changed and become a lot more readable than that comic typeface there. And, really I wouldn’t recommend ever using text lower than 14 in size. Ideally you want it to be even bigger, but 14, any smaller than that, and it starts to become very difficult to read.

I dunno about you, but I usually wear glasses to read text and text at size 10 is a bit tricky for me, so I’m going to go for 14 and just a regular weight. And because it’s body text, I’m gonna try giving it a slightly larger line height. I’m just gonna go for 1.2 as a standard, and if I notice any text where that’s becoming an issue, I’ll change it later and that’s instantly opening up my UI.

Emphasis text

It looks a bit quirky if the in the emphasis text is different, so I’m going to change that and I want the emphasis text is like the body text, but just an emphasized version of it. So I really want that to be the same style in size, except I’m going to make that a slightly heavier weight. I think I want it to be very easily distinguishable against the other text, and it needs to be the same line height as the body text as well. Okay. So I’ll check both of those, and that’s starting to become a little more visible. Now I can start zooming out and looking like at a glance, at an overview how this text is working. It does look very strange with the sidebar and the header text being so small, but we’re focusing on the main content right now.

Cards

So, I dunno what stands out to you, but to me it’s these numbers are very small and these headings that are the titles of each little card, these little boxed areas, they’re very tiny and they’re really important that we know what those are. So let’s change the size of those and the font for those.

You could have two ways of thinking about this here. If you are looking at the content of each card as being the most important, and if you can identify what that content is without the heading, then maybe the heading could be quite small, and maybe the heading should be smaller than the content itself. But I think in, in this instance, we actually have two cards here, the task completion rate and the team activity that are kind of similar thematically. They’ve got both got numbers and they have links to view a sort of more detailed view of each statistic. But being able to distinguish at a glance between the task completion rate and the team activity is important. So the headings here are important, so let’s change those card headings.

We’ll go enter let’s make those… Now, if the body text size is 14, we want to make it bigger than the body text, and maybe quite a fair bit bigger. So let’s try 18 and let’s give it a slightly heavier weight, but maybe not too heavy. So 500 is nice, kind of in between medium weight. And we’ll give that a line height of one two as well. Actually 1.1 because it’s slightly larger text, at 1.2 might be a bit too roomy. And let’s save that for now.

Okay, this is starting to become a lot more readable. These numbers, right? Let’s make these distinctive. Well, these numbers are really important. These are at a glance statistics that give us information about what’s going on. So we want those to be really nice and big. We don’t want ‘em to overly dominate the interface, but we want ‘em to be probably the most noticeable thing at a glance in the interface. So I’m going to go to the card number and change that again to enter and line height of one. That’s quite important when we’ve got layouts like this where we’re just doing a number or something. If we made the line height bigger, there would be quite a lot of space around the text above and below the text itself, and so one makes it easier to fit it into its surrounding layout. And I don’t know, let’s throw this into something a lot bigger and see how it goes. We’ll try 60 to begin with and make it medium weight. Now we could go really bold and make it quite a dramatic feel. So maybe if we were going like 900, you can see the feel that that suddenly gives it that kind of dark, bold feel. It’s almost retro in a way. We could try something like that, but I think that’s maybe a little bit dramatic. So let’s try something closer to 700 or 600. 600 utilitarian. 700, starting to look a little bit more characterful. Is that just me? I’m gonna try 700, but I’m gonna bump the size down a little bit just to make it fit more nicely and align more nicely to the content in the cards alongside. So if I bump that down. You can see that as I change the size, it’s bringing the content underneath up.

Alignment

Now, ideally, and we’ll look more in detail at this when we go to layouts, it is more pleasing to the eye if the text lines up from left to right. So if you look at this line here, and I’m going to hold down if I remember the correct command.

If I hold down the alt key, it actually shows me the measurement lines, which is really handy. So if I hold down that, I can see which are aligned, and I can see that you see the text here is not aligned to this text here. But if I keep bumping this size down, maybe I’ll get it to the point where the text lines up.

See, that’s better, isn’t it? And so that just gives it more of a cohesive feel that the text is lining up from box to box with those font sizes. Of course, the line height takes its size from the font height. If it’s one, then the line height is 38, much like the font size. And so that makes it all align nicely.

So I’m going to save that. I’m happy with that right now. Now that I’ve made that change to this text size, this feels a little low in weight, doesn’t it? It feels a little bit weak. It’s not standing out compared to this text here, so I think I might make that a little bolder. I’m gonna keep the size, but I’m just going to make it a touch bolder.

So we go, that’s the banner title. And let’s bump that up to 600. It’s not competing with this information here, but it is just a little bit more eye catching than say, the headings going on here.

Now I’m looking at it. I think I might want to increase the letter spacing in these headings. I think it might give them a little bit more room and make them more readable. I mean, these can be tiny little tweaks that, maybe they’re just notable details to designers like me who really like to nerd out on this stuff. But I think that anything that can improve the readability is important. So I’m just going to increase our letter spacing. Just a touch. Maybe not 0.1, not 0.2. And I think that just gives the letters a little bit more space to breathe. Now the body text has automatically changed these files down here, and I think that’s quite nice and readable.

I’m not too worried about that. It’s a glance. If I look at the inbox, I can see the subject lines of the messages are instantly more readable than the information itself, which is great because you want your eye to be drawn to the subject first, and then you can read the body text if that’s necessary.

Sidebar

And so let’s move on to our sidebar, I’m gonna reset back so we can actually look at the text in its actual size. Does this text feel a bit big now? I’ve zoomed it in again. I mean, it is quite a large device size. Like if you think about this dashboard, I’m gonna hit the back slash key, and so I can just focus on the design in itself and have a look at it.

Hmm. You know what? I quite like it when text size fills my screen and makes use of the white space available. It means it is really readable and I’m not having to think and maybe the users don’t have to think about bumping up that text size to make it more readable for them. So I’m happy with that. Can hit back slash again to put my UI back.

Now let’s edit this logo text and this other text here. Well, if I think about the level of importance of this text compared to the rest of the text in this content, maybe the body text is more important than the navigation text because that’s what I’m focused on right now, and I know that I can look over here if I want to start navigating to other places.

So maybe if I am using the body text styles as a starting point. So that’s inter 14, regular 1.2. If I go into my sidebar navigation, we’ll make that inter regular, uh, 14 and 1.2, and I think that stands out reasonably, but I might just bump that font size down one, just so that my eye is drawn more to the body text than it is to those sidebar navigation links.

Logo text

And let’s save that there. And the logo now. The client will always want the logo to be bigger. It’s kind of a cliche and a stereotype in design. Everyone always says, make my logo bigger, but really the logo is probably one of the least important aspects of the design. It needs to be recognizable, but a brand is recognizable through so much more than its logo, its colors, its typography. All of these are part of the brand as well, and that will tell the user what page they are on, which site they’re on, which app they’re on, more than the logo will. And so even that’s why a lot of the time logos are just, they don’t even have the logo text and they’re just a logo image or a logo mark, as we call them.

So it doesn’t have to be massive. So let’s use the body text is a starting point again, or maybe the navigation text ‘cause it’s all aligned. So maybe it should be sort of fitting in with the feel of this text down here. So this would be our logo and it’s enter. And so we’re using 13 as a guiding point.

I can hit enter when I’ve changed these text styles just to preview how it’s going to look before saving that typography. Not that it really matters because if you save a typography, you can always undo to undo the changes you’ve made. I think that size is good, but what I’m gonna do is I’m just gonna bump up the font weight just to show it’s slightly more important text than the text below.

I can see the icon isn’t quite the right size here, so I’m wondering should I make the icon smaller, even though that’s not technically part of the assignment. Maybe I’ll make the text bigger just so that it fits in with that icon. ‘cause what I really want is for the icon to align with the tops and the bottoms of the letters.

So remember that shortcut I showed you again for using alt, although I need to select the right area of the text so we can see how it lines up. And the bounding box outside the icon is quite big, so it’s kind of hard to tell exactly how they should line up. Uh, I’m going to, you know, I’m gonna keep it that size ‘cause I don’t want to make it any bigger than that. And we can always tweak the logo later on in another unit.

So finally, we have one more piece of text for us to look at, and that’s this sidebar heading. So this heading is just saying that this is all the team members. That someone can select from. So it’s an important part of the navigation. It’s a, it’s more important than these single links, really, because it’s giving you a lot of information. So I think if we use the sidebar navigation as a starting point again, so enter 13, 1.2, 13 1.2. And we want to bump it up. Now, is it more important than the card heading text? So that’s 18 and 500. Wait, I would say maybe slightly less important than that. And so I’m so bad at remembering numbers. I instantly forgot 18 there. Okay, so I’m gonna make it, I’m gonna bump it up to 16. Oh, I’m changing the wrong one.

Let’s go back again. Heading, that’s what I’m changing, right? 16 And I am going to make that slightly bolder, 500, but I’m also going to add the same letter spacing changes that I did to the card heading as well, just so that it feels aligned and consistent. It’s hard to tell really the spacing on a word that’s as short as this. And I’m going to save that. Let’s just save that to close it. And I think we are looking at a pretty good design here. I’m quite happy with that typography right now.

Placeholder text

Oh, I’ve forgotten a bit. That’s the search text, that’s the placeholder text. Where’s that? There we go. I should have been able to tell by the difference in the font families. So that is Inter again, and now I want it to be the same as the body text. Ideally, I might make a tweak to the color later on. That’s something we’ll discuss in the color section. But let’s go 14. Any text inside an input, it is much easier to deal with the layout if it is one, you can handle the spacing using paddings and margins, and we’ll look at that a little bit more later.

And so I’m just going to make that the same as the body text, like so. And finally, I think that’s me finished. I’m just going to have a quick little look. At the assignment text, just to check that I’ve done everything I have edited the existing typographies I haven’t actually created anymore, but then again, this was my design in the first place.

Naming the typographies

So of course, I think the typography names are fine and the. I have all the text is using Typographies. How could I tell that if I select any area of text? You can see that in the text section, in the design panel here. It has this big ag and the little connected icon that shows it’s connected to a typography and it has the name of the typography there as well.

And so that’s how I can tell if I go through all of this text, I can just see that it’s all using typographies. So that’s how I know that I am adhering to that part of the specification. I haven’t changed any of the content. I haven’t changed the colors or the icons or the layout. I haven’t created any new typographies.

Checking against the specification

My deliverables have organized layers and naming conventions. Well, I haven’t changed the layers. So I already know they’re reasonably well organized because I did that for us earlier. And my assets, well, my typographies. Yeah, I think these are all pretty good. Maybe. And you know what, maybe I’m going to rename sidebar navigation to sidebar link.

Because that’s a little bit more descriptive of the text itself. There are multiple aspects of the navigation. There’s headings of for the navigation, and that’s still part of the navigation. So I’m going to call it sidebar link to make it nice and clear that that is only for the link text there.

So I think that is my walkthrough of the dashboard app UI.