Category Archives: internet

How to Create an Agile UX Workflow

Agile used in sports means athletic, energetic, and limber. It is applied to gymnasts and Olympic athletes at the top of their game. It can be used to describe mental processes that are fast, flexible, and acute.

In the world of user experience design, agile refers to a number of processes that start with minimal overhead and combines teams of collaborators to complete a fluid sequence of tasks. The agile approach values interactions and individuals, customer collaboration, and a quick response to change.

Scrum Methodology

An agile workflow based on the Scrum model started out in software design. It starts with a team planning meeting in which all members break down processes and decide how many each member can commit to. They create a list of tasks that can be completed in a specified length of time, usually between two weeks and a month.

The scrum team codes and tests features for functionality during the first agile sprint, a brief time frame for intense work. They attend brief, daily scrum meetings facilitated by the ScrumMaster, who is like a coach. Team members share progress and brainstorm solutions to problems. Daily meetings keep the team synchronized throughout the sprint.

Image via prosoftnearshore.com.

At the end of the sprint, they review what they’ve created with stakeholders, receive feedback, and plan the next sprint. Feedback suggests revisions or changes that drive the next phase of development.

An agile workflow helps teams complete projects quickly, so industries like law and marketing have adopted similar methodologies. A UX workflow diagrams the steps from research and gathering user data, through usability testing just ahead of development.

Currently an estimated 69 percent of UX practitioners use an Agile UX workflow. Google’s methodology allows professionals to move from designing to testing in as little as a week, but each organization can modify stages to fit the best time frame for their project.

Transitioning to Agile UX Workflows

Teamwork speeds the process. Designers, developers, and managers create cross-functional teams so everyone is working on different aspects of the same problem concurrently. As a group and as individuals, each segment focuses on user activities, needs, and interactions, and studies every aspect through that lens.

The process is seen as a series of stages or increments. At each stage, development can loop back to correct problems or misconceptions, or move forward to the next stage.

Chunk UX Design for Agile Planning

When teams move quickly to see a project from start to finish in a very brief period, it’s tempting to shift focus from meeting the user’s needs to completing the task. A finished product is worthless if doesn’t accomplish the goals for which it was designed.

Chunk design work into smaller tasks so you can continually refocus on user research. First, define your intent, then plan UX activities that will support that intent. Break activities into smaller tasks, then use agile software or sticky notes to create user stories.

Decide in what order requirements should be accomplished and who will be responsible for each. Every decision must be directly related to a user story.

Sprint Like Google

Strong design processes follow a systematic plan, but there’s always room for iteration. If an idea doesn’t go as expected, take a step back to re-iterate before moving forward. Google’s Design Sprint involves five phases, but designers are free to loop at any point.

Let’s look at the steps, each of which is designed to take one day. Organizations that don’t follow Google’s timeline can still use the same sequence to make their UX workflow agile.

Image via zapier.net

Unpack the Project. Google’s Design Sprint starts with a team meeting that includes all relevant individuals from throughout the organization. Designers, sales staff, customer service representatives, marketers, and senior management should all provide input from the beginning.

Because so many people and levels of responsibility are involved, it’s helpful to invite a facilitator to keep discussions on track. Here are some things to cover as you unpack:

  • Present an outline for how a solution will benefit your company.
  • Provide reviews of what competitors are currently offering.
  • Demonstrate both the problem and any partial solutions that already exist.
  • Furnish user personas and analytical data
  • Summarize the proposed solution.
  • Deliver business metrics that support success.

If you aren’t using Google’s process, an agile workflow still starts by setting a vision. Designers provide the team with a starting vision, whether through customer journey mapping or sketches of page-flow.

Sketch Solutions. Everyone who was involved in the unpacking meeting separates to create a pencil and paper sketch of possible solutions. If the problem is complex, participants can break it into pieces and indicate the order in which they should be addressed. Start with a simple framework. Details will be developed as you iterate over time.

Make Decisions. List important factors like your budget, technology constraints, and user input, and then review possible solutions to narrow them down to a limited number. Create storyboards for the top solutions. Use a design wall to display solutions. Reevaluate whether each solution is focused on the user.

Create Prototypes. Groups each take one of the top solutions and get to work. Google suggests building prototypes quickly using Keynote templates or any other tool that allows models to be developed in a day. Develop a testing process for use the next day or the next stage. Invite and incorporate stakeholder contributions at every step.

Test designs. Invite users to interact with your prototype. As they do, record feedback and note what didn’t go as planned. User experience drives the next iteration. UX designers can note friction points and lags in user experience from either back-end performance issues or design flaws.

In the beginning, organizations may need longer than intended to complete some phases. Just like athletes improve with practice, design teams will develop faster sprints with repeated practice.

Whether you model your Agile UX workflow on Google’s model or develop a different pace for your organization, time management is part of what makes the agile process so productive.

Time Tracking and Time Boxing

Just like a runner has a rough estimate of how long it will take them to complete a distance, and uses regular checkpoints to monitor progress, Agile sets estimates and tracks progress through time.

Estimates help teams project how long it will take to deliver a product. At first, it can be difficult to calculate how long a sprint will take, but with practice, the work will develop a predictable rhythm. Track how long it takes to complete individual tasks during a sprint, then combine them to begin developing an average sprint time.

Time boxing involves setting a limited amount of time during which an activity must be completed. Time box UX research, and review meetings and sprints, to maximize efficiency. This forces each team member to immediately reject ideas that won’t work and focus on the ones that show the most promise.

Teamwork Drives Workflow

Just like the design process has many distinct parts that flow together, each team member has a role within the iterative cycle. Designers instinctively picture pages as a whole and set about addressing design tasks as necessary to create the whole, but that means working independently.

Instead, write tasks as individual user stories and involve the team in creating content toward individual goals. Allow the whole to evolve through input from the team.

Designers have the most input during backlog, analysis, development, and testing. When the developer is working through details, that’s a good time to collaborate. Project management tools like Basecamp< and design platforms like UXPin and Invision App can aid communication between web designers and developers.

The iterative design cycle involves designing for individual stories. Each organization goes through a unique process when transitioning to an Agile UX workflow. Be willing to compromise and adjust until your team and your product come together into something even greater than you first envisioned.

Original Article:

10 Pure CSS Call-To-Action Button Sets

Every website and landing page should have a clear call-to-action button. This encourages the user to click and perform an action, whether to make a purchase, start a trial, or sign up for an account.

There is no single best way to design a CTA and you can use many different styles, from large gradients to ghost buttons, and everything inbetween. But other factors like color, size, and position also have an affect on usability.

