Randy A Brown

Author: Randy A Brown

  • Web Design Trends 2017 – Virtual Reality Integration

    Web Design Trends 2017 – Virtual Reality Integration

    Reading Time: 2 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.5)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    If you think about it, the web is actually a 2D alternate reality. The next obvious step is to shape it into a 3D virtual reality. VR headsets for smartphones are becoming popular, and both desktops and mobile devices have ways of displaying VR. It makes sense when you consider the advantages. For example, you could stand in a room you’re considering renting or buying, stand on a vacation spot to help make your decision of where to spend your vacation time, view a product and see it from all angles without having to be in the store, and so much more.

    Here are some of the popular ways that VR is being incorporated into WordPress.

    Google VR view

    Google VR view is becoming popular and incorporating VR features into WordPress and apps. It let’s you embed 360 degree VR media for desktop and mobile devices. It supports mono and stereo images. Images can be stored as JPG, PNG, or GIF. Video can be stored as MP4.

    Plugins

    It’s still in its infancy but currently the easiest way to incorporate VR into your WordPress designs is by using a plugin. Here’s a look at a few plugins to add VR to your WordPress website.

    WP-VR View

    WP-VR-view is a free plugin in the WordPress depository that lets you add a photo sphere and 360 degree video to your WordPress website to create 3D panoramas that readers can navigate through. It includes lots of shortcodes for videos, images, preview, width and height, and stereo. It works in web browsers and on mobile devices including Google’s Cardboard.

    Web VR Shop

    Web VR Shop is a premium WordPress plugin for WooCommerce that allows you to add 3D models to your shop. Upload your 3D model and then scale, position, rotate, and change the background color with easy to use sliders to create a VR product gallery. It includes multiple 3D extensions. It works on desktop, mobile, Rift, Cardboard, and Vive.

    Let’s Discuss

    • Do you use VR on your website?
    • What’s your favorite way to incorporate VR into WordPress?
    • What’s your favorite use of VR?

    Let us know what you think in the comments. Thanks for reading and please subscribe if you haven’t already.

    Featured image by Samuel Zeller

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

  • WordPress Design Trends 2017 – Improved Micro-interactions

    WordPress Design Trends 2017 – Improved Micro-interactions

    Reading Time: 2 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.5)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    Micro-interactions are small animations and effects to indicate when an event is happening. They’re great for showing that something is clickable and for indicating that the user’s actions were recognized. I personally hate it when I hover over something and it doesn’t show me that I can click on it and then when I do it doesn’t show me that it took the click. Micro-interactions greatly improve the usability of a website and they’re becoming even more popular.

    An example in the real world include the tiny vibration you feel when you click on a button on your smart-phone. You know that it took your click because of that vibration. You’ll also see an animation on the button itself such as the button changing color or becoming larger and then shrinking back to normal.

    An example in the virtual world would be hovering your mouse over a menu item on a website you’ll see an effect that indicates the post is clickable. A good example is the menu of Web Design Depot.

    These micro-interactions are useful for:

    • buttons
    • menus
    • status
    • changes
    • call to action
    • messages as the result of an action
    • visual input
    • typing indication
    • feedback
    • toggling something on or off
    • etc.

    CSS Animation

    Hover Effects Builder – WordPress Plugin

    You can tell from the image above what is being clicked by its hover animation.

    Most of these micro-interactions are in the form of CSS animation and can be created with CSS tools or with plugins. Here are a few resources to help you create them:

    Use as many as you can but keep them simple, consistent, and easy to understand.

    Let’s Discuss

    • Do you use micro-interactions?
    • What are your favorite micro-interactions?
    • What are your favorite tools for creating them?

    Let us know what you think about micro-interactions in the comments below. Thanks for reading and please subscribe if you haven’t already. 

    Featured image by Samson Vowles

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

  • WordPress Design Trends 2017 – Gradients

    WordPress Design Trends 2017 – Gradients

    Reading Time: 2 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.5)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    Where we used to see solid-colored backgrounds, now we’re seeing a lot of backgrounds with gradients. A gradient is a smooth transition from one color to another. Most background gradients transition between two colors, but it’s possible to transition between multiple colors and include features such as animated transitions.

    image from colorful gradients

    Gradients can be created as image files or with CSS. A well-designed gradient can make the web pages more colorful and interesting while still loading fast. Gradients are not limited to backgrounds. They can include images with overlays, backgrounds, logos, headers, buttons, backgrounds for forms, etc.

    The image above can be accomplished with a plugin such as this premium plugin for Divi called Fullwidth Header Extended. It adds a CSS gradient to the custom header and includes particle animation, multiple color gradients, and gradient animation. It even adds dynamic text effects, icon animations, image effects, and other background effects. It also includes a sub-header that can be placed above or below the header title. I consider this a must-have plugin for every Divi user.

    Online Tools to Create Gradients

    Gradients can be created with graphics software such as Photoshop, Gimp, Sketch, PaintShop Pro, and Paint.NET. There are also lots of online tools that will create gradients for you based on colors you choose. Some have more features than others but they’re free to use. Some have pre-made gradients that you can save and reuse. A few include CSS tutorials. Just be sure to compress them. I like TinyPNG.

    Here are some good tools for downloading or creating your own gradients:

    Let’s Discuss

    • Do you use gradients?
    • What’s your favorite tools to create gradients?
    • Do you prefer to download pre-made gradients?

    Let us know in the comments. Thanks for reading and please subscribe if you haven’t already. 

    Featured image from James Douglas

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

  • Web Design Trends 2017 – Better Use of Parallax

    Web Design Trends 2017 – Better Use of Parallax

    Reading Time: 2 minutes

    Parallax is one of those design elements that can be difficult to get right, but it works great if you do. Often parallax is overdone or used as a gimmick. There’s sometimes so much of it that it doesn’t stand out anymore (I’m guilty of this myself). Too much parallax can become annoying and it loses its intrigue.

    Use Parallax Sparingly

    I’m starting to see parallax used more sparingly and with a greater effect. For example, rather than parallax just for the sake of parallax, I’ve seen it used where it creates an interaction between image layers such as a person in the background moving independently of objects in the foreground, making them seem to interact.

    Another good choice is to use it to identify sections in a homepage or  to create a window where the content scrolls differently from the page or maybe it remains in place as the foreground scrolls over it. I’ve seen this used to show content on a monitor or within a small image.

    Plugins

    In the image above the background is blurred while the foreground is in focus. This can be added to any theme using a plugin such as D.ex – Multilayer Parallax WordPress Plugin which has unlimited layers that can scroll according to your settings. Another good plugin is The Parallaxer WP – Parallax Effects on Content which includes lots of customizations and works with any theme, Visual Composer, and is mobile optimized.

     Themes

    Lots of themes have parallax built in. Here are a few:

    An Example Using Divi

    Since this website was built with Divi, this article itself works as an example. The featured image remains in place while the content scrolls up. Another example is a child theme called Creative which uses parallax as a header and to reveal the footer.

    Here’s an example using Divi from Elegant Themes that shows text over images of food:

    Let’s Discuss

    • Do you use parallax?
    • What the best use of parallax that you’ve seen?
    • What’s the worst use of parallax that you’ve seen?

    Let us know what you think in the comments. As always, thanks for reading and please subscribe if you haven’t already. 

    Featured image by Caleb Jones

     

  • Web Design Trends 2017 – SVG Logos and Icons

    Web Design Trends 2017 – SVG Logos and Icons

    Reading Time: 3 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.5)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    JPEG’s and PNG’s used to be the most popular file-types for logos and icons. One problem though is they don’t always scale properly. They become pixelated when you zoom in. Another problem is file size. They can become large and if you compress them you’ll lose some of the quality.

    A better solution is to use Scalable Vector Graphics (SVG). SVG is an XML markup language that’s used to describe vector graphics. in other words, SVG’s are text files and can be edited with a text editor.

    SVG’s have a smaller file size (they’re about half the size of the equivalent PNG) and they’re scalable, meaning they don’t lose graphic quality when you zoom in, making them a perfect choice for logos, icons, and even featured images for responsive websites. They look  great on retina displays. They can be manipulated with CSS. The smaller file size of course will improve your page-loading time, so it’s win/win.

    Raster Vs Vector

    Here’s a look at raster (PNG, JPEG) vs vector (SVG) (image from the QuickLeft blog). Both look fine at small sizes, but when you zoom in it’s obvious the raster image gets pixelated while the vector remains sharp. To solve this, many designers have used a sharp larger image, but that increases the file size and load time. The SVG solves all of these problems.

    Example Logos

    This image, taken from Responsive Logos, shows a set of popular logos. The image above is regular size.

    The image above is 25% of the original size. You can see the logos retain their definition.

    The image above is at 300 zoom. The logo is still sharp.

    Tools for Creating SVG’s

    Some popular tools to create SVG’s include:

    SVG Downloads

    Let’s Discuss

    • Do you currently use PNG’s?
    • If not, do you plan to move to PNG’s?
    • What are you favorite tools and resources for SVG’s?
    • Is there another file type you prefer?

    Let us know in the comments. Thanks for reading. Please subscribe if you haven’t already. 

    Featured image from seabass creatives

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

  • WordPress Design Trends 2017 – Child Themes and Layouts

    WordPress Design Trends 2017 – Child Themes and Layouts

    Reading Time: 3 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.5)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    Child themes and layouts are great tools to help speed up the design process. They’re easy to get. Many multi-purpose themes and plugin builders allow you to export and import, so they’re reusable and you can buy them, share them, and even sell them. This trend will become even stronger through 2017 into 2018 as designs get more complex and interesting.

    The 7

    Most are designed by top WordPress designers using best practices and design principles, so you’ll have a great start on creating your own website. They’re available in the marketplaces online and directly from the designers themselves.

    Child Themes

    Monterey Premier

    Child theme usage will become more popular for themes that allow for heavy customization. New features can be added to the theme itself. Many builder themes come with demos or pre-designed child themes, and some of them allow users to create their own which can be sold in the marketplaces. Divi is one such theme. Developers are creating and selling child themes more than ever and that will continue to gain popularity.

    StudioPress

    Layouts

    Elegant Marketplace

    Many themes and builder plugins allow for easy layout importing. These will become more popular because they’re relatively easy to make and they don’t require the user to adopt the complete design like a child theme does. Instead, they can be used on a per-page basis. There are lots of free and premium layouts and even the premium layouts are not that expensive when compared to child themes. Several designers give them away as incentives to sign up to their newsletters. They’re also being included within services such as Divi Cloud.

    Let’s Discuss

    • Do you use child themes or layouts?
    • Which do you prefer between child themes and layouts?
    • What platform do you use them with?

    Let us know what you think in the comments below. As always thanks for reading, and please subscribe if you haven’t already. 

    Featured image from Divi Cloud

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

  • Web Design Trends 2017 – Drag and Drop Theme Builder Plugins

    Web Design Trends 2017 – Drag and Drop Theme Builder Plugins

    Reading Time: 4 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.5)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    One of the greatest problems with standard WordPress themes is they are limited in their design. They have the layout they have, and that’s what you get. That’s fine if you want the layout they provide, but what if you want to customize it without having to dig into code? You have a few good options:

    • Use a different theme
    • Use a drag and drop builder plugin
    Conductor

    There are lots of great themes out there and some even have built-in drag and drop builders. However, changing themes is not always an option. Changing to a theme that has a layout you like is still limited to that layout. Changing to a multi-purpose theme can be a better option to help solve that problem, but what if you’ve already customized your current theme? What if you don’t want to change themes? What if you like your theme but just want to add some builder functionality? For these reasons, and many more, drag and drop builder plugins are becoming more popular and this is a trend that will pick up speed into 2017-2018.

    Advantages, Elements, and Design

    MotoPress front end

    The advantage of a plugin is they don’t require a specific theme to work. This means users can install the plugin and start building without having to set up a new theme first. This also means that designers can create new layouts within their client’s current themes.

    MotoPress

    They allow you to create layouts, place rows, widgets, resize, move things around, edit, add code, and lots more. They include content elements such as text, images, video, audio, sliders, galleries, post grids, buttons, social buttons, accordions, tables, charts, HTML, maps, widgets, and more. Practically any type of layout can be created with a drag and drop builder plugin. Some even work from the front-end, making it easier to see the design as you go.

    Siteorigin

    Drag and drop builder plugins still require the use of design principles. They’re just a tool, so they’ll never take the place of a designer or developer, but they do make the job faster. Depending on the features of the builder you might have to keep the plugin installed even if you move away from it in order to keep the pages built with it intact.

    Elementor

    Some even include template libraries, allowing you to load a layout to modify. Some even allow you to import and export layouts, so they’re reusable.

    Popular Builder Plugins

    Here’s a list of the most popular drag and drop builder plugins:

    We’ll take a closer look at each plugin in future articles.

    Example – Divi Builder

    Divi Builder back-end

    Here’s a look at the Divi Builder plugin using the Twenty Seventeen theme. Both the back-end and front-end look and work just like the Divi theme. It even includes pre-made layouts that you can load and modify. It’s even compatible with Divi Cloud.

    Divi Builder frontend

    Let’s Discuss

    • For page builders do you prefer themes or plugins?
    • What’s your favorite page builder plugin?

    Let us know what you think about page builder plugins in the comments below. Thanks for reading. Please subscribe if you haven’t already. 

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

  • Web Design Trends 2017 – Multi-purpose Themes

    Web Design Trends 2017 – Multi-purpose Themes

    Reading Time: 3 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.6)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    Multi-purpose themes have been around for a few years but they’re gaining in popularity due to their versatility. They’re relatively inexpensive and you can use them to create any layout you want using the included drag-and-drop theme builders to create modular designs. Many include multiple child themes to help you get started quickly and you can modify the layouts to create something unique without having to start from scratch every time. This saves a lot of time and greatly reduces the difficulty in creating new layouts because it doesn’t require coding skills. They can also be expanded further using code, shortcodes, CSS, etc. The design can be as complex or as simple as you want it.

    A lot of designers/developers choose one or two to build from so they can build a library of layouts, plugins, etc., and save lots of time on each project because they’re familiar with how the theme works. Designers can create layouts and even share or sell them. Clients can choose from pre-made layouts which can save them money and get their website running faster, or they can choose to have the designer to create something unique just for them. The designer can use the same tools either way and the end result get’s the client exactly what they want.

    Multi-purpose themes can simplify the initial layout work, but still require design and/or development skills to create something unique or to add unique elements to pre-made designs. They don’t take away the need or advantage of hiring a designer or developer. At the same time, they’re great tools to get started and may even have what you need out of the box. They are great tools for beginners as well as advanced designers and developers. Some of them even have a large community to help with ideas and solve problems. The communities include Facebook groups, LinkedIn groups, forums, websites devoted to that specific theme, and marketplaces.

    Another advantage in using multi-purpose themes is it’s easier to teach clients to use a theme that the designer is the most familiar with. This also reduces support and maintenance time. The client can use the theme just like any WordPress theme or they can use the special features such as pre-made blog post templates.

    The most popular themes include:

    This Website Uses a Multi-purpose Theme

    For reference, this site was built with Divi. It uses a drag-and-drop system that makes it easy to create layouts quickly. It includes lots of pre-made pages to help you get started and you can buy professionally made child-themes in the marketplaces.

    To create the site with Divi I created a page and placed my elements where I wanted them, created some dummy content, and tested the design. Once I decided on the final layout I use it to create the pages and post templates. The design you see now is the 5th version. Using the drag-and-drop elements it didn’t take that long to change my design. This layout can be recreated in just a few minutes with Divi. As you can guess, the hard part wasn’t building the layout – it was designing the layout.

    Let’s Discuss

    • Do you use multi-purpose themes?
    • Do you prefer to use pre-made layouts and modify them as needed?
    • What are your favorite multi-purpose themes?

    Let us know in the comments. Thanks for reading and please subscribe if you haven’t already. 

    Images used (except for the Divi Builder) are from the theme’s sales pages. 

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

  • Web Design Trends for 2017 – Creative Typography

    Web Design Trends for 2017 – Creative Typography

    Reading Time: 2 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.6)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    Creative typography has been popular in the past few years and that trend continues. Fonts are getting larger and more creative, and text is getting more of the screen to itself – often taking up large blocks of the page.

    In the past fonts have been limited by screen resolutions. Most users had low resolution screens which made fancy fonts difficult to read. That’s not the case anymore. Even most smartphones have a resolution well above 1080. This opens up possibilities for creative font design. This means more serif’s, vintage, retro, and even custom fonts. Just be sure to keep it readable.

    Larger, Bolder

    Many designers are using larger typography for headers and logos to help create contrast and make the content look more interesting. This can be seen in themes like The 7 (The Creative Agency demo shown here). Popular blogs are using larger and modern fonts. For example, Elegant Themes just updated their website for a cleaner look and are using sans serif (a Google font called Poppins) for their headers and titles. WPMUDEV continues to use sans serif fonts (Monaco). Both use large titles.

    Text is becoming animated, highlighted with color, etc. Typography is being used within backgrounds. I’m seeing more drop-caps than ever before. I suspect as designers focus on how the typography layout looks on screen we’ll see more multi-column layouts with overlapping images, drop-caps, headers, etc. I’m also seeing larger fonts being used. I’ve also seen fonts used more creatively within layouts and sometimes having a large portion of the screen to itself.

    Font Pairing

    Font pairing is the science of matching typography to the content. Many websites simply use the default font that came with the theme. Using font pairing, a designer will match the font to the genre they’re best suited for. This will actually help in communicating with the audience. Font pairing makes the site look more professional and I expect to see it become more popular in 2017.

    For a great resource on font pairing see the articles

    Let’s Discuss

    • Do you use large fonts?
    • Do you prefer fonts that are more creative?
    • Have you tried font pairing?

    Let us know in the comments. Thanks for reading, and please subscribe if you haven’t already. 

    Featured image by Clem Onojeghuo

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

  • Web Design Trends for 2017 – Improved Popup Options

    Web Design Trends for 2017 – Improved Popup Options

    Reading Time: 4 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.5)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” custom_padding_tablet=”220px||220px|” custom_padding_phone=”120px||120px|” custom_padding_last_edited=”on|phone” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|tablet”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    Popups were once a very popular method for displaying ads. They became so annoying that users started using popup blockers (or throwing their monitors out the window in frustration… not that I ever did, but I was tempted a few times. Even the programmer who developed the code to use ads within popups apologized for creating the code). The popups then became pop-under’s until they started getting blocked too. Even today’s web browsers still have popup blockers built in and turned on by default. There are still a few out there but popup ads are no where near as bad as they used to be.

    Image source: https://cdn.theatlantic.com/static/mt/assets/science/Pop-UpAdsWiki-Post.jpg

    The Move From Ads to Newsletters

    What’s popular today is the use of popups for newsletter subscription notices. In my opinion these are no less annoying than popup ads of yesteryear. Most sites that use them only have one popup per page instead of a half dozen or more, so there’s that. Fortunately there are alternatives.

    The most popular type of popup today is the newsletter signup form. It usually includes a message with a free gift that either pops up on load, after a few seconds, after you scroll, or as your mouse goes to the address bar. There’s no denying that it works. However, if it’s overdone it can be extremely annoying – especially if the reader has already subscribed.

    Many sites have figured out better methods to get readers to subscribe than annoy them with constant popups. Some provide offers within their content, some use cookies to hide them, others have moved them to the corner, and others have removed them completely. Here are a few of the newsletter popup alternatives that are trending for 2017.

    Call to Action Within Content

    One example is the approach that Elegant Themes has taken as seen here in the free download called Coffee House by Olga Summerhayes. Rather than have popups about their newsletter, they create free downloads within their content. To get the download you simply click the download button and enter your email address. You’re then signed up to their email list and the download button appears immediately on screen.

    Cookies

    Another option is to use cookies to determine if the user has opted in or chosen not the see the popup. This example is a plugin for Divi from SA Web Solution called Divi Multi Modal uses this type of cookie. The cookie is good for 30 days. Users can hide the popup by clicking the message in the corner.

    Corner Popups

    Some websites have moved the popup to the corner where readers can still see the screen. They started out as large modal windows that took up a decent chunk of the corner but they’re starting to become smaller. You can see in the example from wpmudev that this call to action (CTA) doesn’t get in the way of the content. Animation can call attention to the CTA without it becoming obnoxious. Also, they can deny it all they want too but that green guy is ROM.

    Message Bars

    One of the most popular methods is to use a message bar that remains at the top or bottom of the screen until the user clicks to close it. As you can see in this example from WP Theme Roundups, this message bar is small enough not to get in the way yet stands out enough to alert readers to your newsletter. They can be styled to match your branding or you can make them stand out to keep them from becoming invisible.

    Let’s Discuss

    1. Do you use popup ads?

    2. Do you use popups for your newsletters or do you use another method?

    3. What is your favorite method for newsletters?

    Let us know in the comments. Thanks for reading and please subscribe if you haven’t already.

    Featured Image by Simson Petrol

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]