You have to do in order to take advantage of all of its Web Design abilities, which we’ll take a look at now. First of all, a furniture designer supports layers, which is quite important if you want to make your design neatly organized. It’s always a good idea to put your separate elements, building separate parts of a website design on distinct layers, elements comprising the header should go on a separate layer elements comprising the sidebar should go on a separate layer and so on.
It’s a good production technique. To name the layers properly, instead of leaving their generic names such as layer, 1 layer, 2, etc, you should rename them and give them more logically descriptive names that would relate to the layers content, for instance, header, footer, sidebar, article etc. I would even go one step further and create sub layers with logically descriptive names, for instance at create sub layers for just the navigation or branding blocks sitting inside the header layer.
There is really nothing more indicative of a sloppy design and designer that holds all of its contents on just a single generic layer. If you are a fan of shadows, gradients and blurs you’ll be happy to hear that designer offers a variety of effects that you can add to your artwork. They are non-destructive, which means that they don’t modify the artwork permanently but are being dynamically added to it.
And can be changed anytime, you want. It should be a lot more difficult to create website designs without artboards. They are the best way not only to design mobile versions of your website, but also to showcase your work. The most important thing you need to bear in mind when creating websites in affinity designer is that by default, when you create a new file, you will not create an artboard. The software lets.
You choose whether you want to create an artboard or just leave that default. Page so remember that when you do want to create an artboard when you’ll create a new file check the create artboard option, of course, if you simply forget about it or change your mind, you can always use the artboard tool to create an artboard website. Designers need pixel perfection and you can use designers whole family of tools and options.
Just for that, what’s great about this feature is that you can simply choose a UI design, snapping preset and be sure that the snapping options perfect for web design purposes are turned on. It will also turn on the force, pixel alignment and move by whole pixels options. Just to make sure that all objects are snapping and moving properly, when you have the snapping turned on design, will show you when the objects are aligning, but also will indicate the distance in pixels between specific objects.
The UI design, snapping preset, will also make your artwork snap to guides and snap to grid. So if you’re, using them in your workflow UI design, snapping preset will let you align the artwork perfectly with them and if you’ve never used the grid before, because it was too confusing. You’ll be happy to hear that designer offers an automatic grid which finds the best settings on its own. You don’t need to count everything on your own.
The grid will change depending on the zoom value you set. Of course, if you want you can change the grid to manual and enter your own values, you can also use the guides manager to put your guides precisely where you want them to go. A furniture designer is primarily a vector design program, but it allows you to mimic the pixel environment. Your website designs will ultimately live in for web design purposes.
You can use the standard, pixel view and a high pixel density retina view. This will let you preview ur design, as if it was made entirely of pixels. You a website, can’t live without text. It is so important that many designers make it the center point of their designs, removing as many graphical elements as possible, and it’s really easy to work with text in designer. In addition to your standard character and paragraph options, you can create text styles, which speed up the process of switching fonts within your design.
You can have tens and tens of different text styles, and you can change practically every aspect of them. Designer counts, with the ability to build your own libraries of assets that you can use when designing websites. It comes with predefined, iOS 10 assets that you can just drag onto the pasteboard assets, work kind of like symbols, but the difference between assets and symbols is that you can create libraries of assets that can be exported or embedded into a specific document.
And you can’t do that with symbols in affinity designer so say, you’re building a wireframe for your website. You would want just the schematic elements for that right, simply create your own representations of a logo, navigation system, blog post, etc. Then select it and from the panel menu choose add from selection. The element will go straight into the assets library and be waiting for you. Should you want to use it again? I think the designer comes with a separate workspace meant just for exporting elements of your design.
It’s called to the export persona and it’s a great way to export sliced parts of your design. You can just grab the slice tool, create a slice out of a certain design element and export it as a separate file you, as you can see, there are a lot of tools and options that allow you to create gorgeous website designs in affinity, designer tools and Panelists, like the layers, artboards, snap and manager, etc, will help you in creating your own websites, but trust me that we just skimmed the surface here, there’s so much more to designing websites using affinity, designer and you’ll discover it all as the course progresses.
I guess at this point we could jump right into creating our first design, but I want this course to be something more than just a showcase of design techniques and processes. I want you to gain thora knowledge on contemporary web design, so next we will take a look at the principles of good web design, followed by practical information on colors typography and elements used to put a website together.
Mobile responsive is one of the most popular sales pitches for WordPress themes, templates and plugins, but, as any professional website builder will tell you in practice, there is rarely anything simple about it. There is no clean-cut one-click transition from desktop to mobile screen.
In fact, the actual process has little to do with click or pressing buttons and far more with making the right decisions. Some elements have to be realigned or changed. Others completely removed, sometimes you’re forced to build an alternate section specifically for mobile or tablet devices. Making sure your site is mobile-friendly is becoming more and more critical to generating and expanding traffic, as Google continues to progressively shift more focus on mobile first indexing, a term referring to how Google predominantly prefers the mobile version of your content for indexing and ranking.
So, let’s see what the major challenges are when making your site mobile, responsive and learn the best ways to avoid or solve those challenges. Here we have a standard section with a paragraph of text. Looking exactly the way we intended to on our desktop. The paragraph text has been set with 200 pixels of padding on both left and right sides, which is fine until we test the design on a mobile screen using the mobile option in responsive mode and see this yes, not exactly what the client ordered.
So now. I need to fix something that could have been avoided if we had spent a little more time earlier on on planning the more forethought and planning you can invest in the design process, the better you will be able to anticipate the technical problems and adjust your ideas. Accordingly, correct planning involves examining possible problems, as well as considering possible solutions and preparing for them.
Here, for example, we should have considered the fact that the scale of a mobile Green is far smaller than a desktop, and even then every phone has a different size screen. So, instead of setting the padding in pixels, we could set the value of padding in percent so that the padding will always remain the same relative to the overall screen size. Thanks to the responsive mode, we figured out that we should be setting the padding to 17 %, and lo and behold now it looks good on mobile to correct planning also means having other solutions at the ready, instead of tinkering with the paragraph, for example, if we Reset the values here we could go into the editor of the entire section and set its maximum width to 750 pixels.
This eliminates the need to add any custom settings that could get fumbled in the mobile view, while in the desktop view it keeps the paragraph contained in the box section, which we limited to 750 pixels notice that no additional CSS code or responsive customization was needed for Either one of these solutions – so this is the first guideline to follow planning – is essential: try to make the design choices that will help you avoid future problems for your sites in mobile view.
This here is a landing page for a therapist’s web site. Many designers finished designing the entire page. First then get frustrated trying to make the same design work as well in mobile view, making all those small adjustments to every element an easier way to go about. This is to use elementals functionality to our advantage. We should be designing our views, one section at a time as we go along once we have the section looking the way we want in desktop and mobile views.
We can duplicate the section column or widget and update the relevant content. Let’s do the same for this section by the way, this also takes us back to planning instead of completing your work, one view at a time, we should be making sure that each element works, duplicate it and reuse it as a foundation to build the other similar Elements on the page in this next example, this back, which looks great in the desktop view, is obviously no longer suitable when viewing the site on a mobile screen.
Here the designers solved the problem by choosing a different background image to appear only in the mobile view of the site. Back in our therapists page, I’m going to select the section and, in the editor, under the style, tab click on the device icon. For the background image, I’ll select, the mobile view, click on the image box to access our media library select my new image problem solved. Another solution would be to click on the device icon for the position settings and try the different positioning centering options till we get a focal point that suits our design in the mobile view bottom line.
If your images look weird in mobile view, use the options in the elements or editor to adjust their position etc or replace the image with one that works better with your mobile design. In this next example, one you’re, probably very familiar with – we see a three column section with text on mobile view. This would look like three boring rows of text. So, to solve this challenge, we decided to create an alternative section solely for mobile.
Instead of showing text in three paragraphs, we created a slider for the text, which will only appear in the mobile view. What we did was hide the slider section on the desktop view, and we can do the same here too in the Advanced tab in the responsive section under visibility, and we do the same to hide the regular text section from mobile view. This lesson is simple, but important: don’t get stuck on the notion that everything must be exactly the same on all views, get creative and explore alternative ways to display your content on mobile now.
Pop-Ups are an obvious challenge in mobile view. What we’ll be doing this time is making sure that my nice pop-up only appears in the desktop view. Where it looks good, then I can create an alt pop-up, better suited to a mobile screen that will appear as a strip running across my site and define it as a sticky area. I’ll set this pop-up to open only on mobile and this pop-up to open only on desktop when designing for mobile view.
Think mobile. Some elements need to look completely different to achieve the same goal. Finally content: another troublesome challenge of responsive design, for example. This button here reads download now microcopy. That would make no sense were it to appear in mobile view. We could duplicate the text. Widget add something more mobile appropriate like get it now and only show this text widget in mobile view.
Similarly, we could use a big call me button and have it appear only on mobile again. This is something that could be avoided back in the planning. What works on desktop view doesn’t necessarily work on mobile view and vice versa, adjust your content accordingly, so we’ve covered planning for mobile-responsive views, reusing areas already customized for mobile, adjusting or replacing background images, choosing alternate elements, redesigning elements like pop-ups and adjusting content and like we Do every week there will be more detailed explanations and insight about all this and more in the article that we publish together with this article.
Let’s recap: we’ve seen the sorts of challenges that arise when making the transition from desktop to mobile devices. We’ve also seen solutions that we can employ to deal with these challenges. We hope you enjoyed this week’s masterclass and we’ll be back next week to discuss another topic relevant to designers, marketers and developers working in a wordpress environment so be sure to click the subscribe button below and tap that bell.
Otherwise, how else will you remember to read it on YouTube or our mobile responsive site till then, as always, we’d appreciate any comments inside and any criticism that you may have and obviously any helpful tips that could help other users thanks for reading
So we’re going to learn a bit about figma we’re also going to learn a bit about design. So if you have trouble designing certain websites or apps or whatever you want, I’m going to try to give you my thought process. I’r building out this shoe website.
I know shoe website, but hey everybody has shoes. So why not so the first thing I usually do make sure to open up figma, if you don’t have it download it. I also highly recommend you to follow along because hey practice makes perfect so yeah. The first thing I want to do, since this is a shoe at, is obviously I’m going to look up shoes, so one good site that you can use. It is pixels, so we have pixels here.
I just searched running shoes, and I found certain pictures like like this one or this one, but eventually I just hand picked out a few and you don’t need to worry about it. I just link everything in the description down below, so everything is linked. Don’t worry. Just download those and follow along so there we go. This is the first picture we’re going to use. I kind of edited this a bit in Photoshop because it had an ugly background, but it looks okay now, so we have the shoes and by the way before we do this, actually you probably don’t have this landing page.
So let me delete this and what you can do is we can basically create a frame now what the frame is. You can imagine it as being a just a page on your website, so you can click on the frame tool and just click anywhere. You want. It’s going to give us a frame now I want this to be full HD, so here you have width and height to your right. Oh that kind of rhymed, oh that rhymed as well. Okay, so here the height is going to be 9 20 1920 by 1080, which is going to be full screen Full HD nice.
So we can take the shoes and kind of drag it in here and frame tool. We can also rename this to landing page now. One important thing about creating any kind of design is to have proper structure. What I mean by that is, let me show you we’re going to hit the text tool and we’re going to drag out here and I’m going to name this we’re going to have a headline, so we’re going to say, run faster and let’s make this bigger.
And what I basically want to have on my front base, since this is a product that I want to showcase well. The first thing I I want to you to see is diffuse, some catchy tagline, a small description and a place, a button or something that you can buy the product. So that’s kind of how I think about what I want to have on my front page. So the product, some text that describes the product may be a reason to make you buy it and then some button where you can either buy or learn more so good, so run faster, run.
Forrest run and we also kind of want to have a subtext here and then I’m going to talk about structure so we’re going to have made for high speed running. I kind of wrote everything down here. Just so so I don’t write bananas or nice or something yeah. So there we go. We have our second text and yeah, as you can see right now, just everything kind of looks messy and that’s one important thing that is important in design a structure make everything kind of flow together and what I mean by that is have really nice spacing have Text that always starts in the same position, so it’s easier to read.
Everything is right. Now this is kind of weird hard to read. You don’t even know where your eyes necessarily are going. So if you take this and kind of put everything nicely like next to each other, it’s going to make everything so so much better. So the first step that we can do is, let’s just work on these texts of it. Let’s see we have 96 on this, and here let’s make this smaller, let’s go 64. So this is like a is a smaller tagline.
Let’s also create some buttons up. Here you can go to rectangle tool. We can strike out a rectangle that should be okay and we can also hit alt and just drag and then that’s going to duplicate everything for us good. So on this one, let’s, let’s just kind of structure everything nicely together. So one thing is that right now this kind of aligns itself to this blue box around, but I want everything to line itself based on the text, so the box should run like this cuz right now.
As you can see, this should be the middle because we have that orange highlighting there we go that’s the middle, but hey the text is not in the middle, so one way we can do. That is if we go to the triple dots here and by the way. That’s why I’m here with the webcam today is because you could not see those tools. My way, if my webcam would be there so hit the three dots here and we can do width height click on these two and look at that.
It kind of just makes itself the same height, the blue box as the text, so we can just do it on all of our texts with there we go that’s enough and I’m just going back to the default here of fixed. These don’t need it. So, let’s just organize everything nicely here, so where should we put this cuz? I kind of want to have the same distance with the shoes on the right side here and the left side as well.
So one thing you can use is a grid tool and figma. So, let’s click on the landing page and we can go to our layout grid. What you can do is click plus and you get this grid. We can open it here, go to columns and I can just do 12 columns and that’s going to give us a nice grid here. You can also change the opacity value here. If you’re blind like me – and you have issues seeing things and what we can do is now we can easily align this text.
Let’s say to our second column and even the the shoe we can kind of drag it to the second column here. So this is going to be here. We can drag this here like so and even the buttons we can just align everything nicely good. Now we can take everything and just move it to the center, so I kind of want to have this like so I kind of want to have the text here actually going to move this a bit more up and I’m going to have a bit of a Distance with the buttons like so, and we can also align this to its middle, but I can I want to make this smaller, because I want to have a navigation bar up here and I don’t want the shoes to kind of go over everything.
So I’m just going to make it a bit smaller, that’s something like that and just can’t drag it towards the center and also the second column here and we’re going to let go. We can turn this off and see what we have so there we go. Everything looks already way better than what we had now again as long as there’s like a decent structure to this, I guess you can move this around. You don’t necessarily like.
Maybe bad even looks better as long as you have a decent flow to your text and your buttons. Everything is good, so even here like you, don’t want that you kind of want to have everything nicely put together good. So there we go now we’re going to learn about and we’re going to mess around with colors and font in just a bit, but I also want to create the navigation up here. So let’s turn this back on because look right now we can do spacing and everything’s super easy.
So here I’m going to drag out this square, not squared the text tool, I’m going to drag out just a square thanks so good! So here I’m going to say home: I make this smaller hit. Ctrl alt, not all ctrl, a that’s going to select everything or just drag with your mouse, and we can make this let’s go. 2424 should be okay, we’re going to say home and what you can also do is just easily align this in the center by hitting this text align horizontally and then vertically here boom there we go now read this, we can just hold alt and drag, and we Can easily just drag this down here now.
This is not perfect. Let me resize this make sure that it hits the corners properly and strike again and there we go crank again. Look at that. We have the same spacing crank again. Actually, here I want to have a cart with a check out, so I’m going to delete this one and let’s rename this to shoes and rename this to we’re going to have about about good. Now we have a cart. I copied it from the internet and it’s just changed it a bit.
So I’m just going to link that as well in the description I’m going to put it here now to have a checkout button. We are going to have the Eclipse tool and I’m just going to grab a circle and drag it out here, make it a bit smaller, maybe something like so, and I have the same distance here as well a bit smaller, maybe yeah! That’s okay. Make sure that we have the same space here as well on the left on the right side, yeah that looks good so now what we can do here is just add a text again and just add one boom, we’re going to change this to white and we’re Going to change the contrast and everything in just a bit, so there we go, we can turn off the grid here by hitting the I and there we go look at that now: let’s change the colors and the font, so I don’t know when you have the When you have a product, I can only usually like to sample colors from that product.
So what I mean by that is I’m just going to pick the colors from the shoe and I’m going to create a palette out of that. So I’m going to have have some red for the things that I want to pop and I’m going to have some greyish color to the things that are less important. So what I wanted, what what I want to be important. Well, I want the text up here to be important and the buttons as well. So that’s my main thing.
I want you to look at so what you can do is hit the text hit the I and look he can just sample a color from that. Now. I’r going to give you the exact color I used. So, let’s see here we’re going to say hashtag. 8. 1. 3. 6. 3. Be there we go so we have an intense red. Color red is very intense, brings your eyes to it and a it just looks awesome we’re going to do the same to this, so what you can do is just hit I and just sample it from there.
Let’s go in the middle here. There we go hit. These we’re going to hit I and for this one I want this to be like a by now or just by, and this is like a secondary button. That’s not that important! So for this I’m going to have something like learn more about our shoes: okay, so for this one, actually, let’s get rid of the fill and I’m going to add a stroke to this click. The stroke delete the fill, I’m going to increase the width to like 3 pixels and the color I used on this.
It’s going to be. Let me copy this. It’s going to be six three, six, eight, seven, seven good! Let’s go and there we go so for our text and here we’re going to drag out and I’m going to say, shut up now, let’s make the smaller 24 yeah more 36 looks. Okay again, we can hit the align tools here to line it perfectly. Let’s change the color to white like so. Maybe that’s a bit too big. 2424 is okay, because we’re going to change the font as well, because this still doesn’t look that good and in here we can do the same.
We can do learn more all right. This is not as important, let’s go, and let make sure that these are the same size good now for this one we can do the the color of this can be the same as the border here, so we can hit the eye and we’re going to sample This as well now what I’m basically going to do for all of these buttons is I’m going to apply this color to the navigation, so make sure to apply all this gray color to these, so we’re going to go up here, hits eye boom hit eye, and Just sample this again: let’s do it one more time.
I think this one is already set to it and we can do the same for this square 91. The Eclipse and hit this color perfect. So now everything looks a bit better now. What you can also do is like take everything here and hit ctrl G, and you can group everything up nicely and name this check out. So if you want to be a bit more organized, I definitely recommend you to do that, especially if, when you’re going to have a ton of things, yeah you’re going to have a struggle having 10,000 things here, but I kind of want to do this faster.
So I don’t waste your time, so ya might not group everything together for you now. One thing I don’t like is the background. Color is just too white. There’s too much contrast so to change that we can go on the landing page up here and add a background color of v9b 1999, which is going to give us a much nicer shade to our website. So there we go perfect. What else do we need? What we can add the fonts, so this one looks kind of boring.
It doesn’t really have any flair to it and the way you can like to pick fonts is I like to read the font and if I read it, I kind of want to have the expression that I have in my head. So if I’m going to say something like run faster well, I want to have an intense font. Then, if you have something like we have monster odds here, so, let’s, let’s put monserrat well, this kind of looks smooth and like curvy and the cancer is like.
If I would read this in my head, it would be something like made for high speed running legends to smooth for me. I want something more intense if you want something smooth, well, yeah, you can use this, but I want something more intense so for that I use something called Rousseau one. So here we can do Rousseau one and, as you can see, this is just a bit more. Like sporty looking and it just it’s a bit more intense, so let’s change everything to Rousseau.
One here Rousseau, one good and we also going to drag this out. So it’s in one line and also the buttons here, I’m going to say, Rousseau, one and Rousseau. One now for these up here I can leave it like you can, have you? Can multiple fonts for navigation? Roboto works? Fine. You can also use monserrate, but this one is kind of standard. I don’t really want the the aggressiveness up here, so I’m going to just use Roboto and for text that I want on my main page, I’m going to use Rousseau one perfect.
So there we go. That’s our first page, let’s get into the second page. Let’s click! The frame tool, again click and we’re going to do the same height to this, so we’re going to go to our frame we’re going to do 1920 by 1080. I think so drag it up here. We’re going to rename this too and our product page and we’re going to take the second picture I linked and we’re going to paste it in here like so we’re going to drag this to the center and we’re going to add a background color to the second Page of, let me see quickly, it’s a a a a like so which is going to give us this super dark color.
Now what this is going to do is it’s going to bring out our shoe, because we have so much color in here and this one is just a faded color. I like it also because it’s elegant – I don’t know it just. I think it just fits everything. Really nicely and plus we have some darker colors up in here and it kind of just matches the background. So that’s nice as well. So we have that and let’s also add some text here on our left, so I’m just going to grab some the t drag.
This out, I’m going to say, err boost, because these are apparently the shoes and we’re going to just add white to this, and also one important thing. You can also highlight something with contrast. So if you want to have your eyes more on this one, then you can increase the contrast on this. So if you go darker here, as you can see, becomes more intense and it just pops out more. So that’s also another thing that I forgot to mention.
Maybe you don’t have colors, maybe you just have white and gray, so I’m going to show you here so err boost and maybe have a description designed for maximum speed. Perfect. Let’s make this smaller we’re going to do 24 on this text. Let’s do 24 and on the big one we’re going to do 72 thanks, oh right, so what I mean by that is. I changed this to white, but maybe if I want you to focus on on this one more, I can add a bit of a gray to this like so so it’s very subtle, but it brings out the upper decks more just because the contrast is way stronger.
But in this case I don’t really want to do that so here, let’s also do the the width. So it’s the same width here as well. What I don’t know this seems a bit small for me. Maybe 24 is not good enough. Let’s do 30 type 30. Here there we go drag this down, hit this tool again, the width perfect, and I added some more description which I wrote down. So let’s write it down with a soft and light weight finish to give you the extra boost of speed.
Wow amazing drag this to white perfect. Let’s also add a price here, we’re going to say price and we’re going to add 199 expensive super expensive shoes drag this to white and you know what we can copy the button from here. So grab the text and the button hold alt and drag it down here nice. So we can align everything nicely again. Product page, we can add the layout grid again hit columns 12 and I’m going to line it again to the second one so boom like that.
Crack this like, so, you can also get the same distance as you can see there. 49 49. So we can just crank everything. 249 doesn’t work on this one. Let’s add the width again. Did we get the autocomplete? No riperoni? Okay, that’s fine! We’re going to move this around a bit more: let’s grab the shop. Actually, I’m going to group these two hold shift, grab both G and drag this. Now there we go 49, so we can grab everything and kind of Center it.
In the middle perfect. This one drag it all the way here again to the second one, and let’s get rid of this hide. Oh, that’s the upper one, the product page, there we go perfect and I kind of want to highlight this as well more so what I’m going to do is I’m going to grab the rectangle tool and drag out a rectangle like so now. I can bring this all the way down below the shoes and I can add a corner radius of 50 to make it rounder like that, and I can sample the same.
Let’s just bring down the opacity of this like 20 or something as you can see, that kind of makes this card’s pop. So I can bring up the shoe and what I want to have below here is the way you can select the individual colors to the shoes. So maybe you can click through the colors and and the shoe changes its color. So to do that, I’m just going to grab the ellipse tool just drag out a circle like so, and I’m going to sample the color from the shoe hit.
I we’re going to get this color. I think so dragged out with alt I’m going to have three times, so we have the same. Spacing hit shift I’m going to just move everything to the center and for these I’m going to go to the fill and we’re just going to change. Actually, this is too vibrant for me as to this is a darker part like this one, alright, okay, actually I have one here, which is not that that bright and the color is FF.
Let’s change it to this one. I prefer this one ff4 4b nope. That’s not the one FF four four four be perfect. So for these I can just go on this one sample the color again just pick whatever color you want. I can sample the previous color and just change it, and then it’s going to look nice. So maybe we’re going to have a shoe with a purplish color and let’s do a I don’t know, shall we go with a greenish one there we go that looks kind of cool, so hey there we go.
We did our second page didn’t even take so long. There we go look, it’s super simple, it it pops, you can see everything nicely, and the thing I can kinda also want to emphasize is that you shouldn’t add more things that are not necessary. So you see a lot of signs that add weird shapes and a lot of scrap that doesn’t really have anything to do with it just to make it look cooler or something I don’t know, but let’s do the last page as well.
It’s getting kind of dark. Ah, so, let’s do we’re going to hit the frame tool. Click we’re going to do the same size again 1920 by 1080. There we go drag this here, I’m going to go turn on the lights good. So now that we have the lights turned on, we can finish our contact page. So for this one again, we can just sample colors that we have from up here alright. So for the text and everything now for the contact page here, I don’t really want anything crazy.
I just want to form – and I want to I want to let people know that hey this is a contact page, so I’m just going to drag out some text here, I’m going to say, contact contact us like so we’re going to make this bigger. Let’s do 70 to 94, just the big contact page here, good, let’s make it the same size here, I’m going to drag this to the middle like, so you can do with the the grid tool again to make sure this is centered after the one.
I think so I’m going to do this fast now, but we can just copy the color from up there. Then we can have a contact form up here now to add a little flow to this. We can just drag out a a circle like so, and I’m going to drag this below well above, like so I’m going to move this and we’re going to have our contact on top of this one good. So for this we can just grab the color from up here again, so I don’t want this to be super blocky.
You could just drag down a a line. You can make a square, but I think this gives a bit of more of a flow to the page good and now here we have the inputs, the name and the inputs. So we can do text drag and we can do name. You can make the smaller. Let’s do 18 huh too small, 24:34 yeah. That’s okay, see 34 change this to white and then we can do also, let’s yeah, that’s okay, alright, so we have the name here.
We need a rectangle tool, I’m going to drag it down below. Here I’m going to get rid of the fill and just add a stroke, so hit the minus at the stroke and again we can just sample the colors. Let’s make this three pixels and we can do I boom and there we go look. What we can also do here is just copy/paste everything down below so here. I’r also want to make sure that this is aligned properly with the box.
Let’s actually make some changes here, just copy this one in this one so hold shift, I’m going to drag down with alt and, as you can see, we can have the same spacing here. Let’s try 35-ish, I think so. You can drag again going to get 35. So we can change this to email and we can change this to message and for message. I cannot want to have a longer message. Some I can drag this down like so good and we also need a submit button again.
We can copy/paste things because why not? I’r going to actually put this to the middle as you can see, we have the flow going on, but what you can also do is rather than having this here. You can have this to the center because that kind of pops more you have structure here and all of a sudden boom. You have this well, it kind of brings attention to the submit button. So that’s the only reason why I’m putting it here.
Some people look like here: oh it’s, it’s whatever, not really a big deal. I like it centered. I think it it entices people to click it more. This is a group by the way, so we have to open it up and we are going to change the text to submit and there we go. Let’s make sure everything is centered here as well. Now this kind of annoys me so I’m going to lock it here. We can just grab everything here and just make sure it’s centered with the text like so but hey, look there we go, we have a full website made.
So thank you for reading this hope. It helped in any way and yeah. Let me know if you want to see more of these design kind of tutorials. Thank you. Thank you again. So much for reading, please consider dropping, is subscribed. I’r waiting for my monetization by the way hopefully gets approved. Let’s finger cross because if we get monetized, then that means a lot of a lot of articles coming up who that’s? Let’s pray, alright, guys! Thank you so much for reading til next time, bye, bye, friends,
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-12-14 14:14:002020-12-20 18:31:15How To Design A Website In 30 Minutes | Web Design Tutorial
At all, So let’s go ahead and jump right into it, And my first tip Hint number 1 is to create a color palette. And if you are like me, colors might not exactly Be your thing I mean if someone were to tell me to come.
Up with a color combination, I would probably come up with something like I don’t know uh black and grey and maybe a little bit of white (, laughs, ), Really not good with colors, but If you want to make your website look great using a great color combination can be a great Way to do that, So how do you come up with a great color combination? Even if you’re not good with colors One thing that I have found, that is extremely Helpful for this is a tool called Paletton.
Let’s go ahead and check it out. Ok, so this here is the Paletton tool. It’s a really simple and easy to use tool. Basically all you do. Is you pick a base color So right? How I have this base red color here And then you can just choose from either this Sort of adjacent colors color scheme – And you can see the color scheme right here – On the right, We’ve got this triad color scheme, So it’s pulling colors from different sides.
Of the color wheel And then this tetrad, Where it’s pulling colors from sort of across The color wheel here And then, if you want to make additional adjustments, Here You can adjust the distance that it’s pulling It from So it’s a great way of making… Of quickly making a great looking color palette, And then what I like to do is I just like: To click on this tables and export button here And then click on as HTML and then I just Print this page or actually just save this page as a PDF, And I save it into a folder that I can use To reference whenever I need colors fro my website, Ok and then, if you don’t know what the color Of something is but say you have a logo already and you want to use the color.
That’s in that Logo as the starting point for a color pallet, It’s really easy to do on a Mac. Let me show you how to do that. Ok, so if you’re on a Mac just go up here, To the search And then type in “, digital color meter” And that’s going to pop up right there And then under the settings for this, we want To make sure that our colors are displayed as hexadecimal, So we are just going to click on view and Then display values And then make sure hexadecimal is checked.
I’ve already checked it here, but as default It’s set to decimal, So we’re going to set it to hexadecimal, Ok and then we can use it to find the color Of just about anything, So let’s pull up the digital color meter Hover over what you want to find the color Of And then you can see right over here that We’ve got the hexadecimal color, Which are the colors that we are going to Use on our website, So it’s E0 99 00 is what it is for this example, And then you can just take that and you can Just type it in to the Paletton color palette here And there we go Now we can just select which color palette We think looks the best Based on that And you’re off and running.
Ok hint number 2 Is great, looking images Now this can be challenging. For me, I like taking pictures, I really enjoy photography If you don’t enjoy photography or if your Not so good at taking pictures, How do you get great pictures for your website? Well, there are two ways of doing it. One way of doing it is to hire a photographer If you can afford it having custom images. For your website is a great way to make your website stand out And also have the images be extremely relevant.
To you and your business Now, what if you don’t have any money to hire? A photographer and you still want to use – and you should use great looking images on Your website, What should you do? Well, there are some great resources where You can find either paid stock images like iStockphoto or Shutterstock, And then there is also some free resources. That you can use like Unsplash and Pixabay photos And actually I’ve shared some of the photos.
That I’ve taken on Unsplash so that anybody can use It’s a great resource for designers and anyone. Who needs to use great looking images Now be sure you check out what the rules are. When you’re using these images, For example, some images of people that have Recognizable faces Where you can recognize the face of the person May have some restrictions on them And then even inside the images there.
Maybe Some restrictions So, for example, if it has an image of a Coca-Cola Logo Or if it has a image of an iPhone or a Mac, Or some other recognizable piece of design, you may need to get additional rights for That So you just want to look into that and see What the rules are for that? You definitely want to use great looking images. So Unsplash, Pixabay, iStockphoto and Shutterstock are some great resources for that.
Ok, so now hint number 3 is one that I actually Struggle with all the time It not that I forget It’s just that I don’t know. Sometimes it seems Really hard to implement this hint, And that is space Just adding a little bit of extra space around All of the elements that you put on your website – This goes especially for text, So you want to have space around your heading. Space around the body of your text And one of the new trends in website design, And I think it’s actually a really good one is when you are making a point in text.
So if you your know, writing something Is to make your paragraphs really short. I mean your paragraph or the spacing between Lines might actually just be one line, And then you are going to have spaces between Those And what that allow your viewers to do when They are looking down. Your website Is to quickly scan for the information that They are looking for So adding extra space around all of the elements.
On your website, not only the text but the images and the graphics To allow your users to sort of see what they Are scan them and have that space around them to draw their eye to it. It’s a really good technique And it’s one that I struggle with, but it’s Something that everyone should try to implement on their website in their website, design, Ok and then hint number 4 is…. It’s about being decisive and for me that Means getting rid of using sliders And I’ll link down to some articles down below That talk about why you shouldn’t use sliders, Why they’re bad for SEO and why they don’t Actually drive more interactions on your website, But when you just think about it, I feel that whenever I’ve wanted in the past To use a slider, The real reason why I wanted to was I just Couldn’t decide what the most important thing was to put at the top of my website, So I just decided I’ll just put a bunch of Different things and I’ll just put a slider, and you know let people decide for themselves.
What the most important thing is The problem with that is that people don’t Sit around and wait for your slider to cycle through What they do is they are pro active, You’re on an interactive website, So they just start scanning down your page. And looking for what it is that they are looking for Now, what I recommend doing is putting the Most important thing that you have at the top of your website And then the subsequent things that you think Are less important you can even make them look basically like slides and put those Down as then next thing, So let your viewers scan down the page to See what they want Now, one problem you might have is that you Just don’t know what the most important this is.
What the thing is that you should put at the Top of your website, because you’re not sure what’s the most important, this is for your Audience The best thing to do is to test And if you’re, using a theme like the Divi Theme, which is one of the themes that I recommend using They have a function for A/B, split testing. Right inside the theme – And this allows you to test well just about Anything, but specifically, you can test the header section And see which variation of the header section Preforms the best for your audience, So you can come up with a couple of different Variations and then you set a target, maybe lower down on the page.
Maybe it’s having them scroll all the way. Down the page, Maybe it’s having them click on a button. Whatever the target is what ever the action That you’re trying to get them to do You figure out which of your test subjects. Got them to take that interaction the best And that’s probably one of the best ways of Finding out what should be at the top of your website, Hint number 5 is to remember your mobile viewers.
Now, when you’re building your websites, your Doing it on desktop computer, So it’s really easy to forget that people Might be viewing your website on tablets and mobile devices, And Google has made it abundantly clear that People use mobile devices a lot for viewing websites, So you want to make sure that your website Look great on mobile, So what that means is taking just a little Bit of extra time And tweaking your designs so that you’re sure That they look good on any kind of device Any size screen that your view might be coming.
To A lot of the great WordPress page builder, Themes out there, like the Divi theme, Beaver Builder and Elementor all allow you to tweak Your designs specifically for mobile devices, So something you want to do – is take a little Bit of extra time after you have designed your pages, making sure everything looks good. On mobile devices, phones and tablets, And one last tip one bonus tip here – is font Combinations – And I think it’s something just good to decide.
Right when you start creating your website is font combinations. A lot of the themes out there, particularly The Divi theme and most themes out there Will allow you to decide what you wan’t your Default fonts to be, And so deciding that ahead of time can be A great way of distinguishing you website from other websites and giving it a good characteristic. Look And I’ll link down bellow to some resources.
For some font combinations that you might want to use on your website, So if you’re brand new to making websites And you’re not sure where to start Check out my little free mini course on YouTube. And on my website, Where I’ll guide you through step-by-step Exactly the steps that you need to take to build a WordPress website And if you’re already following along with That tutorial series, the next tutorial, is how to install a WordPress theme, We’re going to be looking at how to install The Divi theme, And then after that we’re going to learn how To build web pages So go ahead and click on which ever article You want to read next
That’ll help you with your web design business. You ready, let’s go number one is tiny, JPEG calm. Now you know that images can be one of the biggest factors when it comes to websites being slow.
This website right here will reduce the image size anywhere between fifty to eighty percent per image, so it works. Like this right here, you would simply take your image. You upload it to the websites. Tiny JPEG will then reduce the image size and then give you back the original keeping the quality of the image. So it’s a very helpful resource when it comes to reducing image sizes and also speeding up your website as well.
Next is, will rank com. This website will give you a complete website review as well as crawl your website, and, let you know of any on page or off page problems that you might be having will rank, will help you with on-page, optimization it’ll index your website and give you a score For your mobile, and also your performance of your website will rank will also show you how your website is displayed on the search engine.
In addition, it’ll help you index your website to make sure that there’s no problems with robots.Txt files, XML sitemaps or you’ll – have parameters. So, if you’re looking for your own digital online assistance, lou rank is definitely one website to consider. Next is GT metrics com. This website right here, will summarize your page performance and give you a letter grade based off the speed and performance of your websites.
The great part about this website is that it is completely free to run as many tests as you want. Gt metrics will tell you which part of your websites are slow and what you can do to improve the speed of your websites. In addition, the waterfall score can help you determine if there is a plug-in on your website that is causing your website to be slow and find out who the culprit is. So if your website’s, slow and you’re just not sure where to go, definitely check out GT.
Metrics next is color adobe.Com a godsend for those of you who cannot find out what colors to use for your websites. Adobe will recommend nine different modes and give you color palettes, depending on what your website is trying to achieve. Are you struggling to find that gradient? Yeah you’ve seen on other websites by uploading the gradient image. You can actually pick the color codes from that specific image to help you get an understanding of what color was used on certain websites.
So if you have a brain fart and you can’t figure out what colors to use definitely check out, color Doh be calm. Next is what WP theme is that calm? Have you been monitoring other websites and you swear that using WordPress, but you just can’t figure it out this website right here will let you know what theme that website is using and, in addition, it’ll also show you what various plugins are using on their website as Well, the great part is this website is completely free, so you can monitor as many website as you want and spy on as many websites as your heart’s content.
Next is tools Pingdom calm. If you want to test your website and see how fast it is, this is a great tool to find out this website will give you a performance grade. Show you the page size of the current URL. Give you the low time and it’ll also display the HTTP requests. In addition, this website will give you the problem of your website, such as make fewer HTTP requests, avoid URL redirects reduce DNS, lookups or maybe even using cookie free domains.
So if your website’s, slow and you’re just not sure check out Pingdom com, it’ll really help you determine what parts of your website need work now the same website. Pingdom com offers an additional service. It will go ahead and monitor the uptime. The speed of your website. This is great because sometimes your hosts will blame other hosts and say that the website is slow because of your website. However, I found that to be false, because I can actually record the speed of the server check out the low time the performance grade check out.
The uptime and determine who really is slow? Is it my website or is it the website servers I monitor 20 different web hosting companies. I read the performance and uptime and I actually have a detailed article of how I use this website to find out if the server was slow or if it was my website. So it’s a very interesting competition. So if you want to see that article that article will be in the description below so be sure to check it out, so if you’re getting good letter grades, but your website’s still slow check out Pingdom com, this will monitor your current host servers to find out That, if it’s your website or if they just have crappy servers, which happens all the time so be sure to check out Pingdom com next is pixabay.
Com my personal favorite. Now, if you’re, looking for free images or articles, this website has up to 1 million images in various categories and they offer JPEG and PNG. They also have HD 2k and 4k images that you can use for free on any website that you want. The images are completely free. You don’t even need to make an account for this website. So if you’re, looking for images or article for your websites – and you don’t want to spend a lot of money and if you don’t want to spend any money, be sure to check out pixabay.
Com, it is a great resource. Next is manage WP comm. Wouldn’t it be nice to maintain and secure all the websites from all of your clients from one location? Well, you can do that with manage WP if you’re managing more than 20 different web sites, massive VP is a must gets manage, WP offers so much. It gives you free backups, you can monitor the uptime of your websites. It’ll give you a performance check, it’ll, monitor the security of your website, give you free client reports and also give us Co rankings and the great part.
This website will record all that information and you can send it off in a beautiful client reports proposal which you can send to them every single month. Now the pricing is even better. You only pay for what you want per month, so each premium add-on costs around $ 1, except for their backup which costs $ 2, so the most you’ll pay is anywhere between 1 to $ 9 per month per website. So if you want to keep your clients happy and have them avoid, calling you be sure to check out, manage WP it’ll, save you a lot of hassle.
Next is PageSpeed insights coms. You want to test the PageSpeed from Google and also see how your website’s loading on desktop and mobile. This is a great resource. In addition, PageSpeed insights will give you Diagnostics on things you can do and how many seconds it will save. If you apply certain measures on your WordPress website, everyone hates a slow website so be sure to check out PageSpeed insights and find out what you can do to make your website faster.
Next is free, pick calm. Now this is another free website where you can get free images. Now, if you want to create mock-ups for your clients or for yourself, this website has tons of PSD mock-ups that you can use for free. In addition, they’re part of other websites like flat, icon, slides, go and stories buy free pick which offer other free services such as free slide presentations and also free icons for your website.
So if you love free stuff – and you don’t want to burn a hole in your pocket, be sure to check out free pick, calm it’ll definitely save a lot of your money. Now, since you made it this far, I’m going to give you my secret website that I use for various websites when I’m trying to find the phone number for some companies. Have you noticed over time it’s become harder and harder to find phone numbers for certain companies.
This website will get you the phone number for any company right away, simply type in the company of the phone number you’re trying to find get human will then give you, the customer service phone number new customer number and any other number they have on their website. Without even having to navigate their website so next time you have to call your clients company just simply type in the company name and you can find it right away and then get whatever information you want from that company for your clients.
So thanks for reading my top 10 best websites, what did you think to use these websites? Do you not use these websites? Tell me what you think about these websites in the comments below my name is Darrell Wilson, and I will see all of you party people in the next article guys take care
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-12-06 14:28:002020-12-20 18:32:0610 Most Useful Websites For Web Designers You Wish You Found Earlier😱
In this modern era, visual appealingness is important for anything To make the viewers interested with this. When we work with websites, there are many important functions For that. We prefer websites for any brand. So, let’s see how to design a website in creative ways. If you have missed the previous episodes, please get the links on the description box. Today’s Topic is How to Design a Website in a Creative Way.
So in this article we’ll look into a design trends that you can incorporate into your design to be on top of the 2020 game. Outline shapes have been used for a while, but in 2020 they will take the spotlight designers are using outline typography. Not only is the secondary call to action, or in the background like in Sally here, they’re using a blend of outline, typography and solid titles here, if you want to use this style of text, make sure to make it big enough, so it wouldn’t disappear.
In the background, it’s not enough that you have text in your hero section. They should be a part of the design, so in 2020 we’ll see more and more text be incorporated in the design like we have in this website here. As you can see, those titles are almost a part of the scenery. That’s there in the images, if you’re a designer, this means that you have to be skilled in some graphic tools, CSS or perhaps use a website builder.
If you’re using visual composer, you can easily achieve an overlap effects just adjusting the margins and padding’s we’re. At a point where just creating a beautiful website is not enough, we have to show our competence and online assistance is the way to go and tools like check box have been proven very effective in achieving online assistance in an easy and quick way and a good Example would be this website where you just click on the bubble and you get more information.
It’s just a simple example, but this shows that you just have to get creative to get big results. Not all parts of the website are created equal. There is something you want to send out and some you want to take a back seat and there are a lot of ways to achieve that, but parallax effects is for sure one of the most effective ones. This website uses the parallax that follows the mouse, so it creates sort of a three-dimensional effect.
It creates that see the site. This is an effect that we’ll see a lot in 2020 because it’s so unique and it really gives a lot of opportunities for creative designers to really show something new. There might have been a time when fakeblock’s bright colors might have been considered, tacky and aggressive, but that time is over there’s only so much we can do to grab the attention of our visitors and bright.
Colors might just be the way to go this year. This website for a film uses a bright red background with bold titles, so so don’t be afraid to really grab the attention of your visitors and maybe provoke them with the bright colors masonry block layouts have been popular with galleries, but in 2020 we’ll see this style Of layout applied to the whole website like the happy hero here, no scrolling just fun masonry layout people are born with the standard layouts, so this is a way to show you’ve got in a creative and new way.
Marketing oriented design might seem like the obvious choice, but people still think it requires a large investment. But now there are so many tools available, like Google optimized, together with a website builder, can create the perfect canvas from AP tests to get the best layout. Also, a simple star, ranking or testimonials can really help convert visitors in 2020, like in this interactive website, you can see things like the word count.
You can check if your language is available. This is very, very marketing oriented showing what the product is in a very new and creative way, so any Tony is definitely the year for grabbing attention and making smart marketing oriented decisions. So these have been the trends to try out and they will definitely help you stand out and grow your business so stay in the next one. Everyone bye you
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-11-28 14:08:002020-12-20 18:32:20Web Design Trends That Will Dominate In 2020
We’re going to be taking a look at responsive web design. A more technical name for this lesson might be an introduction to media queries. So, let’s dive right in we’ll begin with a question: what is responsive web design? It’s a term, that’s thrown around a lot. So, let’s clarify our terms. We’ll begin with a visual demonstration, so in front of you is a very simple web page.
It includes a header, a bit of content and a footer, so what is responsive web design? Well, let’s see it in action. If I start to make my browser window smaller, we can see that the columns begin to shrink a bit, but the layout isn’t changing. It’s still three columns here and two columns here. If I make my browser window a bit smaller, we see that now. This top section is only two columns and that if I go even smaller, it’s now single column, it’s only one column throughout the entire page, and this is a layout that is actually very well suited to smartphones, and this should look familiar.
This is a strategy that a lot of websites use if you view them on a smartphone. So what is responsive web design? It’s simply responding to the size of the browser window or the device with our code. Hence the name responsive. Now. The goal of responsive web design is to be able to create one website that looks great, both on large desktop monitors and small smartphones and everywhere in between it’s.
This notion that we can use responsive code to adapt and cater to the user’s device size. Now, I think one of the best ways to fully understand responsive web design is to look at a layout. That’s not responsive and try to make it responsive. So behind the scenes. I actually just went ahead and removed all of the responsive code from this layout and I hit the refresh button. So now, if I make the window smaller nothing changes, it stays three columns, no matter how small the window gets.
So this is emulating what a smartphone might look like, and this is simply unacceptable. These columns are too small. This needs to be single column, and this is what it would look like on a tablet about and that doesn’t look good either. So the remainder of this article is going to be recreating the responsive layout that you saw in the beginning of the article, and you are going to learn all of the code necessary to send conditional CSS to the browser at different times, depending on its size.
So, by the end of this article, you will have a firm grasp on how to create responsive, layouts and write all of the code necessary. So, let’s dive right in so this is the HTML that makes up the web page that we’ve been looking at in the browser. It’s a very simple page now a word of caution: if you’re not familiar with the basics of CSS or what CSS is I recommend reading some of my earlier articles on CSS, because all responsive web design is, is essentially conditional CSS, we want to send the web Browser different sets of CSS depending on the size of the viewport, so, for example, once the browser is smaller than say, 900 pixels, we simply want to send it different CSS instructions.
So, let’s write our first line of code in the head section of our website. We want to include a different style sheet at the appropriate time. We will name this new file, responsive, CSS and oops media equals screen and we’ll give it a max width of 900 pixels. So let’s go ahead and create this new file in our CSS folder new file, responsive CSS, okay and, let’s just say: color, oops, color, red okay.
So if I refresh the page and I make the window smaller than 900 pixels – we can see that now all the text is written now. Obviously that’s not. What we want to do is just a proof of concept, so let’s go back to our code, okay, so this line is really important. We’re just saying if this condition is met. Think of this almost like an if statement if this is met include this file. It’s that simple, so we’re off to the races.
Let’s begin writing code for when the browser reaches a certain size. So our first bit of business is to make this top section only two columns instead of three when the browser window is smaller than nine hundred pixels. So, let’s take a look at the code that makes up this current three column layout in the HTML. It’s nothing more than divs with a class of 1/3, see there’s one there’s another one and here’s another one.
Let’s take a look at the CSS, we’re saying, width of 30 % and float them to the left and give them margin right of 5 %. Now here’s where a little bit of arithmetic comes into play, we always want when we’re creating a column layout. We want it to add up to a hundred percent most of the time right so to create three columns. The width of each column is going to need to be approximately 33 %, but we want a bit of margin between each column and that’s where we make the number a bit smaller than 33 %.
And then we add a bit of margin. And then we tell the final column to have zero margin, so it adds up to a hundred percent. So let’s just tweak this a little bit in our new responsive file to get it to be two columns instead of three, so we will say div one. Third, no longer a width of 30, let’s go with 47 and a half percent. So if we refresh, we see that a change is taking place but something’s not quite right.
We need to tell the second div to no longer have any margin, so we’ll say div. One third second margin zero, and now we see that we’ve got the two column layout, let’s go ahead and go that extra mile and make this third column full width, because this looks a little bit odd. There’s this empty space. So all we need to do, there is just say, div one. Third last it targets that third column that used to be the third column.
Let’s go ahead and clear the floats above it we no longer want it to be floated we’ll make it a width of full width with Auto and then we’ll give it a bit of padding on the top. So it’s it’s a bit down from the other two. So now we can see that initially on a large screen, we have three columns. We get down to a certain size. Now two columns makes more sense and instead of having empty space, will make the final column fill up all of the available space.
Now, if you’re, following along or if you’re, going to pause this article or after the article write your own code, one thing I want to point out very quickly is in order to get your images to be flexible themselves. You need a little bit of code, so I’m targeting all images and then I’m saying give them a max width of a hundred percent and then make their height automatically proportionate to their width.
Okay. So without this, let’s take a look at how the layout just falls. Apart, so we can see that these images are quite large which allows them to be responsive, but without giving them a max width. The layout just completely breaks so add that code back in and that’s what allows the images you can see here. The image actually isn’t that wide, but once it breaks down and sits on the full column, it’s actually fairly wide.
So that’s what makes that possible? Is this little bit of code anyways, that’s just a side note moving on with the lesson now for our next bit of business, let’s focus on the smartphone size, so once we get down to the smartphone size, we want everything to be single column. We don’t want two columns here and down below. We don’t want two columns here. We want everything to be full width single column, so I already showed you one way to include conditional CSS by the head section of your HTML file and this code.
Here’s a second way in the actual CSS file in our responsive CSS. You can write media screen and max width, we’ll say: 500 pixels, okay, now any code that I place in between these curly brackets will only run at 500, pixels or smaller. So we can say something like div mobile collapse. Be full width with auto. Do not float so we want to create any columns and don’t have any margin to the right. So now, if I refresh, we can see that everything’s single column, once the browser is 500 pixels or smaller.
So we see we’re three okay, now we’re at two columns with the 900 threshold. Now, once we hit the 500 pixel threshold, we’re down to a single column now this is all made possible with some classes that we added to our HTML file earlier before this article. So this hide mobile class. Excuse me mobile collapse class. We simply add that to any element in the HTML that is floating, or that is a column at the traditional level, so that we can then target it in our responsive file.
So an alternative approach would be instead of saying mobile collapse. Here we could actually spell out every element that we wanted to targets because a div one-third, we could say div main div side. You could list out all of the elements that you no longer want it to be a certain width and floated, but with that one helper class, it makes things a lot easier. Now, along those same lines, let’s say: there’s certain content that we want to display at the large desktop level, but maybe it’s not vital.
So once we get down to something with less screen real estate like a smartphone, we don’t want to show it. So a good example: are these boxes in the bottom right hand corner? You can see this one says important content and these two yellow ones say not vital. So once we get down to a tablet level, we can still show them, but once we get down to a smartphone size, we let’s say for example, we want to hide these two boxes that say not vital, so in our HTML I’ve actually given those class those Elements a class of hide mobile now, obviously, in our main stylesheet there’s no corresponding code for elements with a class of hide mobile, but in our responsive file within the curly brackets of this 500 pixel threshold.
Let’s say: hide mobile display none! So now, if we refresh, we see that once we’re at the traditional smartphone size were no longer going to show those elements. So, with one class we can sort of create this layered approach that, if something’s not super important just say hide mobile, give it a class of high mobile, so our layouts already beginning to be a little bit responsive we’ve got three columns.
We’ve got this content that maybe is not so important by the time, we’re down to a smart phone, everything so no column or hiding certain content or making a lot of progress. Now, let’s take a look at the navigation of the site because, honestly, in my opinion, this doesn’t look great. I think we can do better. So, let’s take a look at the navigation at the traditional full width size. We can see that it’s just a collection of links sitting horizontally once we get down to about you know our 900 pixel threshold.
Things start to not look great, they break down onto two lines and the way that the borders are set up. It just doesn’t look good, however, it does look good at the full size. So let’s write a bit of new code targeting the 900 pixel size, so in our responsive file, create some new code here, say: navigation instead of just being free-flowing, we want you to have a width of 25 %, so you can fit four on the line.
No more no less, and if we refresh, we see that that already looks better in my opinion, but let’s give them a bit of border bottom as well, so they look clearly defined border bottom. One pixel solid will go with a little bit darker of a gray. So if we refresh, we see that now there are four on a line. They have bottom border just to show the difference without this code. It would look something like this and I think this looks a lot better.
However, what if the browser now gets a little bit smaller at some point, this isn’t going to work. We’re going to want to go three per row instead of four, so we’ll write a new bit of code, we’ll say: media screen’, max width, 620 pixels. We now want three per row instead of four, so if we refresh, we see that we’re at four Y in the navigation, the window gets a little bit smaller, now we’re down to three wide and then finally, let’s optimize it for the smartphone size.
So down in this 500 pixel thrush showed threshold in this curly bracket. Let’s say navigation give them a width of 50 %, so there’s only two per row and let’s actually make the font size a little bit smaller. So now, if I refresh the navigation, looks good even at a mobile level and now that the navigation is in place, I think our work is done. We have created a responsive web layout, let’s review at the desktop level.
We’ve got three columns, a simple navigation that sits on one line and then a section down here with two columns. Once we get down anywhere in the tablet range, we have a navigation that now sits on two lines with even widths. We have two columns in this main area. We have a simple two column layout at the bottom and finally, once we get down to something like a smart phone, we have a navigation that sits two per line and that the rest of the content sits on a single column and we’ll also remember hiding content.
That’s not vital, that’s a really important topic is screen. Real estate is very limited at the mobile level, and a huge part of responsive design is asking yourself what content is really vital in what content is not. Let’s optimize it for the mobile experience once a user’s browser is really small. So let’s now review the technical side of things, we learned that there are two primary ways of including conditional code.
The technical name for this is a media query, so the first method was in the head section of our HTML file. We simply supply a location to a file and then here’s our media query, we’re saying if the screen has a max width of 9 and rickson’s. So if it’s 900 or smaller include this code, the second way to include conditional, CSS or the second form of media query is to include code in your actual CSS file and just say media screen and then then the same conditions max width.
That’s really it now. Let’s talk about what we can learn in the future, the biggest idea that I want to stress and we’ll cover it in another lesson: is this notion of mobile first, so what we did today is actually desktop. First, we took a layout that was designed for a traditional web browser on a computer and we sort of retrofitted it to work on tablets and smartphones, and that approach is called desktop first or I guess you could just call it traditional responsive design.
However, different design agencies take different approaches and I’m not going to get into the politics of device trends and extrapolating trends and noticing that more traffic is actually going to be coming from mobile devices than desktops. I don’t want to get into all that in this article. I just want you to be aware of the fact that some design agencies take a mobile-first approach and basically, all that is doing is taking our responsive media queries and just flipping them on their head.
So it’s saying instead of our baseline Styles lying in Maine and then including code conditionally, to work on tablets and smartphones. Why not start at the other end of the spectrum? Why not start with mobile first and include all of our baseline styles at this level and then include the CSS needed to create two columns and three columns through media queries. So it’s basically taking this and just turning on its head and using min-width.
Instead of max width now, another notion to mobile first is to actually use JavaScript to go the extra mile. So, for example, remember this content some of its vital and then these two boxes are not vital in order to serve the smallest possible file size to mobile devices, because you want to conserve data on a smartphone, we could simply not include these non-vital boxes. We could just not include those in our markup just delete them and then use JavaScript and Ajax that detects if the screen is large enough, then to then load that content in on the fly so that that way, the initial HTML file as small as possible for Mobile devices – that’s totally outside the scope of this article and you can go as far with the mobile first approaches.
You want to go, but that’s getting more into market demographics and device trends. It’s completely outside the scope of this article. But the other thing we will cover in the future is using javascript and jQuery to enhance the navigation area for the smartphone’s. So, for example, this layout is actually rather poor for a smartphone, because the navigation area takes up way too high of a percentage of the screen space.
When a user first comes to your site, they might not even want to use your navigation, so it doesn’t need to take up half the screen. So what we can do with something like jQuery or another JavaScript library is hide the navigation initially and then include a menu icon, that smartphone users tap, and then we can show this navigation. So that’s something that we will look into in further articles, but just know that, with a bit of JavaScript, we can take our responsive layouts to the next level.
Just a quick note at the end, if you’ve ever viewed an older website on a smartphone or a smaller tablet, you might have noticed that by default the page starts out very zoomed out and you need to pinch zoom in to be able to read the text And to see the images clearly and obviously if we spent all this time and effort creating a responsive layout, we don’t want that to happen when we view this page with a smartphone, we don’t want it to look like this and for users.
You have to pinch zoom in to still see this exact three column layout. We want the smartphone to display this layout by default. Okay and all you need in order to tell the device to not zoom out and instead use a one-to-one pixel scaling ratio. Is this line of code? This line of code is basically telling the browser to make your viewport the width of the device. So this will create a one-to-one scaling ratio and that’s exactly what we want.
So then the devices will take advantage of our responsive code and it won’t create the situation where users need to pinch zoom to scale in. That’s a very quick note, but it’s very important so remember to always include this line if you’re creating a responsive layout and that’s actually going to conclude this article. Thank you for reading. I hope you feel like you, learn something and stay tuned for more web development.
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-11-20 14:09:002020-12-20 18:32:35Responsive Web Design Tutorial and Explanation
Whether we’re playing games, downloading apps or buying clothes But somewhere Someone sat down and actually created that website. That’s like Facebook, Amazon, Even apps, like Instagram and snapchat, all started with one person sitting at a Computer Now you don’t need to be a computer genius to know there are a lot Of websites out there and people get paid to make them.
Today, we’ve come to See Bernie from Alyka to find out what it takes to be a web designer. How are you Good mate? Look I want to find Out what it’s like to be a web designer Alright come on in Alright Jesse? What do you want to know Well mate? I want to learn a bit more About your job, starting with what does a typical day, look like Typically, what I do is Run catch up with clients workout what the upcoming requirements they want, their Website and the first point is doing a wireframe of how everything fits Together, so that I know exactly what elements they want on their website From there.
Running Photoshop and to the actually design and then yeah we go through the Motions of making sure it’s all been approved back and forth until they like it and from there we build the website, And so why did you want to be a web designer Far out like I started, Like 15 years ago, man I used to design websites for for gaming companies. That’s my passionate and we wanted a Place where all my mates can all come in and discuss about how we kicked each Other’s arses in games, so that’s how it started.
I mean you got into it when you were 15, but if you’re a bit older, can you still get into the industry? Absolutely This industry, you don’t have any expired date. One of The guys one of our colleagues is like 50 plus He’s the UX designer user Interface, designer and user experience. That’s the best part With that age group. You have better Attention to detail you’ve got the experience, it’s ticking, all the boxes.
Right now, so I would say any age group: it’s not a problem, I mean. Is there Much work out there for a web designer at the moment, Every business needs a Website, it’s the main medium to get your message across to people these days. Definitely a lot of careers and Opportunities out there for websites These days, we don’t just do the website. We make sure it looks great for mobiles with tablets. It becomes more interactive.
You do more cool stuff, so it was exciting, So Bernard. What’s the hardest part of the Job Probably the hardest part is like pleasing all clients. Some clients might want some designs a specific way, even though they hired me to design it for Them And so what’s the most rewarding part of the job like what brings you to Work every day, The fact that, like every client Or every new design is different.
You know You get different industries, you Wouldn’t get the same more boring big industry like the painting websites for Example, you’re going to get an entertainment website based you can get a Lifestyle website based website you get a celebrity now and then as well. It’s Pretty fun, And so it would what piece of advice would you give someone wanting to Move into your field, I think the best way right to move into The web design space is to our create somehow the online portfolio showcase, a Couple of your best work not too much a couple of your best work: showcase nice Little animation tricks demonstrate a bit of search engine optimization as Well and a bit of forms online marketing and that’s the best way that that person Can get into the web designers industry and get picked on for doing work So what Characteristics does someone need to get into your field Creative right? We Have to have good attention to detail got to make sure you are prone to learn new stuff All the time it’s an ever-changing industry and you have passion for change.
With all this man, you’ll be alright From school to now. What are the steps? You took to get to where you are today. Remarkably, what I’ve done. I have selft taught A lot of these things and you find that online these days, you can do Like self teach, photoshop kind of work, self-teaching, HTML, CSS and all you have to do – is Go online and Google up how to learn these things and from there just create Your own projects do yourself a personal website, do some for your family and friends and from There you’ll build yourself a portfolio and just go and go and go from there There’s no better way than look at What’s out, there check out the code behind them and it’s Copy paste and learn and modify for your website, And so if you could get to Where you are today, but I’ve done one thing differently.
What would have been A lot? Of things, but the main thing I would do differently is probably how I program Stuff, I’m pretty stubborn in a lot of ways. Stuff I learnt ages ago, I kept using the same Principles and they’re not the most efficient, so there’s certain things that You got adopt early and in hindsight I should have done in the past. So just finding out new technologies and just being ahead of the industry, That’s right! That’s right and it’s back to what I really believe in its like.
Be Able to learn, be teachable and just make sure you always jump on to new technologies. Early Awesome! Well thanks so much for talking to us today, Bernard and I reckon we have a game of foosball All right. You ready to lose You’re on And that’s a loose by ten goas For more Information and to get involved hit up studentedge.Com.Au We’re going again, i’m winning one
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-11-16 14:09:002020-12-20 18:33:08I Wanna Be a Web Designer · A Day In The Life Of A Web Designer
All of that, so that you can take some of these ideas and implement them in your own web design. If you’re new to the blog welcome, my name is ron sega and flux. This blog is the best place for you to learn how to become the best freelance web designer so make sure you’re subscribed and hitting that bell button.
We got a new free web design course coming up. We’re releasing three articles per week so make sure you’re staying tuned with us. Let’s jump right into the first website, so this website is called swap the world. Let me scroll through it. While I explain what is this website and why I like it? Basically, this is a website that kind of brings into attention the fact that mostly the donation for blood for cancer patients are from white people and we need blood from you know other people as well.
So we need more diversity and they’re trying to bring an awareness to that and trying to get you to donate some blood. Now why I love this website and I think they’re doing fantastic job here. I think this is a topic. That’s hard for people, people don’t really want to talk about cancer and all that stuff and they’ve taken an approach kind of make it into a little bit of a fashion brand here check out the colors.
This is really not not a cliche for a website that talks about cancer patients. They they did a really nice color selection, they’ve combined these abstract animation, and this really highly web directed like art, directed photography all using the same colors. So a few things about this. First of all, I think you can really see that’s nice here that a lot of times, people think that you need to either choose illustrations or choose photography, and you can here combine them and it looks really nice together.
It works really really well also in terms of the layout, so this layout here is really not not really cliche, it’s grid based, and so it’s easy to read, but there’s something in it here. Obviously, it would be kind of the cliche to break it into three columns step, one step, two step three, but instead they’ve built it. This way. With these illustration, breaking up the grid a little bit and also you know, when you’re scrolling there’s a little bit of a parallax going on here in this section, they’re talking about colors and so they’re, using colors to demonstrate their point about talking about colors.
And then, here again using this, really nice photo um in a more impactful way, when it’s kind of like big on the whole screen and so and here they’re, basically giving you using the same type of grid as before. By giving you stories about people who you can help if you’re donating, so I think this is really really interesting. Combination of the illustration of using these abstract, abstract circles to demonstrate.
You know that white people and non-white people are codependent and working together. I think it’s a really interesting way to storytell yeah and just in general, I think website looks really really great, we’ll see how it reacts on mobile when we get to the mobile part of it. Let’s continue to the second website, so the second website is called muay and basically this is kind of a website, for I don’t know if to call it ecommerce, but they’re selling, these kind of like high fancy furniture and art and all that kind of stuff.
So when you’re just getting into it, there’s kind of enter the experience and when you click that you kind of move into with a sound something that I don’t really like. But they’re breaking down these things into the objects into creating kind of a scene for you which is really nice to interact with, and then you can actually go inside and check out the object that they’re talking about again really really great use of the experience.
How they’re telling you that, and also good typography good layout, that you can see here really nice? The menu here is kind of a non-cliche. It looks like a pop-up with a search here, also a voice search, something that is not very common. When you see kind of search or menus that goes up so in general, I think this is a really cool approach for an e-commerce website that is different. It’s selling different things, and so it wants to tell the story about them in different ways.
So here they’re talking about a lamp if you go into the collection and you can move and see how it looks inside and so really really kind of a nice interactive way to show what they’re talking about, instead of just looking like another e-commerce website that really Created an experience that actually also works pretty well on mobile, we’ll see that in a second. The third website is this: one: reno and pele kind of a luxury brand um for clothe, and I like this because you know if you scroll down here, it really really looks and feels luxury, and you can see how you can create luxury just by using the Right type faces so the right font, including a lot of space.
So that’s really what creates luxury. I think here using a lot of white space using good imagery. This subtle, you know parallax effects here. So that’s really really nice um! You know you scroll in here and then it turns into kind of a grid. So this is an unexpected. You know after you’ve, scrolled in here and you’ve kind of get a feel for how this scrolling, all of a sudden, they’re kind of like creating this zoom out effect to show their um to show their in instagram feed.
So I think that’s really really nice way of showing how you can brand yourself. You know there are so many e-commerce website today and you have to compare with amazon and asus, so you want to be different. You want to create some luxury, and you can do this here again by great use of typography, the mixing of the fonts and creating the space and the layout to give this a luxurious feel to it. The next website is calexo, and I know that you guys are going to hate me on this, because this website, really when you scroll it, uses so much of your cpu, but basically this is kind of a drink that has thc in it.
So you know the active active weed marijuana thing in it, so i’m not sure if you’re getting high by drinking this, but they wanted to take you on this kind of a hippie colorful journey and note how they’re doing this you know so sometimes it’s these colorful Shapes combining with imagery of the ingredients and just kind of like a lifestyle imagery here. I think this is rather cool, even though um yeah, this website uses a lot of your cpu, but it still gives you kind of a cool experience, something that I really liked on this website is how they created the menu into this kind of a drop.
So this menu right, the hamburger menu – is kind of a cliche, but the way that they’ve made a drop out of it block that feels like in line, because this is a drink um. I feel this is really really cool way. Uh this this website. I think there’s a lot of things that you can take away from it, basically in their art direction, typography and layout. Maybe this kind of scroll interaction which here it is so now right now it’s kind of like stuck my brows – are stuck that’s kind of that sucks right.
You need to think about this. When you’re building your website, you need to have the balance between. You know how awesome and impressive it is, but then again it needs to be functional. It needs to be running around and not not crashing your browser, my god. I can’t believe it happened during the demonstration, let’s move in into the next and last website. This one is called the a to z of ai, which is artificial intelligence, and basically, this is a website, it’s kind of a content hub for a lot of terms that are about you know, artificial intelligence, and I think they did this really really smoothly.
Um kind of like encyclopedia, look to it with the abc, but then, when you hover over it, you know the the illustrations a little bit change. You know they change the color, so the d instead of blue becomes uh, um, green, and so you, you know that they’ve used probably kind of like an svg animation to create this, which is really subtle. When you click it, it kind of has a really smooth page transition to it and then you’re kind of like reading the typography.
So note it so here it every article has a color to it, but when you’re getting into reading the actual article they’re switching back into a light background, because they know that it’s probably much easier to read on this light background versus on this colorful. So it’s really good a nice user experience, but also feels great. You know when you’re scrolling into it. So this is a really really nice website, that’s oriented for helping you to read content, and I think they did this really really nicely.
So these were the five website, let’s jump into the moba here and uh, and let’s see how they look when we’re opening them up on mobile. So the first one here is: it’s swap the world. You can see here something nice. These are actually different, colors and a different image here, which is nice, so they basically created two different versions: i’m not sure if it’s random or if it’s just you know mobile versus desktop, but they change the color scheme here on mobile and it looks great as Well, also very fashiony and yeah, so this website I feel like it’s working really well on.
You know on mobile as well. You can get access to most of the information loads, pretty sweetly here on my iphone, so I think this website I would rate it as work. You know adjust it for mobile responsiveness, really well, let’s check the second one, the movie, so this one just let it load for a second all right. So this one, let’s see what happens if we enter this kind of movie experience? Well, it’s kind of lagging a little bit, but the animation works and yeah.
You can actually still see the the whole scene here and you can still click on things. So, overall it works. I would say it works. You can open up this sub menu here for the item that you have just picked up overall. This is not a bad mobile, responsive kind of like an ecommerce website, so that’s I would rate it not bad at all. Let’s move into the next one. Let’s see the reno and pillai here, um yeah, this is quite obvious, still looks super luxurious.
They did uh removed a lot of the things here. So here we had images on the sides, for example, and they obviously minimized this a lot for mobile. They also remove these kind of the scroll interaction. Remember the zooming interactions, so they’ve removed and minimized the experience on mobile, which is you know. Sometimes you need to do this because not everything that you do if you try to force every interaction on mobile, sometimes that that does not work really well, let’s see the calyx so here on mobile.
So this is weird. This is what you see before you scroll. This is, I wouldn’t say this is a great experience because you have like: where did the hell did I came into? I don’t even know what this website is, I just see scroll down and then you scroll down, takes a while to get into where you actually understand where you’re at so. This is kind of like again this website, there’s stuff – I like it here, but um and it’s I think it’s amazingly well designed, but I think the experience wise you know development and how it handles the scroll interaction.
I think this, it’s not perfect could have been done better, the last one, the a to z of ai. I think this is pretty straightforward. They’ve put here the kind of a category, so you can scroll them, but most of it, yeah transition still works well on mobile and all the rest looks pretty similar, so yeah pretty good experience. Let me know what you thought about these website. If there’s anything I know, a lot of the comments are hey.
Were these builds on webflow? No, these website that I showed not right now did not were not built on webflow, but I do think that we can pretty much achieve most of these effects and transitions and obviously layouts and designs on webflow. So if there’s anything that you were wondering here, hey, how could I achieve this thing on webflow? Let us know in the comment and we’ll create a special article around that.
As I said in the beginning, we are pumping out new awesome articles for the free web design course so make sure that you’re subscribed and i’ll see you on the next article. You
https://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpg00visaliawebhttps://visaliawebdesign.com/wp-content/uploads/2020/05/VisaliaSEOLogo-1.jpgvisaliaweb2020-11-12 14:22:002020-12-20 18:33:19TOP 5 WEBSITES OF MAY 2020: Mind-blowing web design
We may request cookies to be set on your device. We use cookies to let us know when you visit our websites, how you interact with us, to enrich your user experience, and to customize your relationship with our website.
Click on the different category headings to find out more. You can also change some of your preferences. Note that blocking some types of cookies may impact your experience on our websites and the services we are able to offer.
Essential Website Cookies
These cookies are strictly necessary to provide you with services available through our website and to use some of its features.
Because these cookies are strictly necessary to deliver the website, refusing them will have impact how our site functions. You always can block or delete cookies by changing your browser settings and force blocking all cookies on this website. But this will always prompt you to accept/refuse cookies when revisiting our site.
We fully respect if you want to refuse cookies but to avoid asking you again and again kindly allow us to store a cookie for that. You are free to opt out any time or opt in for other cookies to get a better experience. If you refuse cookies we will remove all set cookies in our domain.
We provide you with a list of stored cookies on your computer in our domain so you can check what we stored. Due to security reasons we are not able to show or modify cookies from other domains. You can check these in your browser security settings.
Google Analytics Cookies
These cookies collect information that is used either in aggregate form to help us understand how our website is being used or how effective our marketing campaigns are, or to help us customize our website and application for you in order to enhance your experience.
If you do not want that we track your visit to our site you can disable tracking in your browser here:
Other external services
We also use different external services like Google Webfonts, Google Maps, and external Video providers. Since these providers may collect personal data like your IP address we allow you to block them here. Please be aware that this might heavily reduce the functionality and appearance of our site. Changes will take effect once you reload the page.
Google Webfont Settings:
Google Map Settings:
Google reCaptcha Settings:
Vimeo and Youtube video embeds:
Other cookies
The following cookies are also needed - You can choose if you want to allow them:
Privacy Policy
You can read about our cookies and privacy settings in detail on our Privacy Policy Page.