I’ve hand-picked 10 of my favorite CTA designs, all built with pure CSS. If you’re looking for CTA inspiration, then you’re bound to find something in this collection.

1. Floating Button

Here’s one of the most unique styles I’ve seen and it’s certainly not common on the web. This floating button could become a staple for landing pages that mesh nicely with the design.

It uses a CSS3 drop shadow along with a repeating animation to create the floating effect. This all runs through CSS which makes it even easier to replicate for your own project.

Granted, the hover effect is a bit dull, although the actual button design itself more than makes up for this. Plus you can always expand the hover effect to include other CSS3 animations if you’re willing to push the envelope.

2. Green Circled CTA

You’ll find plenty of CTAs like this on landing pages promoting offers or ebooks. They often use the red hand-drawn circle effect to make it blend into the page and seem more natural to click.

What’s cool about this green CTA button is the hover effect animation. It works on both the button and the red squiggles in the background. Certainly not the effect you’d assume at first glance!

But for a real easy CTA, that’s sure to grab attention, you should try this out. And since the button uses pure CSS you can easily change the color scheme to match any layout.

3. Material Button

If you like working with Google’s material design then you’ll love this unique button set. It’s built in one single style but offers two different triggers: mouse hover and click.

The button snippet uses SCSS/Sass for CSS code, but you can compile it down into CSS right from CodePen. This makes it easier to copy/paste the code for personal use if you’re not a big Sass fan.

The animation effects mimic Google’s design guidelines, so this set is brilliant for any material web project you might be creating.

4. Colorful CTAs

Super small and easy-to-use best describes this button set created by developer Rohan Nair.

The color choices are made to match but you can always change the scheme in CSS. The real eye-catching effect here is the click animation that moves the button “down” into the page.

This gives the illusion of depth and helps each button stand out from other elements on the page.

Again this all uses pure CSS, so it’s a pretty easy button set to copy and customize.

5. Micro Interaction Button

If you want even greater button animation effects take a peek at these microinteraction buttons designed by Phil Hoyt.

They use Font Awesome for the arrow icons mixed with custom CSS animations. While hovering any button, the text label animates out of view and instead displays the icon font prominently.

Depending on your CTA design this may not work as well, especially if you can’t find an icon to represent the button behavior. clearly

Although if you can work this into your site, the hover effect is bound to grab attention.

6. Bordered Buttons

I found these bordered buttons while skimming CodePen and they immediately stood out from the herd.

They don’t inherently feel like CTAs, but with larger text or a larger button size these little designs could dominate a header with ease.

Each button uses the CSS translate() method along with custom background colors to create the border effect. It’s a fairly complicated technique but it’s also the best method considering a plain CSS border wouldn’t animate the same way.

If you like these designs and want to give them a shot, they should run smoothly in every modern web browser.

7. Gradient Styles

Classic gradient buttons will never go out of style and they’re used prominently in larger frameworks like Bootstrap.

With these gradient buttons you can easily update the hover & click animations all while keeping true to the color format. It uses LESS CSS which makes it easier to darken gradient colors using percentages rather than hex codes.

I always like gradient buttons so long as they blend with a layout. And these certainly aren’t the only gradient styles you’ll find so check CodePen if you’re looking for more.

8. YouTube Call to Action

Here’s a rather unique CTA that leads to a YouTube video. It’s a fixed badge in the lower-right corner of the screen and while hovering you can see the video CTA appear on top.

It’s a pretty simple design but it’s not going to be useful on every web page. It can be used to promote deals, new releases, and of course links to other sites like YouTube.

But if you’re looking for a prominent CTA button for your page header, this template won’t help much. Still a very unique idea and certainly worth saving if you could ever use something like this in the future.

9. Flip-Down Buttons

3D animations for the web are easy to create if you know what you’re doing. But even if you don’t understand CSS it’s just as easy to copy 3D code snippets like these flip-down buttons made by Arnie McKinnis.

They’re built on LESS, but you can turn that into plain CSS right inside CodePen. The buttons rely on CSS transforms to create the 3D effect which only appears on mouse hover.

It’s a pretty unique design because the CTA itself is technically “under” the button. Hovering only displays the clickable link underneath making the colorful button more of a fancy shell to grab attention.

But if you like the 3D animated effect, definitely give this a try on your own site.

10. Pure CSS Hovers

Rather than focusing on a unique design or color scheme these pure CSS buttons offer custom hover animations.

They all look similar to typical ghost buttons where you have a border color and no internal color. But while hovering you’ll notice each button’s border style animates into something new.

It’s a tricky effect to get right, and it’s not something you can just pick up and customize without some effort. Although if you know your way around CSS, you should figure it out pretty quickly.

11. Pulsing CTA

If you’re looking to consistently grab attention from visitors then try this pulsing CTA design. It uses a delay via CSS to create a repeating pulse animation with an outer glow.

But if you dive into the CSS code, you can change the pulse animation to be anything you like. It’s pretty versatile, and of course, it should blend in nicely with any design.

Also if you click the “X” icon in the corner you’ll get to see the full animation effect all over again. This loads the button into view along with the window so it even has a cool animation for the first pageload.

Most websites use pure CSS buttons these days so it’s not all that difficult to find one you like and clone the code for a kick-ass CTA.

Original Article:

12 Incredible UX Designer Portfolio Sites

Design portfolios are fairly easy to set up. You can build project grids or add visual case studies to showcase your work, and the quality is immediately visible.

With UX design, it’s a little tougher because it’s often about the process and the results on each project. To craft a great UX portfolio I recommend studying others to get ideas.

This collection is by no means a complete collection of UX designer portfolio sites. But it’s an excellent place to start looking for ideas and studying how other UX designers present their work.

1. Hanna Jung

hanna jung ux designer

Hanna’s portfolio site offers a minimalist style with a primary focus on the work. It uses plenty of visuals to sell projects but it doesn’t feel like “just” a UX portfolio.

The header and tagline clarify exactly what Hanna does, and this is probably the best way to grab attention. If you’re designing a portfolio site for yourself always try to share what you do early, so visitors know what they’re looking at.

Each project photo inside the grid links to an internal page with more info. You can turn this into a detailed photo gallery, a quick synopsis, or even a detailed case study. But offering more info about each project on a separate page is never a bad idea.

2. Adham Dannaway

adham dannaway ux portfolio

Many people know Adham Dannaway’s site because it’s been featured in galleries across the web. And for good reason!

His homepage uses a brilliant graphic illustrating the type of work he does: both design and code.

