One place for hosting & domains

      How to Start a Fitness Blog (In 6 Steps)


      Fitness is one niche that never seems to go out of style. Of course, that also means it’s a niche that’s full of competition. Whether you’re a fitness enthusiast, personal trainer, or small business owner with a focus on health and wellness, you’ll need to find a way to stand out.

      One of the best ways to do that is by starting a fitness blog. Fortunately, there are tools that can help cut down on the time it takes to reach that goal. Building a dynamic fitness website with WordPress can be a simple process, especially when you start with a fitness-friendly theme and website builder tools created just for WordPress.

      In this article, we’ll explore the ins and outs of starting a fitness blog. We’ll detail what you’ll need to get it off the ground, discuss promoting your new website, and then explain how you can make money blogging. If you’re ready, pull on your swim cap, grab your goggles, and let’s dive into this topic!

      Blog More with Managed WordPress Hosting

      Our automatic updates and strong security defenses take server management off your hands so you can focus on creating great content.

      Why You Might Want to Start Your Own Fitness Blog

      Whether you work full-time in the fitness industry or simply have a related hobby, you likely understand the dedication it takes to stay in top form. Fortunately, it doesn’t take nearly as much effort to turn your fitness routines and weight loss advice into an article for a blog.

      Fitness is big business in the United States. The fitness and gym market has experienced significant gains over the past five years. This growth can be attributed mostly to both increased health consciousness and higher disposable incomes. In short, consumers are looking to spend money with fitness professionals.

      Consequently, it’s not just gyms that have benefited. A digital fitness boom has also opened doors for online fitness content as well.

      An example of a fitness blog.

      Kicking off your own fitness website can help you stay motivated towards your fitness goals. Plus, incorporating your passions into a business or a blog with a loyal audience is an excellent way to establish yourself as an authority in the niche. If you’re a personal trainer, your website can also function as an online portfolio to help you attract and retain clients.

      How to Start a Fitness Blog (In 6 Steps)

      The good news? Becoming a fitness blogger is relatively easy when you have the right tools! Before you start building your site, you might want to clearly establish which niche you’ll focus on, since the fitness industry is pretty diverse.

      The other element to consider before moving forward is how you’ll name your site. One of the best ways to stand out is with a memorable domain name. While choosing a .com is pretty standard, there are quite a few new Top-Level Domains (TLDs) available that might be just right for your fitness-related site.

      With those basics out of the way, you’re ready to start building your blog!

      1. Decide Which Blogging Platform to Use

      Here at DreamHost, we aren’t shy about our affection for WordPress.

      The Meet WordPress page.

      As a Content Management System (CMS), it’s the top choice for 35% of the internet. Since WordPress is so popular, one of its benefits is a robust and supportive community of users who are willing to help you out.

      Another reason we like WordPress is that it’s easy to get started with. You can get up and blogging with WordPress in one click, depending on the host you choose.

      2. Choose a Quality Hosting Service

      Choosing a hosting provider for your fitness website might seem overwhelming at first. However, there are a few things to keep in mind as you shop that should help. A key deciding factor will be whether you plan on scaling up an e-commerce website or if you intend to keep things simple and focus just on blogging.

      Regardless of your strategy, there are some significant features you’ll want to keep in mind when researching a host. These include:

      • Security. You’ll want to thoroughly review what your web host offers in terms of protection from viruses and hacks. Look for information about security certificates, daily backups, and the process for restoring a damaged site.
      • Software. Not all hosts are created equal. If you need more software to help you on your way, make sure your host has what you want. Are there optimization features or software options that will boost your site’s speed?
      • Support. Being able to get in touch with technical support night or day might be a vital feature for you to have. If your fitness website really can’t afford any downtime, getting a full understanding of the support that comes with your hosting plan is essential.
      • Extras. If you’re really on the fence about what host to go with, check whether it has any extra features that can help you decide. Some hosts come with built-in themes, design tools, staging sites, or site builders.

      No matter what type of hosting you ultimately decide you need, here at DreamHost we offer a wide range of WordPress plans.

      WordPress hosting at DreamHost.

      Once you’ve decided on a host, you’ll just need to purchase a domain name and select a hosting package (note that some hosting plans include a free domain with purchase). If you’re starting out with a simple personal blog, shared hosting should give you what you need. You can always upgrade your plan if you need to later on.

      3. Pick a Fitness-Friendly Theme

      As we mentioned earlier, the fitness industry is booming. With that in mind, you’ll need to pay extra attention to your website’s theme so you can stand out in the crowded marketplace. Choosing a fitness-friendly theme for your WordPress site is an excellent place to start.

      Fortunately, if you’re using DreamHost as your WordPress hosting service, you’ll have access to our exciting new site builder from BoldGrid which includes a drag-and-drop page editor along with many customizable themes designed specifically for fitness. Plus, setting up a theme with DreamHost is a snap!

      To get started, you’ll need to select “WP Website Builder” as an option during checkout of your DreamHost plan purchase. Then, we’ll automatically install WordPress and premium website builder plugins for WordPress — Inspirations and Page & Post Builder — built by our friends at BoldGrid. Once you’re logged into WordPress, you’ll see the Inspriations setup page.

      Once you’re ready, select the Let’s Get Started! button.

      Setting up your site.

      On the next screen, you’ll see lots of theme categories to choose from. Inspirations features 20 diverse and inspiring fitness themes. Once you pick your favorite, you’ll be walked through finalizing its setup.

      Another bonus is that you’ll be able to easily test the responsiveness of your layouts on three different screen types, right from the dashboard.

      Various design themes.

      If you need more help with getting started, your WordPress dashboard will now include some tutorial videos. Plus, you’ll find a new Inspirations menu that will lead you through switching to a different theme, in case you change your mind later on.

      4. Create Heart-Pumping Content

      Now that you’ve caught the eye of your health-conscious audience with an alluring theme, you should consider some ways to fill your site with intriguing content. When it comes to human health and performance, you’ll never have trouble finding a topic for your next article. One method for getting started is by installing some fitness-minded plugins.

      If your fitness blog is going to feature recipes, for example, you might want to take a look at the Meal Planner Pro Recipes plugin. This feature-packed tool is designed to increase traffic, page views, and revenue. Plus, it’s free and optimized for search engines.

      The Meal Planner Pro Recipes plugin.

      Another useful solution if you’re planning to offer personal training or group fitness classes is the Ultimate Appointment Scheduling plugin. The beauty of this fitness scheduling tool is that you can create different locations, as well as one-to-one or one-to-many services. It’s also set up to accept payments via PayPal.

      The Ultimate Appointment Scheduling plugin.

      We already discussed BoldGrid themes and their drag-and-drop design functionality. However, it’s worth mentioning again how page builder plugins can take your design to the next level. It’s a good practice to do a quick compatibility check between your theme and plugins. Once you’ve done that, you can get right to work on designing your site.

      5. Explore How to Monetize Your Fitness Blog

      Once your fitness blog is ready to go, you might also want to consider various ways to promote or even monetize it. For example, you can drive traffic to your site through cross-promotions. If you have products you can’t live without in your fitness routine, reach out to the companies that produce them and see if they have an affiliate marketing program to generate passive income.

      Ultimately, the key to monetization is creating really good content. Once you’ve established yourself as the source for information in your niche area, you can explore offering premium content for a small fee. For example, if you’re a personal trainer, you could create your own weekly workout guides and tips, menu plans, or other wellness content to sell on your site.

      Hosting contests, selling branded merchandise, or offering fee-based classes are all excellent ideas that could help you make money blogging.

      6. Share Your Posts to Promote Your Website

      Sharing a post-workout smoothie recipe on your blog might now be a breeze. However, mastering the maze of social media promotion might still be on your ‘to-do’ list.

      Social media can help you swap ideas with like-minded people and promote your fitness blog. There are a few key tips to keep in mind, including:

      • Links. Strategically structured links can drive traffic from any social platform.
      • Scheduling. A tool such as Hootsuite can save you time when it comes to social media. Your readers will also know when to expect new content.
      • Automation. Content can be scheduled through plugins such as Jetpack’s Publicize module to publish to other platforms. This can help increase your audience reach.

      Keeping up with trends and social media platforms can be a workout in itself. Once you set up a process for your own site sharing, however, it can be rewarding and fun.

      Starting a Fitness Blog

      It takes a lot of dedication to train yourself or others to accomplish feats of physical fitness. However, building your own health or fitness blog shouldn’t be that hard. Here at DreamHost, we want to see you succeed at blogging, which is why we’ve partnered with BoldGrid to bring you amazing features to help you get your fitness blog live as quickly as possible.

      WordPress is our favorite training partner here at DreamHost. You’ll get a performance-enhancing boost from our WordPress hosting plans, which are now equipped with premium website builder tools that make WordPress easier than ever!



      Source link

      Recommended Steps For New FreeBSD 12.0 Servers


      Introduction

      When setting up a new FreeBSD server, there are a number of optional steps you can take to get your server into a more production-friendly state. In this guide, we will cover some of the most common examples.

      We will set up a simple, easy-to-configure firewall that denies most traffic. We will also make sure that your server’s time zone accurately reflects its location. We will set up NTP polling in order to keep the server’s time accurate and, finally, demonstrate how to add some extra swap space to your server.

      Before you get started with this guide, you should log in and configure your shell environment the way you’d like it. You can find out how to do this by following this guide.

      How To Configure a Simple IPFW Firewall

      The first task is setting up a simple firewall to secure your server.

      FreeBSD supports and includes three separate firewalls. These are called pf, ipfw, and ipfilter. In this guide, we will be using ipfw as our firewall. ipfw is a secure, stateful firewall written and maintained as part of FreeBSD.

      Configuring the Basic Firewall

      Almost all of your configuration will take place in the /etc/rc.conf file. To modify the configuration you’ll use the sysrc command, which allows users to change configuration in /etc/rc.conf in a safe manner. Inside this file you’ll add a number of different lines to enable and control how the ipfw firewall will function. You’ll start with the essential rules; run the following command to begin:

      • sudo sysrc firewall_enable="YES"

      Each time you run sysrc to modify your configuration, you’ll receive output showing the changes:

      Output

      firewall_enable: NO -> YES

      As you may expect, this first command enables the ipfw firewall, starting it automatically at boot and allowing it to be started with the usual service commands.

      Now run the following:

      • sudo sysrc firewall_quiet="YES"

      This tells ipfw not to output anything to standard out when it performs certain actions. This might seem like a matter of preference, but it actually affects the functionality of the firewall.

      Two factors combine to make this an important option. The first is that the firewall configuration script is executed in the current shell environment, not as a background task. The second is that when the ipfw command reads a configuration script without the "quiet" flag, it reads and outputs each line, in turn, to standard out. When it outputs a line, it immediately executes the associated action.

      Most firewall configuration files flush the current rules at the top of the script in order to start with a clean slate. If the ipfw firewall comes across a line like this without the quiet flag, it will immediately flush all rules and revert to its default policy, which is usually to deny all connections. If you’re configuring the firewall over SSH, this would drop the connection, close the current shell session, and none of the rules that follow would be processed, effectively locking you out of the server. The quiet flag allows the firewall to process the rules as a set instead of implementing each one individually.

      After these two lines, you can begin configuring the firewall’s behavior. Now select "workstation" as the type of firewall you’ll configure:

      • sudo sysrc firewall_type="workstation"

      This sets the firewall to protect the server from which you’re configuring the firewall using stateful rules. A stateful firewall monitors the state of network connections over time and stores information about these connections in memory for a short time. As a result, not only can rules be defined on what connections the firewall should allow, but a stateful firewall can also use the data it has learned about previous connections to evaluate which connections can be made.

      The /etc/rc.conf file also allows you to customize the services you want clients to be able to access by using the firewall_myservices and firewall_allowservices options.

      Run the following command to open ports that should be accessible on your server, such as port 22 for your SSH connection and port 80 for a conventional HTTP web server. If you use SSL on your web server, make sure to add port 443:

      • sudo sysrc firewall_myservices="22/tcp 80/tcp 443/tcp"

      The firewall_myservices option is set to a list of TCP ports or services, separated by spaces, that should be accessible on your server.

      Note: You could also use services by name. The services that FreeBSD knows by name are listed in the /etc/services file. For instance, you could change the previous command to something like this:

      • firewall_myservices="ssh http https"

      This would have the same results.

      The firewall_allowservices option lists items that should be allowed to access the provided services. Therefore it allows you to limit access to your exposed services (from firewall_myservices) to particular machines or network ranges. For example, this could be useful if you want a machine to host web content for an internal company network. The keyword "any" means that any IPs can access these services, making them completely public:

      • sudo sysrc firewall_allowservices="any"

      The firewall_logdeny option tells ipfw to log all connection attempts that are denied to a file located at /var/log/security. Run the following command to set this:

      • sudo sysrc firewall_logdeny="YES"

      To check on the changes you’ve made to the firewall configuration, run the following command:

      • grep 'firewall' /etc/rc.conf

      This portion of the /etc/rc.conf file will look like this:

      Output

      firewall_enable="YES" firewall_quiet="YES" firewall_type="workstation" firewall_myservices="22 80 443" firewall_allowservices="any" firewall_logdeny="YES"

      Remember to adjust the firewall_myservices option to reference the services you wish to expose to clients.

      Allowing UDP Connections (Optional)

      The ports and services listed in the firewall_myservices option in the /etc/rc.conf file allow access for TCP connections. If you have services that you wish to expose that use UDP, you need to edit the /etc/rc.firewall file:

      You configured your firewall to use the "workstation" firewall type, so look for a section that looks like this:

      /etc/rc.firewall

      . . .
      
      [Ww][Oo][Rr][Kk][Ss][Tt][Aa][Tt][Ii][Oo][Nn])
      
      . . .
      

      There is a section within this block that is dedicated to processing the firewall_allowservices and firewall_myservices values that you set. It will look like this:

      /etc/rc.firewall

      for i in ${firewall_allowservices} ; do
        for j in ${firewall_myservices} ; do
          ${fwcmd} add pass tcp from $i to me $j
        done
      done
      

      After this section, you can add any services or ports that should accept UDP packets by adding lines like this:

      ${fwcmd} add pass udp from any to me port_num
      

      In vi, press i to switch to INSERT mode and add your content, then save and close the file by pressing ESC, typing :wq, and pressing ENTER. In the previous example, you can leave the "any" keyword if the connection should be allowed for all clients or change it to a specific IP address or network range. The port_num should be replaced by the port number or service name you wish to allow UDP access to. For example, if you're running a DNS server, you may wish to have a line that looks something like this:

      for i in ${firewall_allowservices} ; do
        for j in ${firewall_myservices} ; do
          ${fwcmd} add pass tcp from $i to me $j
        done
      done
      
      ${fwcmd} add pass udp from 192.168.2.0/24 to me 53
      

      This will allow any client from within the 192.168.2.0/24 network range to access a DNS server operating on the standard port 53. Note that in this example you would also want to open this port up for TCP connections as that is used by DNS servers for longer replies.

      Save and close the file when you are finished.

      Starting the Firewall

      When you are finished with your configuration, you can start the firewall by typing:

      The firewall will start correctly, blocking unwanted traffic while adhering to your allowed services and ports. This firewall will start automatically at every boot.

      You also want to configure a limit on how many denials per IP address you'll log. This will prevent your logs from filling up from a single, persistent user. You can do this in the /etc/sysctl.conf file:

      At the bottom of the file, you can limit your logging to "5" by adding the following line:

      /etc/sysctl.conf

      ...
      net.inet.ip.fw.verbose_limit=5
      

      Save and close the file when you are finished. This will configure that setting on the next boot.

      To implement this same behavior for your currently active session without restarting, you can use the sysctl command itself, like this:

      • sudo sysctl net.inet.ip.fw.verbose_limit=5

      This should immediately implement the limit for this boot.

      How To Set the Time Zone for Your Server

      It is a good idea to correctly set the time zone for your server. This is an important step for when you configure NTP time synchronization in the next section.

      FreeBSD comes with a menu-based tool called tzsetup for configuring time zones. To set the time zone for your server, call this command with sudo privileges:

      First, you will be asked to select the region of the world your server is located in:

      FreeBSD region of the world

      You will need to choose a sub-region or country next:

      FreeBSD country

      Note: To navigate these menus, you'll need to use the PAGE UP and PAGE DOWN keys. If you do not have these on your keyboard, you can use FN + DOWN or FN + UP.

      Finally, select the specific time zone that is appropriate for your server:

      FreeBSD time zone

      Confirm the time zone selection that is presented based on your choices.

      At this point, your server's time zone should match the selections you made.

      How To Configure NTP to Keep Accurate Time

      Now that you have the time zone configured on your server, you can set up NTP, or Network Time Protocol. This will help keep your server's time in sync with others throughout the world. This is important for time-sensitive client-server interactions as well as accurate logging.

      Again, you can enable the NTP service on your server by adjusting the /etc/rc.conf file. Run the following command to add the line ntpd_enable="YES" to the file:

      • sudo sysrc ntpd_enable="YES"

      You also need to add a second line that will sync the time on your machine with the remote NTP servers at boot. This is necessary because it allows your server to exceed the normal drift limit on initialization. Your server will likely be outside of the drift limit at boot because your time zone will be applied prior to the NTP daemon starting, which will offset your system time:

      • sudo sysrc ntpd_sync_on_start="YES"

      If you did not have this line, your NTP daemon would fail when started due to the timezone settings that skew your system time prior in the boot process.

      You can start your ntpd service by typing:

      This will maintain your server's time by synchronizing with the NTP servers listed in /etc/ntp.conf.

      On FreeBSD servers configured on DigitalOcean, 1 Gigabyte of swap space is automatically configured regardless of the size of your server. You can see this by typing:

      It should show something like this:

      Output

      Device 1G-blocks Used Avail Capacity /dev/gpt/swapfs 1 0 1 0%

      Some users and applications may need more swap space than this. This is accomplished by adding a swap file.

      The first thing you need to do is to allocate a chunk of the filesystem for the file you want to use for swap. You'll use the truncate command, which can quickly allocate space on the fly.

      We'll put the swapfile in /swapfile for this tutorial but you can put the file anywhere you wish, like /var/swapfile for example. This file will provide an additional 1 Gigabyte of swap space. You can adjust this number by modifying the value given to the -s option:

      • sudo truncate -s 1G /swapfile

      After you allocate the space, you need to lock down access to the file. Normal users should not have any access to the file:

      • sudo chmod 0600 /swapfile

      Next, associate a pseudo-device with your file and configure it to mount at boot by typing:

      • echo "md99 none swap sw,file=/swapfile,late 0 0" | sudo tee -a /etc/fstab

      This command adds a line that looks like this to the /etc/fstab file:

      md99 none swap sw,file=/swapfile,late 0 0
      

      After the line is added to your /etc/fstab file, you can activate the swap file for the session by typing:

      You can verify that the swap file is now working by using the swapinfo command again:

      You should see the additional device (/dev/md99) associated with your swap file:

      Output

      Device 1G-blocks Used Avail Capacity /dev/gpt/swapfs 1 0 1 0% /dev/md99 1 0 1 0% Total 2 0 2 0%

      This swap file will be mounted automatically at each boot.

      Conclusion

      The steps outlined in this guide can be used to bring your FreeBSD server into a more production-ready state. By configuring basic essentials like a firewall, NTP synchronization, and appropriate swap space, your server can be used as a good base for future installations and services.



      Source link

      How to Wireframe a Website (In 6 Steps)


      If you’re in the process of creating a website, either for yourself or a client, you’re likely concerned about User Experience (UX). After all, your site won’t be very successful if visitors can’t figure out how to navigate it and find the information they need.

      Fortunately, there’s a handy strategy you can use to work on improving UX before your site ever hits the web. By using a wireframe, you can test drive user flows and page layouts, so you know exactly how they’ll work on your live website.

      In this post, we’ll discuss what wireframes are and why they’re essential in web design. Then we’ll share six steps to help you create mockups for your own site. Let’s get started!

      Professional Website Design Made Easy

      Make your site stand out with a professional design from our partners at RipeConcepts. Packages start at $299.

      An Introduction to Wireframes (And Why They’re Useful)

      A wireframe is like a UX blueprint for your website. It maps out certain features of your site, such as menus, buttons, and layouts, while stripping away the visual design. This gives you an idea of your site’s underlying functionality and navigation, without distracting elements such as its color scheme and content.

      An example of a wireframe.

      The purpose of a wireframe is to maximize a site’s UX potential before it’s even available to visitors. By creating mockups of your site’s UX on paper or with a digital wireframing tool, you can troubleshoot issues before they become a problem for your users. This can save you time and money down the line.

      Whether you’re planning a small one-page site, a huge company portal, or something in between, wireframing can be a beneficial part of the planning process. Unless you’re reusing a tried-and-true template with a UX design you’re confident in, wireframing could provide significant benefits to your site.

      After all, effective UX design focuses on getting your site’s key functionality just right. Without a design that supports a strong, positive UX, you run the risk of higher bounce rates and lower conversion rates. A wireframe will not only smooth out your creative process; it could also help promote your site’s overall success.

      How to Wireframe a Website (In 6 Steps)

      Creating a wireframe can become a time-consuming process, especially if things don’t go well during the testing stage. However, taking the time to iron out UX issues ahead of time will give your site a much better chance of success down the line. The six steps listed below will help you get started.

      Step 1: Gather the Tools for Wireframing

      There are two main methods for creating wireframes — by hand or digitally. If you’re going with the former option, all you’ll need is a pen and paper to get started. Some designers begin with a ‘low-fidelity’ paper wireframe for brainstorming and then create a ‘high-fidelity’ digital version later.

      As far as digital options go, there are a wide variety of wireframe tools available. If this is your first wireframe, or if you’re a single Do It Yourself (DIY) site owner and not a designer, you might try a free tool such as Wireframe.cc.

      The Wireframe.cc tool.

      This simple wireframing tool keeps your drafts from becoming cluttered by limiting your color palette. You can create easy designs with its drag-and-drop interface, and annotate your drafts so that you don’t forget important information.

      Another option is Wirify, a bookmarklet that you can add to your browser.

      The Wirify bookmarklet.

      This tool’s interface turns existing web pages into wireframes. Rather than helping you draft UX design for a new site, it’s most helpful for website redesigns.

      If you’re willing to spend a little money, on the other hand, you might look into Balsamiq mockups.

      The Balsamiq wireframing platform.

      It boasts an easy-to-use, collaborative wireframing interface that’s great for teams and professionals who need real-time collaboration. However, it is limited to static wireframing. If you’d like a more comprehensive tool that can also be used for prototyping (which we’ll discuss later in this post), you might try out Prott.

      Step 2: Do Your Target User and UX Design Research

      Before you start drafting your wireframe, it’s helpful to do some research. For starters, you’ll want to know who your target audience is. This can help you determine which features need to be most prominent on your site so that visitors can find what they need.

      User personas can be a helpful design tool for this part of the process. Try creating some for your potential user groups, so you have a reference you can return to throughout the wireframe design process. Personas can also help create a marketing strategy later on, so hang on to them.

      It’s also wise to research some UX design trends and best practices. This can provide insight into elements such as menu layouts, the positioning of your logo and other significant branding elements, and content layouts. Users find it easier to navigate a website that follows convention when it comes to these features.

      Step 3: Determine Your Optimal User Flows

      A ‘user flow’ refers to the path a visitor takes to complete a specific goal on your website. So for example, if you have an e-commerce site, one user flow might be from a product page to the end of the checkout process.

      Determining the key tasks users will need to complete on your site can help you create the most straightforward user flow for each potential goal. This will help maximize UX by making your website easy and enjoyable to use.

      That said, it can be hard to get into the mind of a hypothetical user. Asking yourself these questions can help when you’re trying to work out your primary user flows:

      • What problems do you intend to solve for users? What goals might they be hoping to achieve by coming to your site?
      • How can you organize your content (such as buttons, links, and menus) to support those goals?
      • What should users see first when they arrive on your site, which can help orient them and let them know they’re in the right place?
      • What are the user expectations for a site like yours?
      • What Call to Action (CTA) buttons will you provide, and where can you place them so users will notice?

      Each of these answers will suggest something vital about the way you’ll need to design your pages.

      Step 4: Start Drafting Your Wireframe

      Now that you’ve gathered your tools and key information for your wireframe, you can start drafting. Keep in mind that the purpose of this task is not to create a complete design for your website. You’re focusing solely on UX, and how you can create a page that is easy to navigate and understand.

      To that end, your wireframe should include features and formats that are important to how your users will interact with and make use of your website. These might include:

      • A layout noting where you’ll place any images, branding elements, written content, and video players
      • Your navigation menu, including a list of each item it will include and the order in which they will appear
      • Any links and buttons present on the page
      • Footer content, such as your contact information and social media links

      Your answers to the questions in the previous step will likely help with this stage of the process as well. Remember to consider web design conventions, user expectations, and information hierarchies when placing these elements on your page.

      There are also several elements that aren’t appropriate for a wireframe. Visual design features, such as your color scheme, typography, and any decorative displays, should be left off of your wireframe. In fact, it’s best to keep your wireframe in grayscale so that you can focus on usability.

      You also don’t need to insert images, videos, written content, or your actual brand elements such as your logo and tagline. Placeholders for these features will get the job done. The idea is to avoid incorporating anything that could provide a distraction from user flows and navigation elements that are fundamental to UX.

      Be Awesome on the Internet

      Join our monthly newsletter for tips and tricks to build your dream website!

      Step 5: Perform Usability Testing to Try Out Your Design

      Once you have your initial wireframe completed, you’ll need to carry out some testing. This will help you determine if it has accomplished its goal of mapping out the simplest and most natural user flows and UX for your site. There are several ways to go about this.

      If you’re working with a team, your first round of testing will probably take place internally. Each team member should spend some time with the wireframe to see if it makes sense. Have everyone work independently so as not to influence one another, and take notes on any issues they run into.

      However, there are also tools that can provide more objective usability testing for your wireframe. These tests are meant to imitate actual users, which can be particularly helpful. Just because your team of web designers finds your wireframe logical doesn’t mean that the average site user will.

      UsabilityHub is a platform that connects designs with real users to give you feedback on how the average visitor perceives your wireframe.

      The UsabilityHub home page.

      It offers a free plan so that even small sites and non-designers can put this tool to good use. For professional designers and teams, there are also plans that provide advanced features to help with more extensive and in-depth testing.

      Step 6: Turn Your Wireframe Into a Prototype

      After your wireframe has undergone testing, and you’ve determined the best possible UX design for your site, it’s time to turn it into a prototype. Unlike wireframes, which are static, prototypes include some basic functionality so that you can test out user flows more realistically.

      As we mentioned in the first step, it can be helpful to choose a platform that can turn your wireframe into a prototype. Prott, for instance, enables you to create interactive, high-fidelity prototypes from your wireframe.

      The Prott wireframing prototyping platform.

      However, if you prefer a different wireframing tool, some platforms focus specifically on prototyping. InVision is a high-quality platform that makes it easy for teams to work together and communicate about mockups.

      The InVision prototyping platform.

      Whichever tool you choose, you’ll want to put your prototype through another round of user testing once it’s complete. After your prototype has passed, you can get to building your actual site with the confidence that your UX will be top-notch right from your launch date.

      Making Wireframes to Improve UX

      When it comes to designing a website, solid UX is crucial if you want to set your project up for success. Wireframing your website before you start building pages can help you get UX right before you’ve even launched your site.

      After you’ve finished designing your site, you’ll need a hosting plan that can keep up with your stellar UX. At DreamHost, we provide high-quality shared hosting plans that won’t let your users down. Check them out today!



      Source link