Design Tips for Customization the Complexity of UI/UX

Category:
Features
August 10, 2023
Author
David Heatch
Design Tips for Customization the Complexity of UI/UX

You'll want to customize your blog for functionality by adding various WordPress plugins. But at the beginning, following some basic design guidelines will benefit you in the long run.

Increase White Space to Decrease Clutter

We're decades past the early days of web design. Remember the flashing buttons and cluttered websites? That's not how to start or design a blog.

You don't want to create a website that distracts viewers from the heart of your content. The best way to keep people focused on exactly what you're saying in your blog is by creating what's called white space.

White spaces are the empty spaces around your copy and images that will keep your website design clean, simple, and effective.

Don't Use Stock Photos — They Do More Harm Than Good

The reality is that stock photos don't do your blog any favors. You absolutely want to include additional media with the text in your posts, but using someone else's images doesn't allow your blog to be unique.

If you have the money (or skills), including professionally-taken images is the best way to go. Of course, that can get expensive.

Thankfully, your phone is now powerful enough to capture images that can complement your blog posts. This is the easiest solution when you're first figuring out how to start a blog and what to post.

Consistency With Icons

The devil is in the details. Though your average blog visitor isn't going to consciously notice if you have chosen your social icons from a variety of places, unconsciously, it will impact how professional they think your blog is.

You will not only want all your icons to be using the same design and font, but you'll want to keep all the fonts on the entire website within the same category — with only a couple exceptions.

Strong Colors

Though you will want to rely heavily on white space, when you do use colors, they should be highly contrasting. A well-designed blog makes it easy for someone to use, read, and share.

By using contrasting colors, you increase readability and retention.

Don't Go Crazy With Design

There are a number of basic design conventions you'll want to use when figuring out how to start a blog. You don't want to make your website so eccentric and quirky that it falls short of the basic functional expectations of a user.

There is still plenty of room to be creative within these basic parameters of web deisgn. But when you're just getting started, you're best off working within "the box", rather than thinking outside of it.

Some standard blog conventions to make use of include:

  • Headers
  • Footers
  • Seach bars
  • Sidebars
  • Social media shares
  • Author attribution
  • Subscription options

If your blog post headlines aren't compelling, nobody is going to read far enough to realize how awesome the rest of your content is. Your headline is your one chance to entice a reader into clicking on the post and exploring your thoughts on a topic.

The best headlines promise your readers answers to exactly the problem they're trying to solve at that moment. This is one reason "How to" articles are so effective.

If you're not sure what the subject for your next headline (and blog post) should be, there are a few different ways to determine what content will resonate most with your target market:

  • Check out the comment sections on your posts (and on other similar blogs). What are people talking about? What are they asking?
  • Take advantage of content insight tools such as BuzzSumo. These can show you the most popular posts in your market.
  • Ask your subscribers. Those most loyal to your blog and brand are often willing to share their wants and desires when it comes to content.

Once you've got your topic down, you'll want to focus on crafting a headline with punch. The key to a sizzling headline is using active, dynamic verbs. In general, adjectives will weigh down a headline, while verbs drive it forward.

You will also want to tease your readers without satisfying them completely — leave that for the bulk of the post. Too often, headlines are written in such a way that the casual reader doesn't even need to read the lead sentence to have their curiosity cured.

However, don't deceive your readers. You might get a lot of clicks at first with deceptive headlines, but you will ruin your reputation and brand — as well as earn you the label of "click-baiter".

Write Attention-Grabbing Intros

Once your headline has pulled a viewer in, don't let up. The fact that you've got them past reading the headline is huge — a vast number of Americans only read headlines.

But, you've managed to beat this pitfall. So now all you have to do is keep them engaged.

Which, of course, isn't easy.

The key is to tell your readers why what you're writing about is important: not a big intangible kind of important, but something that's important to them specifically — right now.

That's right; it not only has to be important, but there also needs to be an immediacy to it.

A common mistake people make when writing their first blog posts is erring on the side of being too academic or too fluffy. You do want real facts in your introduction — otherwise, why should people listen to you? However, very few people want to read an academic lecture on whatever topic you're exploring.

"It's a balancing act. But you can do it. Just find your voice and trust it.

The template’s default font, Montserrat, is a friendly geometric sans serif, which is nice. But we're looking to write reviews of apps focused on modern tech workers’ needs, so we want something a little more dignified.

Looking through the font dropdown in the Typography panel, we're not seeing anything that’s just right, so we're going to head to our site’s settings by clicking the W in the upper left corner, then Site Settings.

Then click into the Fonts tab and open the Google Fonts dropdown — where we can choose from any of Google Fonts’ massive collection.

We'll be going with a different sans serif called Work Sans, so we load that one up (making sure to select the thin weight, which has a delicate Swiss-design feel) and head back to the Designer.

1. It’s easy to get started quickly, and learn as you go

As we'll show you in this post, it’s super-easy to start blogging with Webflow.

You’ll start off making minor tweaks to the visual design and content structures, but you’ll soon want to customize more. And Webflow makes for a great learning platform. As you play with the tool and watch our tutorial videos, you’ll be able to turn your blog into a truly custom experience for your readers.

2. Webflow includes an intuitive CMS

To blog quickly and effectively, you really need a CMS (aka, content management system). And while there are a host of options out there, Webflow stands apart for two reasons:

On-page editing. There’s nothing more intuitive than double-clicking some text, and editing it. Right there on the page. It’s like writing and editing on Medium, but you’re actually updating your website. Awesome.

The template’s default font, Montserrat, is a friendly geometric sans serif, which is nice. But we're looking to write reviews of apps focused on modern tech workers’ needs, so we want something a little more dignified.
  • where we can choose from any of Google Fonts’ massive collection.
  • from any of Google Fonts’ massive collection.
  • we can choose from any of Fonts’ massive collection.
  • we can from any of Google Fonts’ massive collection.
  • Fonts’ massive collection. where we can choose from any of Google

Easily customizable content types. We call our content types “Collections,” and it’s really easy to tweak existing Collections, or make your own from scratch, especially as you get better with the Designer.

Related reads: How to use Webflow CMS as a content modeling tool

3. It’s SEO-friendly

If you’re serious about blogging, you’ve got to be serious about search-engine optimization (SEO) too. Because that’s how people find the awesome content you produce.

Thankfully, Webflow will help you rock your SEO by being:

Define your URL structures (which default to a human-friendly, i.e., readable, format)

Auto-generate meta titles, descriptions, and Open Graph (OG) settings based on your content, so you can use fields you’ve already written for metadata, or handcraft them

Add alt tags to images

So, with that out of the way, here’s how to get started blogging with Webflow.

Related reads: Website SEO: the ultimate guide to ranking on Google

Step 1: Pick a Webflow CMS template

First, check out our responsive templates, and be sure to click the “CMS” filter. (If you clicked that link, it’s already done for you.)

Why? Because using a CMS-powered template gives you access to on-page editing and the CMS panel, so you won’t have to dive into the more complex Designer until you’re ready.

We’ve got a bunch of CMS-powered templates, but to keep things easy, we'll use the free and minimal Tokyo blog template.

If you'd like, you can also check out our blog templates, as these are also CMS (content management system) templates, but they are filtered specifically for blog websites only.

Step 2: Customize your site’s design

To keep things simple, we’ll just make a couple minor tweaks to the Tokyo blog template’s visual design using the Webflow Designer.

Updating the typography

First, we’ll update the site’s default font. Typography has a massive effect on how people perceive and feel about a website, so it’s a simple change with lots of bang for your buck.