There’s a significant overlap between UI designers and UX designers, so a lot of freelancers position themselves in this overlap. It makes you more valuable to a client who may want to hire for both skills, or just one knowing both skills worth off each other.

But the real reason Adham’s portfolio works so well is the internal structure of his portfolio project pages. Check out this one as an example. Notice how it reads in a linear fashion and helps sell the work done on that project.

Definitely the best choice for anyone launching a UX portfolio site from scratch.

3. Val Head

val head ux portfolio

Val Head is a well-known designer with a specialty in UI/UX animations along with interaction design. Her portfolio site is a testament to all the work she does.

And you’ll notice the homepage doesn’t use a single image beyond her logo.

The structure immediately grabs your attention whether it’s focused on Val’s newsletter, her speaking engagements, or her recent blog articles. A fantastic design showing how you can sell your UX work without many visuals at all.

4. Paul Lapkin

paul lapkin designer site

Some designers don’t feel comfortable adding their personal photos onto their portfolio. Others like it because it adds personality and gives visitors a chance to see who they are.

Paul Lapkin uses a fullscreen header background portrait that immediately grabs attention. The heading text describes his work as a UI+UX designer along with further details underneath.

This intro text is meant to grab your attention and leave you wanting more. The “view work” link is pretty clear, and if you can write copy that also grabs attention this style might work for you too.

5. Nick Finck

nick finck portfolio

Nick Finck has a much more traditional website with a clear header, navigation, and footer area. Not all modern portfolios look like this but this layout works well and has for years.

One thing I really like on the homepage is the header section with Nick’s photo. This includes two CTAs that encourage you to dig deeper into Nick’s work.

A lot of his portfolio’s essence is in the writing and in his past project work for companies like Adobe and Google. This means it’s less about selling and more about building connections with potential clients.

6. Christina Richardson

christina richardson portfolio

A while back I was browsing through portfolios and found Christina Richardson’s site.

This has always been a favorite of mine for a few reasons. It naturally has a sense of personality, but it doesn’t feel too cluttered or heavily customized. The whole site runs as a single-page design so it’s super easy to navigate too.

But I also really like the UX timeline feature since it’s a visual representation of work experience.

This feels a lot more user-friendly than a boring resume, but it gets the same message across. Very UX-y if I do say so myself.

7. Ionut Zamfir

ionut zamfir portfolio design

Split-page designs work well if you have the right photos. Ionut Zamfir follows this trend brilliantly in his UX design portfolio.

Background images litter each section of the page and you’ll even find a slideshow featuring pics of his work.

It’s definitely a simple website, but sometimes that’s all you need. Some visuals to help sell, information about the designer and a contact form.

8. Kevin M. Hoffman

kevin m hoffman ux portfolio

Other than photos you can also use contrast and colors to grab attention. That’s what you’ll find on Kevin Hoffman’s site which also breaks the page up with horizontal block sections.

Text is pretty easy to read and it doesn’t follow any particular formula. Not to mention the colors don’t exactly match, but they also don’t clash either.

I’d call this an experimental portfolio layout, but it does serve its purpose.

9. Simon Pan

simon pan ux designer

The portfolio site of Simon Pan is one of the best places for case study layouts. You can learn so much just going through his portfolio and reading through his case studies.

With UX design it’s more about selling your knowledge through the process. Clients want to know what you did on a project and how you solved problems for past clients.

Simon’s copywriting is exquisite, and it helps sell his work well. This is one of the best skills you can pick up if you’re pushing towards a case study mentality.

10. Adrian Zumbrunnen

adrian zumbrunnen portfolio site

With a unique combination of minimalism and dynamic effects, this portfolio is certainly eye-catching.

Adrian Zumbrunnen uses a dark + light color scheme that feels typical of many design portfolios.

But he includes other elements like bold CTA buttons, links to video recordings of his talks, and even an illustration of himself. Pretty unique!

11. Ramin Nasibov

ramin nasibov portfolio

Ramin Nasibov follows a typical grid layout that works well on visual designer’s portfolios. This site is real easy to browse and it works nicely on mobile too(along with other grid-style layouts!)

One thing I would like to see on Ramin’s homepage is more info about himself. But he does so much work in the design space that it makes sense to focus solely on the work.

If you’re trying to draw more attention to your work instead of yourself I recommend a grid-style layout just like this.

12. Nishtha Mehrotra

nishtha mehrotra designer portfolio

On Nishtha Mehrotra’s site you’ll find a nice mix of everything. It uses a custom hero header with animations, a visual portfolio grid, and a clean contact section with an email and a phone number.

The site feels incredibly professional, and it has been designed with the user in mind. Single page portfolios are often better if you can fit everything you want to say onto one page.

I also like the resume section which feels a lot easier to browse than a PDF doc. Overall a really clean site, and well worth studying if you’re going for the single-page portfolio look.

Original Article:

10 Outstanding Shopify Themes to Boost Your Store

Shopify is one of the most popular eCommerce service providers, with over 500,000 businesses having used their suite of tools to sell online. One of the main attractions for site owners is the flexibility of Shopify themes. Each theme comes with its own customization settings – great for novices and pros alike. Templates can be changed with the ease of a drag-and-drop UI. But advanced designers can take even more control via custom HTML and CSS, thanks to the Liquid templating language.

What this means is that you aren’t limited to just the same old basic designs – regardless of your skill level. And just as great is the sheer selection of professional themes available. No matter what type of store you run, you’re sure to find a theme that’s a perfect fit.

With that in mind, let’s take a look at 10 of the top themes available for Shopify:

Kodo

Kodo brings the style of high fashion to Shopify. The theme features 11 different home page layouts, with each sporting a classic look that is perfect for high end merchandise.

Product photos are heavily featured to ensure that your products are the focal point. Kodo is compatible with Shopify’s page builder – so customization of the header, footer and body of the theme is simple. You’ll also find lovely mega menus, product quick-views, live search and a sharp look on mobile screens.

Kodo

TechMarket

TechMarket makes wonderful use of every last pixel on large screens – resulting in a fully-immersive experience. 

But don’t worry; it still looks amazing on a phone. Choose from eight home page designs, two landing pages, 10 category layouts and three single-product pages to get just the look you’re after. The theme also includes several custom blocks, product labels for “new” and “sale” items, along with horizontal and vertical mega menus.

TechMarket

Max

Max is a flexible, multi-purpose Shopify theme that includes a dozen home page layouts. They range from designs featuring large promotional images to those that get right down to business with immediate product display.

