Web Typography: 17 Tips to Convert Your Website Into a Professional One

Web design is the field that is always growing through the efforts of a ton of different developers working online at any one time. However, since it’s such a huge body of knowledge it can be hard to reign in the things you need to know about. In fact, the influx of new ideas or the coalescence of two different concepts makes it even harder to keep track.

Web Typography: 17 Tips to Convert Your Website Into a Professional One

Everything from the art of the color scheme to your choice of topography can affect how your site works with the users. Unfortunately, while there are sets of core rules, you can still grow from those foundations. This makes it almost paralyzing when you have to make a concise choice about design. But you have to make those choices because professionalism shows clear through form as well.

If you’re a little confused as to what you should be doing with your site then don’t stress. The core fundamentals, no matter wherever you grow with them, are still a great place to start. You can fall back on them at any time you need. Here are 17 tips that can help you improve your site and even make it look a little more professional.

Tip 1: Learn New Concepts and Languages

Okay, this is the most basic thing you’ll need to know about when designing. It won’t matter how many principles you know about; if you have zero knowledge about what’s new then it won’t matter. Of course learning about these new things isn’t as hard as you might think. There are countless different resources online that have the aim of helping you learn a thing or two about web design and development. What it boils down to is your ability to look around for the lessons that will help you.

Tip 2: Learn HTML5

The first thing on your learning priority list should be HTML5 and learning about their new tags. There are a lot of them but one of the most important one is their new support for <DOCTYPE> tags. It makes it easier to clean up your code and frame your content in a clean manner.

Tip 3: Addition of Tags

For content heavy sites, the addition of <video> and <audio> tags should make it a little easier for you to post your original multimedia presentations. It also allows you to integrate those same presentations into the initial splash page of your site. This way a user will feel like their experience is seamless.

Another thing you’ll need to know about is how you make content. The concept behind which will be discusses further, but for now, just make sure to keep them bite sized. You don’t need overly complicated or fancy wording or video/audio files that go past the 3-minute mark.

Tip 4: Just Keep Learning

Lastly, on the subject of learning itself, well it helps if you keep learning something new on a daily basis. It helps you exercise your brain and it will also teach you about trends you should watch out for in the future. Learning resources are plentiful around the web and bloggers are constantly trying to talk about what’s new so it shouldn’t be hard to learn those new concepts.

Tip 5: Know the Details of Design

Now that we’ve taken down some of the essentials and concepts, the next thing you’ll need to learn are the details of a site. They aren’t uncharted lands, but at the same time, they can be complicated. Right now, we’ll focus on how to make minimalist choices on the basis of creating a stable and clean site.

Color Theory

Color Theory

While there are many different elements to a site, color scheme takes precedence. Generally, color acts like a theme and since your color choice will fill the background, you have to be smart about your choices. Here are some of the concepts that artists and designers have used for years. Just to help you out a little bit more, refer to a color wheel that has some of the most basic shades presented on it.

Tip 6: Complementation

The concept of complementation is that you take a certain color and then find its complete opposite. Just imagine the color blue paired up with a certain shade of orange; their very different colors but pairing them together can bring certain elements to life. Compound color schemes use two related colors and then find their contrasts.

Tip 7: Vibrant Colors used in Tandem

Vibrant colors are often considered very energizing to look at. Bright yellows give off a sunny feeling and reds are somewhat invigorating when it comes right down to it. A vibrant layout invites people to take action so invite them to keep looking around your website.

Tip 8: Analogues

If you really want to brand your site with a certain set of related colors, analogue choices are the way to go. On a color wheel, analogues exist right next to each other in lighter or darker shades of the middle color. For a very prominent example, all you’ll have to do is to check out Facebook and how they use blues to imprint the site on their users mind.

Tip 9: Figuring out Fonts, Typography, and Typefaces

While it may seem a little confusing, all three of these elements differ wildly from each other. You see, a font is the package from which you pick a typeface. The typeface itself is a certain form selected from the font package. Typography is a set of rules and shapes that compose how typefaces are structured within your site. At the same time, they’re also the main means through which your written content is framed on a page.

Tip 10: Considering Readability

Readability is just that; the level of clearness which enables your users to browse through your content. There are many different things that dictate how readable your site really is. To jump back to something discussed earlier, color is also a huge factor in how well your users can read your site. Usually, contrasting is the best way to go about it but that can be a tricky thing to get a handle on.

Tip 11: Colors Again

A basic rule to follow when picking the right contrast is to remember brightness. For example, if your basic font color is black, then that’s a stable and good choice. However, if you mix it up with a very bright blue or yellow, you’ll get an eyestrain effect. That will repel many people from reading through a whole post so make sure to avoid that at all costs. Instead, try and think about subtle contrasts like black typefaces and grey backgrounds. Looking at these simplified combinations makes it much easier to read text and such.

Tip 12: Spacing

Spacing

Spacing is also another thing you have to think about when it comes to readability. Even the smallest spaces like those between letters can lead to bad user experiences. So, how do you deal with spacing in a manner that’s constructive to you?

First off, your choice of font family and typeface is very important. While it may seem a little tempting to use a typeface that is fancy, users might not agree with your choice. The monospace family is a great collection of equidistant lettering that is easy to read. You should look into the different fonts that are both user created and have been standard for years.

