Design like Moz.com in layout and get tips you can use.

A website’s design and layout can be missed by perusing its content. Sure, that’s not what you’re looking for, right? But I am, to show how the “Big Guys” layout there website for viewers like you and me. How do they invest in user experience (UX)?

Moz.com has an Alexa rank of 1,594 and has a healthy daily engagement with visitors, sites linking in, keywords, and much more. They also offer a variety of services – paid and free. They use a “Mega Menu” to pinpoint what each of the topics on the main menu offers. Instead of a dropdown menu. The mega menu provides more direct information linking to specific related areas.

So let’s discuss the website’s layout ignoring content .

First , the website theme will dictate what design features are available to use. Then, if a member of the design team knows some CSS coding they can add design features which can make a website really visually unique and stand out from the crowd.

Moz ‘s theme is bold and loud, rightly so. It’s popular, has a lot of great content that is useful to the viewer looking for SEO information. Notice on the main menu the topics or “categories” listed. The arrow  next to the topic tells you there’s more info related to this topic – click on the arrow and the mega menu will appear, in a second.

Right away you understand what this website is about. The message is clear in text and image on the opening introduction to Moz – the homepage. As you scroll down you begin to see listings of other websites that use and or acknowledge Moz’s services – rightly so.

 

 

What happens when I click on the main menu “Learn SEO”? The mega menu appears and lists what’s offered. This is a clean and organized way to  visually isolate content related to the main menu topic. The content stands out and doesn’t compete or distract visually with other information on the homepage. Using the mega menu makes sense for Moz because it’s a huge website with lots of content and this plugin helps to organize it better. The mega menu is a plugin you can to your website.

 

 

This theme offers segments  or features to add on the home page.  So the home page is like “Window dressing” similar to when you go shopping at a mall and see all the stores. One catches your interest because it has these cool items visible up front and grabs your attention.  Moz has been around for a while on the internet but still needs and wants customers. Having a homepage visually promotes what it offers with confidence. Visit Moz to view the full homepage.

 

 

Let’s say I’m a visitor interested in the Moz blog and what it writes about.  I click on “Blog” on the main menu and taken to the blog page. Several posts are listed a nd I view each one with interest. So much to choose from, right?

 

But I choose this post – and I get a  break from all the visual busyness! Notice how clean the page is. No sidebars! Just social media links. No Ads screaming out for attention. The content becomes the star – as it should and does not compete with anything else.

 

Moz’s content backs up what they promote – SEO knowledge and authority on the topic. Here’s another Moz post to view –

 

 

[tweet_box design=”default” float=”none”]Moz takes you on an organized, visual journey through its accumulative knowledge about SEO. It takes planning to organize so much content and present offers smartly to viewers.[/tweet_box]

 

So here’s what I like about Moz from a viewers point of view.

What I like:

• There’s no confusion on this website.
• Devoted, separate pages review offered features which allows for more detail on each specific offer
• Posts link to other posts within MOZ that are related in content
• No sidebars which makes content more readable, less confusing, and more impactful
• The images are artistic graphics, not photos of people and other objects. People images only on the header of the website and other specialty feature website headers
• Visual look of the website is consistent, text, font, color, and text size
• No overt ADs
• Use of the mega menu adds clarity, professionalism for a large website
• Clear navigation throughout
• Theme color is consistent throughout website
• This website is for the viewer
• Quick find through the mega menu

 

What I dislike:

• Text is too small, hard to read
• Text color is too light, hard to read
• Crowded with information, could be overwhelming to viewers
• No  accessibility features – audios , enlarged text, etc. for the visually impaired or disabled

I find almost every blog/website I visit  accessibility features are absent. Some are very easy to implement like the color of text. It’s raising awareness of how and what to implement.

 

User Experience (UX)

I couldn’t find anything that was outstandingly wrong visually with Moz. But I recognized a few basic UX ( user experience) layout features. These would be:

• Easy navigation
• Organized content presentation
• Consistent theme colors throughout website. There may have been websites within the main website but the use of the SAME color theme within pages and posts connected all the pages to appear as a one. cohesive website
• Consistent text size, font and color throughout website

What you can use:

• Uncluttered primary menu. Take a look at your menu. Can it be more organized?
• The mega menu if you have a lot of content where this plugin can help to organize it all
• Easy navigation – meaning being able to find what you want in a direct way
• Explore what your website features are. Avoid settling for a website theme. Explore the various options on the internet. I recommend My Theme Shop

Maybe I’ll review Neil Patel next. 🙂

Was this post helpful?