There are also multiple category and single-product layouts available, as well. A popup or slide-out shopping cart makes for convenient viewing from anywhere on your site. Product quick-views allow customers to browse products without having to leave their current page. Mega menus, a newsletter popup window and product carousel is also included.

Max

Kute Shop

Kute Shop is aimed at supermarket/general retailers and includes some very handy features. A daily deals module allows for creating limited-time promotions, while a variety of different content sliders encourage further exploration of your catalog.

The theme makes use of AJAX with an optimized toolbar and navigation. Plus, it’s easy to customize with Shopify’s drag-and-drop builder. Choose from multiple home, product and category page designs. Overall, Kute Shop is a very well-organized and easy to navigate theme.

Kute Shop

Colora

Colora sports a look that will bring a nature-inspired feel to your online store. Features include AJAX filtered navigation, mega menus, a blog module, product/category slider and a daily deals module.

You’ll also find four home page layouts, a featured products slider, wish list, product quick-views and the ability to display items in a grid or list view. The look is quite attractive and fits well for shops promoting a natural lifestyle. It’s built to take advantage of large photos.

Colora

Mega Shop

Mega Shop works with Shopify’s drag-and-drop builder to let you easily add and move page sections to the desired spot. The theme includes lots of useful features like displaying announcement text, zooming in on images, product quick-views, tabbed content and a newsletter signup form. Also included are sliders for displaying products and brand logos.

Templates for categories and products can easily be customized through the admin. There are six home page layouts to choose from – each with a different specialty. Mega Shop is a clean, convenient and user-friendly package.

Mega Shop

Movic

Movic lets you show off your products in style. Its’ must-have feature is “Lookbooks”, which let shopkeepers put together highly-visual product collections. They consist of a photo with one or more hotspots that, when hovered or touched reveal the related product.

While intended for fashion, it could easily be used for other areas like home décor. You’ll also find six home page designs, multiple header styles, product hover and quick-view, along with AJAX layered navigation. The available looks are very modern and make nice use of subtle effects to create a high-class shop.

Movic

Kids Store

Kids Store focuses on children’s fashion, but could also be repurposed for a variety of kid-related shops. Navigation is really well-thought-out, with great effects and five different mega menu styles included.

Also in the mix is AJAX product filtering, product quick-views, image zooming, a product carousel and a wish list. This theme will certainly brighten up your Shopify store while bringing attention to your products.

Kids Store

Jewellery

Jewellery ups the ante with a very high-end look. The fantastic grid layout on the home page is both functional and attractive. The use of hover effects brings a level of excitement to images.

The theme features multiple mega menu and header styles, AJAX product filtering, a wish list, product quick-view and image zoom. It’s a very nice choice for those looking to appeal to an upscale audience.

Jewellery

Ap Travel Gear

Ap Travel Gear brings big features to any outdoor or travel related shop. Choose from five home page styles – each featuring an attractive full-width slideshow with a variety of clean-cut grid layouts beneath.

Also included are mega menus for easy navigation and product variant color swatches. Other conveniences like product quick-view and AJAX product filtering are also in the box. The theme supports Shopify’s drag-and-drop builder, so customization is easy.

Ap Travel Gear

Sell in Style

Part of the beauty of Shopify is that you don’t need to gather various components in order to create a beautiful, user-friendly and successful store. Simply pick a theme and start building. All the features you need are right there, waiting for you to take advantage.

The themes featured above will help you achieve the look and functionality you’ve always wanted for both desktop and mobile customers. Having those two items crossed off your to-do list means that you can focus on what you do best: Running your store.

You might like: Shopify vs WooCommerce.

Original Article:

Exploring the Latest Trends in Site Navigation

Navigation is the key to a good user experience (UX). Users rely on intuitive digital navigation to locate helpful information, explore a brand’s story, and make purchasing decisions.

Confusing navigation can be enough to make a user bounce or exit. As UX experts learn more about how consumers engage with digital content, the number of ways designers mix and match navigation elements has grown. Choosing the right navigation setup for your mobile and desktop sites can transform your UX and boost business.

Consistency is King

If there is one thing that all navigation experts agree on, it’s the importance of consistency. Navigation needs to be consistent across the site and available on every page.

An inconsistent navigation menu leads to confusion. Users should not have to search for hidden navigation menus or try too hard to find a desired page. No matter what type of navigation setup you choose, you must prioritize consistency. Do this by focusing on a few main aspects:

  1. The menu should be present on every page. Don’t leave users stranded on a page with no way out. The menu should be available on every single page within your website. If menu options have multiple levels, leave breadcrumbs so visitors can see the hierarchy of where they are on the site. Breadcrumbs are particularly important when users find the page through an external source.
  2. Make each menu item react the same way. If the About tab drops down into a list of different choices, so should the other tabs. If one is a link to a landing page, make the others links as well. Each item in the navigation menu should react the same way to a user’s touch (or click).
  3. Elements should be intuitive. There are certain website design elements that users have come to connect with a meaning. Placing an arrow by a menu item, for example, typically means there is a drop-down list that goes with the item. Create elements that help users know what to expect from navigation, and keep them the same throughout your site.

The Nielsen Norman Group states that recognition is easier than recall when it comes to memory. The brain relies on cues to activate the memory and retrieve information.

Make navigation easy for site visitors by allowing them to depend on recognition rather than recall to get around. The more consistent you are, the better visitors will recognize the meaning behind each element on your site. This will lead to faster all-around website browsing – and happier users.

Clear, Concise Labels

The navigation menu is not the place to get clever with your content. Users rely on the menu to make their way around your website. The purpose of the menu is to provide direction. It does not need to entertain or shock site visitors.

Keep menu labels simple, clear, and concise. Most websites use the same one-word labels for a reason. Users are familiar with options like Home, Products, About, Blog, and Contact. They know what the labels mean and what to expect when they choose an option.

Alternatives to the Hamburger Menu

Remember the great hamburger menu debate of 2014 for mobile site design? It’s ongoing, with modern website designers coming down on either side of the issue.

Many mobile websites still use the trusty hamburger, because this is what most mobile users look for. The “hamburger” is the menu icon that consists of three stacked horizontal lines. Designers initially used it because it conserves space on smaller mobile screens. Many designers today are trying alternatives to the hamburger, such as:

  • Tabs
  • Scrollable navigation
  • Bottom navigation
  • “Show More” options
  • Inline list with headers
  • Segmented control

Alternatives to the hamburger menu have had great success on many sites, especially those with a small number of options. The consensus among many designers is that if you can show navigation, show it.