The second part of spacing will involve the placement of content. Just imagine, for a moment, a site wherein all the articles are squished together in order to make space for other elements of the page. After that, try and imagine a page wherein content is too spaced out. Both situations make for bad points of focus, which can both mess with your site’s navigation and flow. However, this problem is easily rectified through the use of equal distancing of each post.

What to Do with Content

For a professional site to survive, it has got to have great content to spurn the viewers into looking for more. There are usually numerous types of content, but for now, we will focus on videos, audio and written articles.

Tip 13: The Written Content

Writing online has recently been taking a new face. There was a time when exhaustive and extended articles were revered online. However, with social networks like Twitter or Facebook pushing to make posts shorter, the collective online attention span has shortened.

What does this mean for the written word? Well, not much really but it does mean a lot in regards to which audience you’re approaching. If, for example, you’re aiming at the common Internet user, then your content has to be snappy and to the point. You’ll have to fit the whole idea and premise of what you’re trying to sell in the space of at least 100 words. On the flipside, sites that offer comprehensive articles into certain niches have the opposite problem.

Long posts aren’t always rife with quality. However, they are still used as a means to disseminate information regarding a dissected subject. So from here, it’s easy to see how you’ll have to reserve these kinds of posts for certain kinds of sites. Tutorial sites and news pages are often the ones that will benefit most from detailed information.

Tip 14: The Video and Audio Content

These two are probably the trickiest kind of content to figure out. Viral videos are often regarded as a goldmine when it comes to exposure. Once a video gets picked up and noticed, its reach can often surpass the hundred thousand mark. However, a fake and intentionally constructed viral video can often go unnoticed, and then die in obscurity. The real trick behind viral videos is that they aren’t designed to be viral. Some of them are flukes that show off something funny or insightful, while others are just a product of passion.

The main thing that you’ll have to take note of is the effort that you put into the content in question. Instead of trying to create a formula that works, create videos and audio that actually mean something. You could be informative or entertaining, whichever one you pick, the idea is to stick to one and roll with it through the whole video.

The Hierarchy of Content

So now that you know a little bit more about how you should create content, the next thing to take into consideration is how they will be structured. On each of your pages, there has to be a discernible hierarchal structure. This will dictate just which of the posts you have on there are the most important.

Tip 15: Structure According to Relevance

The easiest way to get rid of your structure problem is to always consider the relevance of the content itself. If you have posts that are newer or have better information regarding your niche, then there’s no doubt that that goes up first. However, if your site thrives on aged posts and few new updates like a tutorial site, then an introduction is in order.

Along with that, you can also use relevance in order to find the posts that share something with what the user is reading. This way, you are able to captivate the user through the use of more posts and content.

Tip 16: Navigation and Flow

Navigation and Flow

Since the web is mostly a visual medium, the key to navigation is learning how to lead the eye to certain locations on your page. You will want the user to keep scrolling or browsing through the power of your content. However, there is another element of web design that makes this whole process much easier on you.

Navigation is not just about menus or extra feature posts; it’s the method through which you can create a certain flow to your page. This element ties heavily together with the structure of content, as it will help you lead people to the content you want to promote.

Consider the Z-layout and how it will drag the users’ eyes from left to right, downward into left leading diagonal, and then right to left at the very bottom of the page. Nested menus within other menus are also a great way to decrease the space that your main navigation bar will take. Lastly, remember to keep your flow simple as complicated drop down lists can annoy a user to no end.

As a bit of a side note, page layouts are also another method of figuring out how to place ads on your site. Make sure to learn a bit more about them while you can.

Tip 17: Have You Considered Minimalism?

Ah minimalism, it’s been around for ages and yet, in the world of the Internet it has found even more relevance. Minimalistic approaches can be very powerful tools in regard to site creation. Portfolios can use the method to get right to the point.

Business sites can get to the core of what they offer by eliminating unnecessary elements on their page. Lastly, a minimalist site that uses a focused color palette, informative posts, and simple navigation can often garner a ton of traffic.

Conclusion

When it comes to professionalism, there are other things you’ll need to learn about in order to reach that lofty height. There’s also team building, newer developing concepts, the importance of responsive design, and the looming shift in Google’s search algorithms. However, from a design standpoint, the tips above should really help you get by.

Remember to consider a simplified but concise approach to your posts, as they will be able to help you a lot. Other than that, have fun with it! There’s so much more you could be learning about the huge world of design and development. You can even learn about the intricacies of remote access software or mobile development if you wanted.

Further Reading

Like it? Share it.

5 Comments

  1. Great article! A lot of interesting things included. Thank you for sharing!

  2. THanks for your tips. I am about to upgrade my HTML from 1.0 to 5 and CSS as well. My designing team is designing a completely new theme for my website, I have discussed some of the points mentioned in your article but few of them are new to me and i have never thought any of them before, now i will also discuss this with my designing and development team. I think to achieve a best design our at most priority should be our audience we should focus on UX and user experience. Usually my SEOs keep pinging me to modify design to enhance SEO but most of the time i ignored them :) BTW your article could ve very helpful for non-technical persons like me.

  3. I Like It Your Website Content Very Useful Bookmark your website at my browsers thank you keep it please daily update

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>