Hey friends, welcome to Creative X. My name is Brad Hussey and I've been designing and building websites since you were a baby, unless you're older than me. And in that case, remember MySpace and dial up internet? That long. I'm going to give you 30 quick web design tips. Let's go so if you're new to web design, just start learning by watching tutorials and designing things. Even if your designs are not perfect at first it's important to start practicing. You should have a plan before you start working on a web design project usually means creating a site map and a wireframe. Knowing the basics of major web design languages like HTML courses, even JavaScript is empowering. Even if you never plan on becoming a web developer, this knowledge can help inform your design process. Also, you don't have to code if you don't want to. You can use a modern website builder that doesn't require any coding at all. There are a lot of really good options out there. My favorite is Editor X. You can build anything you want in it. Pick a style for your design and stick to it.
It can be minimalist, brutalist, modern, playful, or even anti design. Just be sure that you're consistent with the style that you choose. If you want your typography to look good, there are some rules and standards that you should follow. My favorite is the golden ratio. Choose a base font size like 14 pixels, then multiply it by 1.618 to find the next font size up so 14 multiplied by 1.618 is about 23 pixels and so on. This will help you make your designs more interesting and a little bit more dramatic. Now, if Leonardo da Vinci lived today, he would be a web designer and he would use the golden ratio for his font sizes. Paulo Da Vinci's lead animations are fun and they make you look a little extra. They can also be used to inform your user what's happening on the website or to give feedback like a loading screen. You don't need to be a motion designer to add animations to your website. An editor animating any element takes just a few clicks when designing your website. Decide on a primary action color to create contrast between different elements. This will help your visitors know what's important and maybe what's not as important.
For example, you can use a bright color to draw attention to an order button. Images can slow down your website and distract from your content, use them sparingly to avoid overwhelming your visitors now I'm going to contradict myself here, but you can also use lots of images. The reality is great designers break rules all the time. If you choose to go a little heavy on the images, at least optimize them to improve your load times. Find web design inspiration from other websites. Look at awards, wsj.com site inspire Apple one page, love even the editor blog for some ideas for your own website designs. Now, when starting out in web design, it's a good idea to use templates. Templates help you create professional looking websites quickly and easily. Editor access a lot of templates that you can use right out of the box.
Make sure to use the correct file formats for all of your images and other assets. For example, images should be JPEGs or pages, even gifs. Yes, I said gifs. There's not a word. Logos should be vector graphics, which are SVG files. That way you keep them nice and sharp grids can be used for alignment to create a well-organized and balanced web design. They can also be used to create unusual and visually interesting structures responsive grids are easy to set up using editor x simply out of container choose make a grid and then customize your settings to match the design. Flexbox is amazing. It's used to create websites and layouts that look good on any device, any size, any viewport or breakpoint. You can use it to align elements create columns and a lot more. Editor X uses Flexbox with three different layout tools, stacks, layers, and repeaters. These three tools will help you adjust your content across all viewpoints seamlessly without you having to understand how to code Flexbox, which can get a little hairy let's talk whitespace.
If you don't have enough whitespace on your website, it can feel a little crowded and it's a sure sign that you're a rookie. White space is that empty space on a page that helps to separate elements, improve readability, and just give your website some breathing room. Everybody needs some space to breathe whitespace to use a style guide, you can help keep your fonts, colors, and other design elements consistent across your entire website. It's especially helpful if you're working with a team to create a style guide an editor x.
Just choose site styles. Set up your typography and colors, and whenever you design an element that you will use more than once on your website, you can save it as a global asset. This way it'll be easily accessible across your entire site. Always look consistent, and that way you make sure that your team is using the same elements when designing your website. Think about who is going to be viewing the website, the target audience. Remember that they're going to be the ones experiencing it and reading it. So make sure it's easy to understand and navigate you simple fonts and make sure all the information is easy to find when in doubt. Use one font. It's tempting to want to express our creativity and use all the fonts that we think look beautiful, appealing, cool, whatever but your audience doesn't care about your font preferences. Plus, the more fonts you use in your website, the slower your website will load.
And research says you've got about 50 milliseconds 55 zero to create a good first visual impression if your site takes 8 seconds to load because of your seven super cute fonts. Well, in the words of one of my favorite nineties country songs Helvetica is a respectable sans serif font and everybody has it on their computer. So if you want to create some visual interest and hierarchy, you can play with font weight, font size and color. To achieve that, no need for a thousand fonts unless you have a specific brand with guidelines for using colors or you're a professional designer, it's probably best that you stick to using just a few colors. Color, science and color theory can be difficult to understand. So when in doubt, just use black and white, you can also use a light shade of black and a pale off white for a more sophisticated look. If you must add more color to your website, try to avoid primary colors like red, green and blue. Instead, use different shades, tints and tones of those colors to make your design look more appealing. Use a tool to help you choose your colors for your website.
I recommend using a website called Coolhaus Stucco Once you've established your color palette, you can then add those colors in Editor X and then you're ready to start building your site. There are three ways to align the text on the web left, center, and right. If you're not sure which one to choose, go with left alignment. There's also justified alignment but we're designing websites, not newspapers. But Brad, why don't we just center align everything? People don't like reading large chunks of centered text even if they don't understand why. So left align your text unless you want to be considered an anti designer, in which case you should follow the next tip, even if it's just to understand it better. Like anti design. Take everything I've said so far and do the literal opposite make sure your website looks good on smart devices and fonts.
Why? Because most people are addicted to I mean, most people for the most part, experience the internet and your websites on their smart device. So it should probably look good on it and it should load quickly. Have a nice layout that's easy to navigate on a mobile device. The call to action should be easy to tap. You should use short paragraphs now with Editor X, you can easily modify any element on your design for each and every breakpoint without having to code 60 media queries. Basically, this means you have no excuse for having an amazing website on any device buttons everybody likes a button, everybody likes clicking them, tapping them, pressing them, whatever when using buttons on your website, make sure they are consistent and you have a system for your buttons. Now, what am I saying here? Think about it this way you should choose a primary call to action style and be consistent with it. If you have a secondary call to action style for your buttons, make it different by choosing a more muted color or making it smaller, or simply just making it a link.
If you're using Editor X, you can keep these buttons consistent across the entire website by saving them as global assets. If your primary call to action is hard to find or hidden from view, you may be losing customers. Make sure that your call to action is always in view or just a short scroll away. One way to get more people to see your call to action is by using a sticky bar this is a bar that will stay at the top or bottom of the screen. No matter where people scroll on the page, you can create a sticky bar quite easily. An editor X by clicking on the container. You want to be sticky, choose settings and set its position to sticky.
When it comes to web design, simplicity is often the best way to go to many calls to action on your page can confuse and overwhelm your visitors, leading to inaction quite the opposite of call to action. Focus on one primary call to action and make sure it's clear and easy to find. Use, contrast size color position to make it stand out. There's a saying that goes A rising tide lifts all boats this is also true for web design. If you want to improve your web design skills, join a web design community and get involved. There are many online communities out there that can help you learn about design and improve your craft. Most of these communities are happy to help beginners and experienced designers learn and grow. Share your work, ask questions, give feedback, collaborate and challenge one another to grow. It's one of the best ways to get ahead and not feel so isolated.
In fact, why not join the Creative X crew it's our free community here on this channel and the link is in the description below. If you join, send me a message and say hi. Just hit publish. It'll never be perfect, so ship it and work on it live. You can get better at web design by practicing every day. The more you design and build stuff, the better you'll get. Took me years to know how to do that. Even if you consider yourself to be a pretty good web designer, practice every day and you'll become world class at your craft in fact, practice. With me by watching this series right here where we build a creative agency website in Editor X, if you like these tips, let me know by tapping that like button and subscribing to the channel we'll see you in the next one, friends.