Scrollable Navigation Menu Example

Sometimes this isn’t possible due to smaller mobile screens or several menu options. In these cases, progressive disclosure is acceptable. Your menu choice will depend on the amount of content you need to squeeze in and the goals for the site. An older audience, for example, may appreciate a permanently visible menu rather than the hamburger. Try different styles to see if one increases revenue.

Show More Options Example

Easy-to-Find Search Bars

Designing a functional menu involves more than just clarity and consistency – it’s about maximizing the usability of your site.

The YouTube Search Bar

One feature that can improve usability is the search icon (typically a magnifying glass). If users look for the search bar, they are already lost enough to need a direct search feature. Don’t make matters worse by hiding the search option – or leaving it out altogether.

The New York Times Search Bar

The search bar gives users a way out when they’re lost, or a more direct route to information for users with specific tasks in mind. Taking away the search bar can result in frustrated visitors who decide to look elsewhere instead of scouring your site for what they want.

Put the search bar somewhere clearly visible from every page. Most users look to the top right-hand corner for the search option, or at least somewhere close to the menu.

The Carousel Menu

Carousel menus are becoming more popular on blog-type sites and those that publish regular updates and news stories.

The “carousel” refers to a menu at the top of the page that shows the most recent articles the site has published. Many news sites and blogs use thumbnail images in the carousel to draw the eye and make it easier to select an article.

The Vogue Carousel Menu

The carousel tab also has the title of the article, and/or a brief description of what’s inside. It basically serves as a slideshow with clickable links for users to browse through easily. Carousel menus are great for showing off the latest content, and for keeping users on your site with a range of other interesting articles they may want to read in plain site.

Mega Menus

Another trend sweeping navigation design is the mega menu. As the name implies, this menu is plus-sized, taking up the page vertically and horizontally. These menus became popular among magazine-style blogs, but more brands are using them to make a statement with their menus.

The mega menu is ideal for a site with multiple levels of navigation. Instead of confusing users with a dozen drop-downs, expand the menu across half the page and layout the options clearly, using images and thumbnails if desired.

The mega menu is also great for sites that frequently post articles because the designer can use different columns for recent stories and related links.

Mega Menu Example

Fixed Navigation Bars

The infinite scroll style website became popular thanks to social media and mobile sites. Pioneers like Facebook use the format to allow readers to scroll infinitely, constantly uploading new information every time the user reaches the bottom of the page.

Scrolling is also easy to do with your thumbs, making it ideal for mobile users. With this website style came an issue with navigation – should it stay at the top of the page or somehow remain visible? The answer came with a fixed navigation menu.

Fixed Navigation Example

Fixed navigation menus remain in place when a user scrolls down the page. This type of menu is also called sticky navigation, and appears most common as a top navigation bar.

The menu is always present for the user to change pages. Facebook uses this format to allow users to view their profiles or check notifications in the midst of scrolling through their newsfeeds. The infinite scroll with a fixed navigation bar may be appropriate if your website has a social feel, or if the site deals with a lot of data.

There is no question that a site’s navigation affects the user experience. Will users have a positive experience, or a negative one? Optimizing your navigation setup using the latest trends for mobile and desktop design can lead to a better all-around UX – and better business success. Consider updating your website to include some of the newest site navigation best practices.

Original Article:

10 Free After Effects Templates for Web Designers

As a tool, Adobe After Effects can provide excellent value and resource to web designers. The ways in which it can be used to improve a website are seemingly endless.

Many designers use it to create animated typography, loading graphics, icon transitions, mobile user interface mockups, illustrations, and more.

A major upside to After Effects is its vast library of high-quality templates across the web, many of which are free to download and use as you please.

In this article we are going to round up a handpicked selection of the very best free Adobe After Effects templates for you to use in your next web design project.

Free After Effects Transitions

Transitions Free After Effects Templates Web Design

This stunning selection of transitions by Basti includes a range of effects, perfect for loading animations and presenting content.

Loader After Effects Freebie

Loader Free After Effects Templates Web Design

This simple folding effect is ideal for use as a loader on minimal, clean website designs.

inFullMobile Icons Freebie

inFullMobile Icons Freebie Free After Effects Templates Web Design

These beautifully intricate icons are fully animated to an exceptionally high standard. They are perfect for any landing page or portfolio content section.

Checkbox

Checkbox Free After Effects Templates Web Design

These subtle checkbox animations for After Effects are great for including in presentation mockups and website graphics, as well as tutorials and onboardings.

AE Send Mail

AE Send Mail Free After Effects Templates Web Design

Another exceptional animated illustration, this time by PixFlow. The vibrant colors offer beautiful contrast and the graphic itself would fit excellently at the bottom of almost any website.

Free Touch Indicators

Touch Indicators Free After Effects Templates Web Design

These touch indicators are perfect for including in portfolio user interface mockups, onboarding flows, and tutorials, to help the user visualise how an interface works.

Menu / Close Button

Menu Close Button Free After Effects Templates Web Design

The hamburger to close icon transition is becoming more and more well known and intuitive for users. This free Ae file offers one of the more interesting and creative approaches to such an animation.

Personal Voice Assistant

Personal Voice Assistant Free After Effects Templates Web Design

Housing similar effects to Siri, this voice assistant animation is visually impressive and offers a range of uses including for loading, progress indicators, music playing status, and visual background effects.

Gilbert Free Animated Typeface

Gilbert Free Animated Typeface Free After Effects Templates Web Design

Gilbert is a highly refined and top quality animated typeface. Its animation qualities and colorful design make it perfect for portfolio and landing page hero sections.

Free Tapered Stroke Preset for After Effects

Tapered Stroke Preset Free After Effects Templates Web Design

This tapered stroke preset for Ae is beautiful in combination with a handwritten style font. It would be particularly effective for use where handwriting is present, for example signatures or letter-style sections.

Original Article:

10 Fantastic WordPress Themes for Building Creative Portfolios

Showcasing your design or work with WordPress is easy enough. But to do it well, you need to present your projects in a clear and attractive manner. While some designers go for all-out glitz, the best portfolios are often a bit more subtle.

Still, the ideal portfolio really is a matter of personal preference. It’s a good idea to think about what you want people to learn from your projects. Is an image enough, or do you want an in-depth profile of each project? Maybe you’d prefer a hybrid approach, with specific projects being highlighted with extras while others are just a simple listing. It’s all up to you.

There is a number of exciting WordPress themes out there to help you create your perfect portfolio – no matter which style you opt for. Here are 10 of our favorites for displaying your projects in style. While the main focus will be on their portfolio capabilities, we’ll also mention some other goodies where appropriate.

Büro

Büro features 15 different home page designs with a variety of portfolio layouts to choose from. Standouts include the boxed goodness of the Portfolio Gallery and the tall, thin look of the Carousel.

You’ll also want to check out their Wide, Masonry and Animated Showcase options. The theme also sports lots of customization possibilities, along with copies of Visual Composer and Revolution Slider. This is a great choice for designers looking for a unique portfolio offering.

Büro

Visual Arts

Visual Arts is an image-driven theme that you can use as a vehicle for displaying your work. Choose from several portfolio listing and single item layouts. Listing styles range from long-scrolling pages with full-width images to neat and clean cards.

Single items can consist of image galleries, long text, carousels or a combination approach. There are a number of outstanding hover effects to add that extra bit of flair. Also take advantage of 15 customizable header styles included with the theme.

Visual Arts

Futrus

Futrus makes great use of color, along with a filterable portfolio to ensure that your projects stand out. There are four home page layouts to choose from, including a mesmerizing full screen layered portfolio with custom background images.

The result is a site that enhances your work all the more. The theme is based on Bootstrap and includes a page builder.

Futrus

Eagle

Eagle is a great fit for those who want their portfolio reflect minimal styling.

What you get is an animated, filterable masonry portfolio that includes more information upon hovering. From there, it’s on to a project description page featuring a large image and the opportunity to add text. It’s very basic and allows your outstanding work to do all of the talking. Overall, it’s an understated and professional look.

Eagle

Minikini

Minikini offers a minimal look, but with a more robust set of options. There are five home page layouts to choose from, along with lots of different portfolio looks. You can choose from Card Box, Card Full Wide, Masonry Box and Masonry Full Wide styles.

But you can also customize the amount of columns per row to get things just as you want them. Also included are header/footer variants and compatibility with the free LayersWP page builder.

Minikini

Maestro

Maestro gives you five beautiful portfolio layout styles including Brick Wall, Half Squares, White Canvas, Vertical Slides and Classic Grid. Brick Wall is unique in that it alternates image widths in a two column layout.

The result is a gallery that looks just like its name. You’ll also find lots of customization options, beautiful page transitions and a copy of Visual Composer.

Maestro

Jora

Jora brings a retro artistic flair to your portfolio site. It adds off-kilter frame borders and hover animation to portfolio listing images to create an attention-grabbing effect.

Individual portfolio posts feature bold use of shadows and borders to make photography stand out. This is one of the more unique approaches to a portfolio site you’ll find. Jora is easy to customize, with multiple color schemes available to match your taste.

Jora

Union

Union makes great use of screen real estate, with left-side navigation and plenty of room for images. Several portfolio grid styles are available, along with a full-width slider. Customizable hover effects can bring a splash of color to listings.

Also included are a whopping 12 individual portfolio post styles to choose from. There is quite a bit of flexibility here that will serve designers well. The package includes copies of Visual Composer and Revolution Slider.

Union

Diux

Diux harnesses the power of black and white imagery to add a high end look to your portfolio.

Your images can be automatically displayed in black and white, with a color version appearing upon hover. Special effects and animation add a classy touch and make the site appear lightning-quick. This Bootstrap-based theme also features video backgrounds and isotope filtering.

Diux

Eris

Eris is a portfolio theme that works best when used for a variety of project types.

It also offers some unique layout possibilities. You can use a standard grid portfolio or opt for a “Shuffle” layout that presents images in a more random fashion. Individual portfolio posts can feature one of three layout options. Other features include a “hidden” sidebar and two home page designs.

Eris

It’s Your Showcase

Proudly displaying your best work in an online portfolio is a great way to tell your story in more a visual way. While the themes above provide you with lots of choices, the most important aspect of a portfolio is that it reflects who you are and the quality of your work.

The good news is that, with so many great styles and layouts to choose from, you’re sure to find the perfect fit.

Original Article:

10 Inspirational Examples of Heavy Typography in Web Design

Heavy typography has been a prominent trend throughout 2017. With Apple first setting the initial trend on mobile with the release of iOS 10, web designers have been quick to further develop the direction in new and creative ways. As Apple continues to roll out heavy typography across almost all of their iOS apps, the trend looks set to stay for a while.

The results of heavy, emphatic typography are often visually impressive and can add some exciting and dynamic aspects to a website. In this article, we are going to round up some of the most creative implementations of heavy typography in web design in 2017.

Gregory Maslov

Gregory Maslov

Gregory Maslov’s portfolio employs a large emphatic serif tagline against the vibrant and focused background image.

Havaianas

Havaianas

Havaianas’ playful, summer-themed design uses large heavy typography with emphasized spacing and unique color overlaps against the underlying patterns.

KOTI Sleepover

KOTI Sleepover

KOTI’s simple homepage design is one of the most subtle but effective implementations of heavy typography I have seen. The minimal illustrative style contrasts wonderfully with the large, black emphatic brand type.

Humaan

Humaan

In one of the more unique implementations, Humaan has applied graphical designs to each of the heavy letters spelling ‘digital’. It’s a highly creative approach and has been executed superbly.

Work&Co

Work Co

Work&Co uses excessively large and heavy serif typography to highlight the statistics and data around their company. The switch up of color from black to white is effective throughout in contrasting against the red background.

GHAFARI

GHAFARI

GHAFARI uses beautiful, teal capitlised lettering for their tagline. The text overlaps the image for a semi-brutalist effect and contrasts perfectly against the gold and white color scheme.

Super16

Super16

Super16 fills the entire hero section with their brand name. The heavy and unique typography – which subtracts 90-degree sections of the letters – is supported by a carefully selected series of motion designs in the background.

Huge

Huge

Huge uses a combination of heavy sans serif typography alongside lighter, italic serif typography. It creates an impressive juxtaposition and is particularly effective against the bold pink color that forms the hero section.

Shopify Credit Card Reader

Shopify Credit Card Reader

Shopify uses heavy but subtle typography behind their product photography to highlight the main selling point of their product.

UNFOLD

UNFOLD

Unfold’s new homepage utilises some very heavy typography over the primary hero section. It contrasts beautifully against the busy darkened portfolio collage behind.

Original Article:

5 Services to Create a Responsive Website

Responsive web design has become one of the major web building trends. That’s not surprising as over 70% of web searches are done on different mobile devices today. Users find this option more convenient and time-saving. Thus, if you have made up your mind to launch a website, be sure to make it mobile-optimized to increase traffic, drive new leads and boost your business popularity.

How can that be done effectively? With so many website builders available these days, finding the best one seems to be a challenge for the majority of users. The choice of the most suitable option depends upon your web building skills, expertise, available time, budget, etc.

Whatever option you explore, using a website builder will still remain the simplest and the most convenient solution. These services are specially created with users’ convenience and ease of use in mind. If you are currently interested in this option, then take a look at the review of 5 services that are considered the most successful solution to build responsive websites nowadays.

SITE123

SITE123 is an easy-to-use and simple website builder, which is used for a variety of purposes. It’s possible to build websites for personal and business use here. These include landing pages, blogs, promo websites and even online stores. The latter option will make it possible for you to control and manage your products and online store options, encouraging customers to come back to the website again and again.

SITE123 is also a nice choice to create promo websites and blogs here. Whatever website you are going to build with the system, it will come with responsive design that adds to its functionality.

SITE123 is primarily oriented on business owners and other users, who need quality websites created within a short time interval. The system has the multilingual feature, which makes it possible to create different language versions of a website. This is a real benefit for business websites targeted at foreign markets. The availability of design customization settings, user-friendly interface, no coding need and ease of use make it possible to use the system even for newbies.

It’s worth mentioning that the pricing policy of the service is not the same for all the regions. The costs of plans differ with regard to the location chosen, making the system a more affordable option than other services.

All in all, there are five plans here, including a free one. The latter, however, may be used to test the options of the system only. What you should know is that the service allows creating the unlimited number of websites on one account. Thus, the final cost will depend upon your objectives. The more websites you plan to build – the more expensive plan you’ll have to go for. This is explained by the disk storage space volume and bandwidth limitations implied by them.

SITE123 is a pretty simple, affordable, but powerful cloud websites builder. It comes with a variety of features and options required to build different types of websites, such as landing pages, promo websites, blogs and small eCommerce websites.

The availability of the multilingual tool makes it possible to create different language versions of a website, boosting its popularity with foreign users. It’s possible to build the unlimited number of websites on one account here, so, if you are going to build client websites, then SITE123 is a nice solution for you.

Create a Website with SITE123 →

IM Creator (XPRS)

IM Creator (XPRS) is a drag and drop website builder, which comes with a variety of stylish, appealing templates and basic settings understandable even to a newbie. The service makes it possible to create promo websites, portfolios, landing pages and websites for personal use. It also offers a convenient eCommerce solution, using Shoprocket for this purpose.

IM Creator is an ideal solution for business owners as well as for creatives, who need professional looking and functional websites to showcase their works and services. It works great for fashion designers, photographers, artists, musicians, business owners, etc. The only thing is that having chosen the template, you won’t be able to change it afterwards. So, pick wisely to avoid the need to reload the content.

IM Creator has a great offer for creatives, who don’t know much about website building but still need a quality website to publish their content. They make it possible to use the system for free with a few limitations only. The rest of the features are enough to let a newbie test the system and create a website for personal or business use.

Apart from that, the platform has one premium plan only, which comes with unlimited hosting and bandwidth, 24/7 tech support and other features you might need to get your website running. There is also an advanced “Pro and White Label Plan,” which allows using the website builder under your own brand. All in all, IM Creator is a reasonable investment for creatives and professionals, who need quality and appealing websites for personal or business use.

IM Creator is one of the most stylish and simple website builders available out there. It is easy to use and affordable. It doesn’t require any coding skills to be used by newbies. What’s more, the service is one of the best white labeling solutions available in the market these days. It will be of great help to professional web designers and web studios that have a large client base.

Create a Website with IM Creator (XPRS) →

Mobirise

Mobirise is the only website builder in this review that notably differs from the rest of the services. The thing is that the system is not web-based. To use it, you’ll need to download and install it first, but this is not actually a big problem if you need a quality well-structured website. The service is mainly used to build landing pages and promo websites, but you can also create websites for personal and business use here.

Mobirise is basically meant for newbies, since its use doesn’t imply any coding skills, web design knowledge or experience. The system is so simple that anyone can master it in a few hours only. There are no templates here, which seems surprising and unusual at first sight. You are free to create your own website structure by using free and paid blocks available in the system.

Nothing limits your imagination and creative freedom, making it possible to build unique website structure from scratch.

Speaking about the cost, Mobirise is absolutely free for personal and business use. You’ll just need to pay for hosting and domain name. You may also buy several paid extensions to be further used during the web building process, but this is an optional offer. Even if you don’t purchase them, you won’t find any limitations in the system, so, feel free to experiment and enjoy the web building process to the advantage!

If you are looking for a decent website builder available at affordable cost and offering creative freedom, then Mobirise is that very solution you should go for. The only nuance is that this is the downloadable software, but that’s not a problem for the majority of users, who consider quality a priority.

One of the major benefits of the system is absence of plans and fees. Users have to pay for hosting, domain name and extra extensions only, which is very convenient and appeals to many users.

Download Mobirise for Windows or for Mac.

Ucraft

Ucraft is a cloud website builder, which is primarily used to launch landing pages and different types of business websites, irrespective of the niche specialization. The system is known for ease of use, convenience, excellent designs, affordability and nice customer support.

The website builder comes up to the needs of professional web developers, but it may also be mastered and used by newbies, who don’t have any coding skills and web design experience at all. With Ucraft, you can create multilingual websites with ease, thus contributing to their popularity.

When it comes to the cost of using the system, Ucraft offers three plans. The first one is primarily meant for testing the service, while the second one aims at the needs of web design pros. The plan meant for testing is completely free, but it unveils lots of options needed to build a quality website.

The cost of the plan meant for beginners is not that high as well and constitutes $8 per month only. There is also the 20% discount for an annual subscription. The Lifetime plan offers the same terms as the previous plan. The only difference is that you won’t have to bother with monthly/annual payments. Having paid for the plan once (the cost constitutes $149), you will be able to use it for as long as you need. This is a worthy investment.

Ucraft is a stylish, trendy, functional and easy-to-use website builder. It works great for newbies and web design pros, who aim at creating functional, appealing and professionally-looking websites meant for personal or business use, which are not that large. Availability of quality responsive templates, nice choice of widgets, a set of design customization settings and other features make it possible to create small websites of high quality.

Create a Website with Ucraft →

uKit

uKit is a small business website builder, and this is the fact that speaks for itself. The system is initially geared towards the needs of people looking for the most affordable and quality way to bring their business ideas online. By using this decent service, you will be able to create any small business website, irrespective of the niche you specialize in.

uKit is stylish and user-friendly. It’s really convenient for all users, regardless of their web design experience. A rich collection of responsive templates subdivided into thematic categories, absence of code editing options, abundance of design elements and understandable design customization settings make the system a nice choice for small business owners as well as for people of creative professions willing to showcase their works.

Whether you are a newbie or a web design pro, you’ll find something useful here for projects of any complexity levels.

uKit comes with four pricing plans users may choose from. There is no free plan here, but you are allowed to test any plan for free prior to choosing it. The cost of the plans is more than affordable, considering that the website builder is basically oriented on small businesses. Thus, getting a Premium Plan for $4 per month only seems more than affordable for any business owner. The same is about other plans, because the result is definitely worth the investment.

To sum it up, uKit is a decent small business website builder that is worth the attention of those users, who are going to launch a website for effective business promotion, but haven’t made the final choice yet. The system is easy to use and convenient for newbies and advanced users. It has a rich collection of responsive templates and powerful functionality available at reasonable cost.

Create a Website with uKit →

Bottom Line

Making a website responsive is crucial for any user willing to reach personal or business goals. There are various website builders that make it possible to create functional, appealing and well-structured websites. The services reviewed above are the best of all the available variants.

Each of them comes with its features and aims at achieving different goals. They are oriented on users with versatile web design experience. They differ in cost, functionality, and usability. However, there is one thing that unites these platforms – the ability of each service to create stunning, visually appealing responsive websites, the functionality of which is out of the question.

This article has been sponsored by Syndicate Ads.

Original Article:

10 Free Knowledgebase Themes & Plugins For WordPress Users

WordPress is the perfect system for just about everything. You can use it for a small blog or a company website or yes, even a knowledgebase.

And with the vast array of free resources online you don’t need to build your own theme either. There’s something out there for everything, and this collection proves it!

WP Knowledge Base

kb knowledgebase theme

The incredible WP Knowledge Base theme is one of the oldest and most widely supported themes. It was developed well over 5 years ago and works perfectly with the bbPress community plugin.

Only issue is that this theme hasn’t been officially updated in over two years and you’ll see this message on the main theme page.

The latest release supported WordPress 3.5 and we’re now up to 4.x(and counting!).

But what’s interesting about WordPress is how it supports backward compatibility for most features. This means that a theme developed ten years ago could still run pretty smoothly on a modern WordPress installation.

WP Knowledge Base is by far one of the more detailed themes out there. But it’s also somewhat dated so weigh the pros & cons before using this one.

MyKnowledgeBase

myknowledgebase theme

Here’s a very simple theme without many excessive frills. MyKnowledgeBase is totally free and built for the latest version of WordPress.

It comes with a built-in FAQ module along with simple columns for data organization. This includes homepage widgets, sidebar widgets, and extra menus for getting into multi-tiered links for your site.

MyKnowledgeBase will take some customization to get it looking good, but it’s also one of the few themes with clear knowledgebase features.

WikiWP

wikiwp theme

Wiki-style sites can also make fantastic knowledge bases if you make adjustments to the interface.

One of the best Wiki themes is WikiWP which is also totally free and styled much like Wikipedia. You can choose which links appear in the side menu and how people should navigate the site through search or categories.

The theme is very SEO friendly but can be used as an internal knowledgebase if you want to hide it from search engines.

Really great layout and very relevant for knowledgebases. The biggest factor is if you want to run a wiki for your knowledgebase site.

MyWiki

mywiki theme

Here’s another alternative that’s meant to operate like a wiki but feels more like a knowledgebase center.

MyWiki has a solid 5-star rating across all reviews and thousands of installs. It’s extremely lightweight and features different homepage designs with sections for content categories.

I like this one a lot more than the Wikipedia-styled theme above because this one does work more like an organized knowledgebase.

It’s also easy to setup and perfect for non-technical WordPress users.

WP Knowledgebase

wp knowledgebase plugin

Getting into the plugins side of things we have WP Knowledgebase. This free plugin lets you add custom knowledgebase features into any theme.

Keep in mind this doesn’t have much styling, so you’ll need to position the categories/links accordingly. It helps if you start with a simple theme and build out from there.

Features include predictive search, drag & drop editing, a responsive content design, and a whole bunch more.

DW Knowledge Base

dw knowledgebase plugin

Another competing plugin is DW Knowledge Base created by the folks at DesignWall.

This plugin was built as a premium item but has a freemium version in the WP plugins directory. And the freemium version should be more than enough for a simple knowledgebase website.

It has a full backend panel for knowledgebase articles where you can add, edit, and refine how your content works. These also have their own categories so you can keep them separate from your main website.

Very Simple Knowledge Base

very simple knowledgebase

True to its name is the Very Simple Knowledge Base plugin released for free in the WP plugins directory.

If simplicity is what you’re after, then VSKB has the answer. It uses simple link columns that you can embed anywhere on your site from the sidebar to the footer or even on a single knowledgebase page.

These link lists are divided by category and include “archive” pages for all your knowledgebase articles.

But note the design here is very limited so it helps if you know your way around CSS.

Ultimate FAQ

ultimate faq plugin

While this plugin wasn’t technically designed as a knowledgebase it still functions well as one.

The Ultimate FAQ plugin lets you create unlimited question/answer type posts with custom tags and categories. It also supports an Ajax-powered search feature where topics are auto suggested and link right to the page.

Check out the demo video to learn more about this awesome plugin.

Knowledgebase by WebberZone

knowledgebase webberzone

The greatest strength of this plugin is how it walks the line between complex yet detailed.

The Knowledgebase plugin by WebberZone is totally free and offers a genuinely valuable method of curating content. You can organize questions by categories, and these appear in lists on your page.

KB entries can have sub-entries and Q&A sections within the page too. Plus they appear in WordPress search so you can design an entire site just around this plugin. For the price of free, that’s not half bad!

Knowledge Center

knowledge center webapp

Here’s one of the more advanced plugins offering a bunch of features and a premium alternative too.

Knowledge Center supports pretty much every type of edu-content page you need. FAQs, Wiki pages, knowledgebase pages, and archive category listings for easy browsing.

This does have a costly enterprise version, but I think the free alternative is more than enough for most users.

It comes with a handful of widgets like recent articles, most viewed, and featured items. You can also add custom search parameters and use knowledgebase shortcodes to embed certain articles/category lists anywhere on your site.

Definitely one of the better plugins if you’re looking for tons of features and a detailed management system. Check out their video guide to learn more and see this bad boy in action.

Original Article: