Category Archives: internet

Becoming a Better WordPress Developer – One Project at a Time

Time is one of the best indicators of how far you’ve come in terms of being better at your job. But it seems like web design and development is a line of work that provides the most tangible evidence of progression. All you have to do is take a look back at an old project and the proof will be there, looking right at you.

In my own career, I go back to my days with static HTML websites. I can easily see the signs of improvement in the code – and particularly when it comes to how I accomplished various layouts (hint: table layouts were older).

But over my years of building themes for WordPress, I can also see how things have changed. Sure, the design trends have come and gone. Those are the most obvious types of progress. But there are other, more subtle, aspects of development that provide an even better picture of evolution.

Below are some lessons of WordPress development I’ve learned through experience. Most all of it has been learned the hard way. And, while I can’t guarantee that this is how others would do it, I hope that it can at least spark some thought about how and why we do things.

The Straightest Path Isn’t Always the Best

Rarely do we ever build a WordPress website that doesn’t include some sort of custom functionality. That is, after all, part of its appeal as a CMS. It can do just about anything we dream up.

Oftentimes, that means using plugins. We literally have an entire world of them at our fingertips. They help us do things like sell online, optimize our site for search engines and share content with others.

We often think of plugins as the straightest path to solving whatever challenge we’re facing. And, while a well-coded and properly maintained plugin can be exactly what we need, the decision to use one is often more serious than we may think.

The ease of installing and activating a WordPress plugin can give us a false sense of security. A few clicks provide instant functionality (and gratification). However, there are potential consequences each time we do it. Plugins can have an impact on virtually every aspect of a website – security, performance and compatibility to name just a few. Then, there is also the possibility of a plugin becoming abandoned and left to die out. That puts us right back to square one.

In many cases, the right code snippet can provide a much more efficient solution. It can save performance-degrading overhead and, importantly, is within your control. One of the most frustrating aspects of plugins is that you are essentially handing over part of your site’s well-being to a third party. If something breaks, you must rely on them to fix it. And even the best plugin developers out there will run into a hard-to-fix bug sometime. That leaves you to wait while a solution is found.

The bottom line here is that, while it’s fine to use plugins, think about the alternatives as well. There may be a better way to accomplish your goals.

The Straightest Path Isn't Always the Best

Find a Comfortable Starting Place

My first designs with WordPress were often the result of pulling apart whatever default theme that came with the software. For example, many of the sites I’m now in the process of redesigning were built with a thoroughly hacked version of the Twenty Ten theme. I didn’t even bother using a child theme, which of course is a big no-no. I just renamed the theme and went to work.

While this method worked, it was hardly efficient. I found myself having to rip the same things apart over and over for each new project. Default themes are actually meant to be used as a starting point, so it wasn’t quite as bad as it could have been with a fully-bloated theme. Still, there had to be a better way.

As time has gone on, I discovered the beauty of a WordPress starter theme. There are a number of ways you can go, from full-on frameworks to something a bit more barebones, like Underscores (my personal favorite solution).

What I love about Underscores is that, out of the box, it’s pretty much as unformatted as you can get. That means I don’t have to rip anything apart before I can start building. I’ve got my own customized version, complete with some basic responsive styles, to give me a healthy head start on design and development.

This also allows me to design prototypes knowing how it will apply to my starter theme. There aren’t nearly as many worries about how I can achieve a specific look or layout because I have built in ways to handle most anything. That doesn’t mean that there aren’t still some challenges, it just provides a nice blank canvas with which to work.

If you develop a lot of sites, you’ll be much further ahead if you set up your own starter theme. Include the scripts and layouts that you use most often. That will get you up and running with each project in no time.

Find a Comfortable Starting Place

Take the Time to Learn

Early on, one of the biggest mistakes I made with WordPress was that I didn’t put in the foundational work when it came to learning the right way to do things. In particular, I had very limited knowledge of PHP. While I knew enough to hack my way through things, not having a grasp of the fundamentals made everything more difficult than it should have been.

For instance, it seemed like every project had a point where development stalled while I tried to figure out how to make something work. Because I didn’t really understand things, I found myself just hunting for code snippets and hoping they’d do the trick. Oftentimes I found that I couldn’t even customize those snippets to fit my needs – all because of my incredibly scattered approach.

Finally, I did something about it. I took an online PHP course one summer and, all of the sudden, things began to make sense. I am nowhere near a master programmer (the next must-have plugin won’t be coming from me anytime soon), but this basic understanding of how things work has improved the development process dramatically.

I still get stuck from time-to-time, but those issues tend to get cleared up much more quickly than before. And, while I still need code snippets, I generally can make them work for my situation.

So, instead of hacking your way through building with WordPress, take the time to learn the skills you need to know. Having even a basic understanding will empower you to do more than you thought you could.

Take the Time to Learn

Tomorrow Will Always Be Better

Lastly, I think it’s worth pointing out that evolving into a better developer is what we are supposed to do. So often, it’s easy to be hard on yourself when you have to dig in and try to fix something you built years ago. The old, “Why did I do it this way?” is a lament that we all face sooner or later.

The key is to learn from what you’ve done. As time goes by, you’ll find that your knowledge is greater and your processes are leaner. The result is that you’ll improve – one project at a time.

Original Article:

10 Creative Website Navigation Designs

While most websites use similar navigation structures and placements, there are small proportions that break free of the traditional layouts. These websites often do so to present a unique design, while also to experiment with alternate and often improved solutions. Every website is different, and the one-size-fits-all approach can often be outdated – particularly for websites which are more visual or do not follow a traditional template-like structure.

In this article, we’ll take a look at ten of the most creative website navigation designs around in 2018.

No Questions Asked

No Questions Asked

Opting to position their stacked navigation on the left, No Questions Asked’s website leaves the header section as clean as possible and introduces a slide-deck type layout.

Inflatable Regatta

Inflatable Regatta

The Inflatable Regatta website uses a full-width navigation with large, bold text links. It’s a simple solution which is easy to use, but one that is rarely implemented across the web design industry.

The Scenery

The Scenery

The Scenery uses the uppermost tier to position their logo and a primary CTA in the form of a contact button. The page navigation is positioned within the container and below this section. It makes for a neat and accessible navigation placement which is more closely tied to the content.

Stine Goya

Stine Goya

Stine Goya is another site to use the left-aligned vertical stack navigation. It opens up the header, allowing a large logotype, hero background, and inclusion of cart/checkout icons.

HelloSign

HelloSign

HelloSign’s blog uses a two-tier navigation design. The top tier includes search, categories and subscribe. The second tier allows for some quick-access topics. This makes it really easy for a user to filter results with little effort.

South Australia

South Australia

South Australia’s navigation is comprehensive in terms of content. There are over 30 individual items, which is why they have positioned them behind a menu link. The full-screen design is easy to use due to its spaciousness and separation of categories through color and a well-structured layout.

Bobby

Bobby

Bobby’s portfolio website splits the hero section into two halves. The left side includes six items: three navigation items at the top, and three link items at the bottom. Each is spread as far apart as possible for optimum visual separation and aesthetic effect.

Wade Jeffree

Wade Jeffree

Wade Jeffree has done away with a traditional navigation layout, instead opting for two emphatic links positioned at the foot of the main screen. They are clear and still manage to draw attention through their bold weight and underline decoration.

Newlyn

Newlyn

One of the most simple and effective navigations is by Newlyn. The hamburger icon expands to reveal a full-screen list of items. It’s incredibly spacious and in-keeping with the remainder of the website design.

Logistics Solutions

Logistics Solutions

Logistics Solutions implements some neat animation and transitional effects to expand the circular hamburger icon. It results in this eye-catching orange bubble which encompasses primary navigation items as well as company information, social links and contact details.

Original Article:

9 Best Free CSS Flexbox Tutorials

Every modern website needs to be mobile friendly. You can accomplish this by using responsive techniques, one of which is the CSS flexbox feature.

Flexbox lets you define layout elements as flexible boxes that can adjust based on the container. So you can decide how much room a certain element should take up, where it should move when the container is resized and how to arrange that content accordingly.

If you’ve never used the flexbox property before it can be really confusing. This list is here to help you come to terms with all the major flexbox methods. From there, you’ll be able to implement this powerful layout feature into your own projects.

Flexbox Froggy

flexbox froggy game

I’d argue that this is the best tutorial for complete beginners who want to get their hands dirty. Flexbox Froggy is a free open source coding game where you learn the ways of the flexbox…froggy.

You progress through various levels – with the first few being super easy. They introduce the absolute basics of flexbox and teach you the fundamental properties. From there, you’ll move through 30+ levels that get increasingly more difficult and will push the limits of your knowledge.

This game is great even for experienced developers who want a recap of what flexbox can do. You can skip ahead to the later lessons if you need more challenging work, so it’s perfect for all developers.

What The Flexbox

what the flexbox

What The Flexbox?! may sound like a weird trivia game show but it’s actually a great way to learn. This is a free set of video courses built by developer Wes Bos.

He takes you through everything related to flexbox properties, including resizing containers and how to create fully-responsive interfaces from scratch. The videos require an email address to sign up, but the course is totally free.

The best part is that these videos teach practical examples you can follow along with to learn the ropes. I still think one of the best ways to learn is to build real projects and this course does just that.

CSS-Tricks Guide

css tricks flexbox

If you prefer a written tutorial, then have a look at this CSS-Tricks guide. It covers pretty much everything you’d need to know, starting from the absolute basics of flexbox.

You’ll find plenty of visuals along the way explaining flexbox terminology, layouts and content organization. It’s not the best guide in the world, but it’s probably the best for beginners who just want to read and learn.

It’s much easier to consume than most of the W3 specification documentation and acts as a nice starting point.

Flexbox Intro Tut

flexbox intro tuts

I’m also really keen on this tutorial, written for the website Interneting Is Hard. It’s a site dedicated to online web development tutorials, with the goal of helping everyone understand coding.

Each chapter has beautiful diagrams explaining the syntax and terms you run into when studying HTML and CSS. And I have to say their flexbox stuff is fantastic.

The guide is absolutely massive, with over 12 chapters organized onto a single page. The tutorial uses a table of contents, which is quickly becoming the norm for lengthy articles. The sheer length may put you off at first – but it’s really worth a read.

Visual Guide To CSS3 Flexbox

flexbox visual tut

Graphics and visuals always explain things a little better than words. That’s why this guide by Scotch.io is one of the better introductory tutorials for studying flexbox.

Note this does use a lot of code snippets to explain the concepts, so it’s not just a visual guide. But there’s also plenty of graphics and diagrams to go around.

If you want a clear-cut technical guide to flexbox, then you’ll really like the Scotch guide. It does lean heavier towards developers, so it really helps if you’re already familiar with CSS syntax.

Flexbox CSS In 20 Minutes

flexbox 20mins video

I know that many people learn better through watching videos and there’s a lot you can find on YouTube. Granted, the Wes Bos video series above is also a great choice. But if you want something quick, have a peek at this video by Traversy Media.

It does a beautiful job of explaining the flexbox syntax in just 20 minutes. You’ll walk away with a much stronger understanding of why the flexible box model can so easily replace floats and why developers are so gung-ho about this new setup.

Building A Simple Layout With Flexbox

flexbox basic vid

To get into a more practical video example, you might like this video tutorial recorded by developer Kevin Powell.

It’s a rather short video, totaling just about 11 minutes. But it’s also more straightforward and to-the-point when it comes to explaining the flexible box model.

If you want a video you can easily follow along with, then this is worth watching. You won’t learn everything about flexbox, but you’ll learn enough to use it for custom web layouts.

Rebuilding Dribbble Using FlexBox

flexbox dribbble tutorial

This is perhaps one of my favorite video tutorials because it goes so in-depth with teaching you how to create a whole project from scratch.

YouTube channel DevTips created this Dribbble coding tutorial, which shows you how to rebuild the entire Dribbble layout using CSS flexbox. This is the exact type of tutorial I recommend for beginners who want to really dive in and learn how this works.

Memorizing CSS properties is great and will help. But with this kind of tutorial, you’re learning practical techniques on how to code layouts from scratch. And that’s the kind of experience you can bring into every future project.

Flat Responsive Flexbox Site

flat responsive flexbox layout

My last pick is lengthy tutorial which also covers flexbox quite well. In this video, you’ll find over an hour of guided instruction on building a custom website from scratch with flexbox.

You’ll learn how to code a grid and how to design the entire page to be mobile friendly.

However, this is much more detailed than other video tutorials. Therefore, I really recommend watching this video later on – once you understand the basics. It will cover a lot of the fundamentals of CSS flexbox properties but it also moves pretty quickly.

Either way, this list has plenty to keep you busy and will get you started on the right track with flexbox layouts.

Original Article:

10 Free CSS Ghost Button Code Snippets

Just about every website uses buttons. They might be used for CTAs, basic contact form buttons or something else altogether.

Regardless, you’ll want to figure out your site’s button design early and stick with it. One of the easiest button styles to use is the ghost button, since it requires very little texturing or gradient styles. In fact, they’re usually just flat colors!

If you like the style of ghost buttons and want to try some for yourself, then this list is for you. All of the ghost buttons below are built with pure CSS and are easy to copy and paste into any web project.

Colorful Button Styles

See the Pen Ghost Buttons with CSS3 by Mithicher (@mithicher) on CodePen.

Developer Mithicher Baro created these awesome ghost buttons in a few different colors and sizes. These properties are all controlled via CSS – which makes them quite easy to customize.

You can opt for large buttons, tiny buttons, square corners or rounded corners. All of the color and padding options are easy to change right inside the CSS.

I have to say that this is one of the best button sets I’ve ever seen. Everything is super easy to change and this design really fits the definition.

Icon Ghost Buttons

See the Pen Icon Ghost Buttons by Nicholas (@BoiseDigital) on CodePen.

Sometimes you might want icons in your ghost buttons. When text just isn’t enough, that’s when you’ll want something like this.

Each button uses the same icon from the IcoMoon set but you can easily swap it out for anything you’d like. There are quite a few free icon fonts out there to use and they’re phenomenal.

And with icon fonts, you never have to worry about cropping or resizing images. You just swap out the icon’s class in your HTML and voila! Your new icon is ready to go.

These buttons should be perfect for email signups, download CTAs or anything else that requires user action.

Fancy Colors

See the Pen Fancy Button by Simon Goellner (@simeydotme) on CodePen.

Developer Simon Goellner took ghost buttons a big step further with this pack of fancy button designs.

They all use custom gradient styles with Sass code to manipulate borders. Even the typography is colored with gradients!

On hover, you’ll find some beautiful button effects with outer glows. These stray from the “norm” of filling in ghost buttons with background colors. This is a unique twist on the typical ghost button formula and a welcome addition to this list.

Bright Animation

See the Pen Ghost Button Animation – Dribbble by Valentine (@wintr) on CodePen.

I’ve yet to see a CSS hover animation that doesn’t leave me impressed. Now these buttons don’t have the fanciest animation in the world, but they definitely grab your attention.

The idea actually comes from this shot on Dribbble created by designer Nikola Popovic. With this pen, you’ll get a very similar look and feel to the original animation – but powered by custom background changes and hover effects.

This is truly a beautiful style and one of the best animated ghost buttons.

Gradient Ghost Buttons

See the Pen Gradient Ghost Buttons by Alex (@akwright) on CodePen.

Here’s one more gradient ghost pen with a focus on the gradient feature. Note that these buttons don’t have any hover effects by default. Instead, they focus on the methods of generating custom gradients.

From these button sets you’ll find 3 different gradient options:

  • Box shadow gradients
  • Border gradients
  • Border images (boring!)

Naturally images are the safest, since they’re generally the most compatible with legacy browsers.

However, you can use the border gradient properties to really jazz up any of your ghost buttons. And this pen has all the code you’ll need to get started.

Halloween Button

See the Pen Halloween Ghost button by Robin (@lessthanthree) on CodePen.

With this festive Halloween button, we really get a taste of the word “ghost” in ghost button.

It doesn’t use any special effects beyond some hover shadows and light shining animations. But the coolest thing about this button is that it actually looks like a ghost. Out of all these years designing and studying websites, I’ve never seen a ghost button modeled after a ghost. Go figure!

This is a ghoulishly cool CSS project that makes a nice starting point for your own buttons.

Responsive Ghost Button

See the Pen Responsive Ghost Button by Jae Aquino (@jaevernonaquino) on CodePen.

Most buttons are designed to be responsive by default. But they are usually fluid-width designs that adjust based on the size of the page body.

If you check out this responsive button, you’ll notice the design resizes based on media queries. This can be a better way to handle responsive buttons if you need your layout to be pixel-perfect for all devices.

Pastel Gradients

See the Pen Gradient Ghost Button by CJ Williams (@silencekillsdesign) on CodePen.

These pastel gradient buttons are a little different than the other gradients. If you look closely, you’ll notice they don’t have many special classes or extra HTML elements.

Instead, developer CJ Williams created these buttons with more detailed background gradients and transparent borders. This way, the buttons can use their internal padding to hide the background behind the main text – but still keep the borders visible.

It also means that you can adjust the gradients to fit any color scheme you want. If you can make the gradient with pure CSS, then you can use it with these buttons.

Digital Play Button

See the Pen Ghost Button Test by Joss (@mmmkr) on CodePen.

Here’s a really unique design – and it’s one of two demos here that uses JavaScript. This playable ghost button relies on CSS for styling and JS for interactivity.

If you click the button, you can start/pause the player audio – but only after it animates into view. That’s the other big reason for the use of JavaScript.

This proves that not all ghost buttons have to be CTAs or hyperlinks. You can build some pretty cool features with ghost styles by using some creative thinking.

Button Fill Animations

See the Pen Button Fill Animation by David Stubbs (@davekilljoy) on CodePen.

Looking to add some cool hover effects to your ghost buttons? Look no further than David Stubbs’s various fill animations.

These button fills are super clean, easy to manipulate and perfect for any site. You can change background and text colors along with internal icons. They’re basically the ultimate collection of button hover effects!

I absolutely recommend this pack to any developers who want a beautiful variety of ghost buttons.

Material Ghost Buttons

See the Pen Material Design Ghost Buttons by Marco Fugaro (@marco_fugaro) on CodePen.

You can build some amazing stuff with Google’s material design styles. Some of my favorite features are the UX interactions and microinteractions originally developed for Android phones.

You can see a few of these animations in these ghost buttons. Whenever you click, they’ll automatically fill in the background with styles based on where you click. It relies mostly on JavaScript and it’s one of the craziest features I’ve seen in a ghost button.

But even if you’re not a big material design fan, there’s still plenty in this gallery to please the eye.

Original Article:

The Struggle for Freelance Growth

Being a freelance web designer offers plenty of advantages. You get to work the way you want and for the type of clients you prefer. Whether you’re specializing in a niche or open to anything – it’s all for you to decide.

And, if you manage to hang around long enough, you’ll have found a certain level of success. That’s often a result of hard work coupled with outstanding skill. But at a certain point even the most talented and dedicated designers can find themselves in a period of stagnation.

Attaining growth can be difficult for any business. But it’s especially tough for someone who works solo. After all, there’s only so much work one person can do. So it seems somewhat natural that things eventually reach a plateau.

So, how do you grow when you’re faced with the limitations that come with a freelance design business? As they say, you find ways to work smarter – not harder.

Your Experience Has Value

Experience is something that can’t be taught – it’s rightly earned. Every one of your successes, failures and mixed bags has brought you valuable knowledge to take along to the next stop on your journey.

While experience alone doesn’t make you immune from mistakes, it does provide you with a much better picture of what works and what doesn’t. Theoretically, it means a smoother site building process for you and your clients. At worst, it means knowing how to handle bumps in the road. That’s worth something.

Your fees should reflect the experience you bring to the table. So if you’re charging the same rates you were five years ago – you’re missing out.

In my own journey, I can tell you that my hourly rates have gone up substantially over the nearly two decades I’ve been in business. And, surprisingly, the overwhelming majority of clients have stuck with me despite rising rates.

This can be tricky, however. In general, it’s best to raise fees in reasonable amounts. In other words, you don’t want to double your prices overnight. More incremental increases are much easier for clients to swallow.

The other part of the equation is to communicate the reasoning behind the rate hike. People tend to be more understanding if you’re upfront with them. Simply sending an invoice with an increased rate without prior warning is more likely to be upsetting.

Your Experience Has Value

Bundling Up

Part of the reason a freelance design business can stagnate is the difficulty in extracting more revenue out of existing clients. While raising prices can do some good regarding the work you’re already doing for them, it doesn’t do much to entice them to start new projects. It takes a little bit of creativity on your part to get them on board.

One way to boost business is to offer various package deals. For example, if you normally charge a specific hourly rate for maintenance, give clients who are willing to prepay for services a price break. Maybe that amounts to a free hour of labor or some other goodies.

This can provide you with some upfront revenue and encourages your clients to spend. Not everyone will fully utilize their benefits – so you’ll come out ahead in some situations. But even if they do exhaust every last drop, you may well have convinced them to spend more than they would have otherwise.

Another opportunity lies with clients who have older websites. Perhaps their site isn’t mobile-friendly or it’s using some outdated technology. Take a look at where they all stand and reach out to those who could benefit from x, y or z. Offer them an upfront quote for making the improvements.

All it takes is a couple of positive responses to bring in some fresh funds. And with the way web technologies go out of favor, you’re sure to have plenty of improvements to suggest.

Bundling Up

Look for the Right Opportunities

When it comes to bringing in new clients, you should be picky. This is incredibly important if you have a mature business. If you already have a lot of clients, there’s no sense in just chasing the fast cash. Instead, look for those who will be a good fit for now and in the long term.

Ideally, you’ll want to choose to work with clients who will mesh well with the way you do business. If you’re looking for someone who will be with you for years, don’t settle for a client that has a tiny upfront budget with little need for changes down the road. This often ends up being more trouble than it’s worth.

When you’re just starting out, you often end up settling just because you need the business. But over time you may regret having done so. You can get stuck in situations that no longer fit with what you do.

Now that you’re older and (hopefully) wiser, you can look for opportunities that encourage growth.

Get Some Help

Flying solo is tough. There will be times when there simply isn’t enough of you to go around. To take that next step, it might make sense to look at bringing another freelancer aboard to help out.

This doesn’t necessarily mean hiring on an employee in the classic sense. It’s more like a trusted colleague who can pitch in occasionally. Perhaps they take care of some smaller tasks while you handle the bigger items on your agenda. Since it’s your business, you get to decide when and how to utilize the extra hand.

The challenge here is finding someone that is both trustworthy and affordable. On the first front, you want a person who does what you ask of them and isn’t afraid to ask questions. Second, you still want to make money on the tasks you assign to someone else. What you don’t need is a situation where you miss deadlines and run over budget.

Finding the right person can take some time – you may have to go through a few freelancers before you find “the one”. One way to minimize risk is to work with a candidate on a few small projects and see how things go. If all goes well, you’ll have a trusted source of help when you need it.

Get Some Help

Growing for Good

Keeping your design business moving full-steam ahead requires a lot of creative thinking. It’s about finding effective ways to bring in revenue from both new and existing clients. Beyond that, you need to think about how your business has evolved over time and make decisions that help keep things pointed in that direction.

Ultimately, you get to decide your own path to growth. It’s not always easy, but it is one of the unique aspects of being a freelance designer.

Original Article:

Examples of Print-Inspired Website Designs

Web design has always drawn inspiration from print. Whether it’s content layouts, typography, or image placement, print is always a worthy point of reference given its longevity. Websites today continue to be inspired by print design, with many shifting to text content-heavy designs as opposed to the more visual approaches we have become so accustomed to. There’s also a rise in websites using a palette of simple blacks for typography and off-white for backgrounds.

In this article, we are going to showcase a selection of the finest recent examples of print-inspired website designs.

Alecco Bakery

Alecco Bakery

Using beautiful serif typography and muted background colors, Alecco Bakery has produced a simple design with great emphasis on the content and imagery.

Exposure Exhibition

Exposure Exhibition

The website for Exposure Exhibition uses print-style divider lines, large headline typography, and a neat and structured column layout for content.

Tapwater

Tapwater

Another site that utilizes a muted, off-white background color, Tapwater also implements print-style divider lines and a structured column layout. The illustrations are simple and reminiscent of styles found in quality print publications and newspapers.

Morressier

Morressier

Morressier’s illustrations are simple, using just monochrome tones. It also uses a well-defined grid structure, akin to that of a newspaper publication.

Topic

Topic

Topic’s light beige background color is contrasted with heavily-stylized imagery and emphatic vertical left borders to draw attention to content sections.

Whtifs

Whtifs

Whtifs uses a beautiful combination of mono typography with simplistic button styles and clearly ordered content with divider lines. It’s free of any imagery or illustration, providing a print-like document.

Smith Made Studio

Smith Made Studio

Using only black and white upon a beige backdrop, Smith Made keeps things both traditional and simple. It’s a website that could easily be mistaken for a print document at first glance, in part due to the serif typography, lack of color and hand-drawn illustration style.

Original Article:

Examples of Unorthodox Mobile App Designs

Mobile apps should generally follow the same format and guidelines. Whether it’s Material Design or iOS Human Interface Guidelines, pushing designers to follow a design system ensures consistency across an entire operating system. This makes it easier for the end user to switch between apps with familiarity and ease. However, some mobile app designs break free of these constraints for the sake of experimenting with new styles and layouts. It enables us to envision new solutions to issues like navigation structures and work on general user experience design improvements.

In this article we are going to look at a selection of the most interesting and unorthodox mobile app designs. They each reconsider almost every aspect of a typical design.

Messages

Messages

This messaging app moves away from the traditional header and tab bar associated with iOS. Instead it focuses on using simple navigation items, in-line tabs and depth to provide visual separation of elements.

iOS 11 Activity App

iOS 11 Activity App

This activity app for iOS 11 goes against Apple’s advice to embrace the iPhone X notch. However, the result of using a black background is both visually impressive and less harsh on battery life. The bright green iconography contrasts beautifully against this background.

Pay App

Pay App

This Android app design offers a new take on primary action buttons, positioning the ‘Receive Money’ button on the top right. The tab bar has also been tweaked and the overall design looks cohesive with its singular background color.

Crypto Trading

Crypto Trading

Using an abundance of depth, this iOS design takes visual cues from Material Design and implements them for iPhone. The design language is not associated with iOS styles but is wonderfully simple and offers a rethink of how added contrast and separation can enhance a design.

Events App

Events App

This events app is unique in the way it uses a colorful title bar background. It brings the edge-to-edge display to life and adds a great deal of design merit and feeling to the product.

Urban Timetable

Urban Timetable

Using bright purples and blues, this timetable app moves away from the minimalist white that has become so popular across iOS. The result is visually stunning and ties into the brand perfectly.

Settings Interface

Settings Interface

This settings interface takes on a more radical rethink of how a mobile app could look. From the colorful, graphic-intensive title bar, to the minimal switches, it’s a visually impressive design which looks easy to use and understand.

Kilpi Interactive

Kilpi Interactive

Not only does Kilpi use a completely redesigned title bar and header section, it also introduces an entirely new type of navigation system. It relies on rotating a wheel as opposed to using dropdowns, tabs and other traditional components. It looks visually impressive and easy to use with one hand.

Original Article:

Why Employee Advocacy Must Be Part of Your Social Media Marketing Plan

In the competitive business world, new companies have plenty of disadvantages. One of the biggest is shaky consumer trust; no one wants to give money to a group that has no reviews or well-known entities to vouch for them.

There are plenty of solutions to this problem, one of the most potent being social media marketing. Employee advocacy is one newer form of this solution. People are more likely to trust non-celebrity endorsements, especially from peers, so getting employees to talk about your business can be very helpful.

But how does it work? And how can you implement this lucrative technique effectively? An employee advocacy plan is easy to put in place but difficult to master, so it’s important to gather all the info you can from the start.

What Is Employee Advocacy?

When your employees reblog or retweet your posts, endorse you on social media, or discuss your business with others online, that is employee advocacy in our modern world. It also encompasses when employees share content published by the employer or when they share content published by others that’s also about the employer.

In short, it is when the workers publicly support the company from their personal profiles, rather than celebrities, branded profiles or managers doing so.

It’s no news that the internet has empowered and changed the way businesses approach marketing, though rarely do they turn to employees for help. Which is a shame, because this practice increases customer trust and website traffic.

How Do You Use It?

While some companies have informal programs to encourage social media support, this approach is more difficult to track if not less effective. You can keep an eye on employees’ accounts, but it’s difficult to track the influence, user engagement, and overall success of many workers.

Luckily, there are “mini social media” platforms with the aim of employee advocacy, such as LinkedIn Elevate, Smarp, Sociabble, or Dynamic Signal, which provide many useful features and analytics. Link tracking allows you to see whose posts get the most clicks, what content is the most popular, and so forth. Employees can even compete on leaderboards or earn points to spend on prizes.

These platforms make it easier to publish articles since everything is managed in one convenient location, which is key if you want to take your company’s employee advocacy program seriously. And this way, once the content is published, employees can quickly and easily share across multiple social media platforms. That’s a lot easier than having to send out daily memos reminding employees to post to Twitter or Facebook.

Lastly, this sort of tool provides an easy way for both employers and employees to communicate, collaborate, and stay up to date. Email may not quite be outdated yet, but being able to place relevant information right in the app, rather than mass-emailing a large team, is certainly more convenient.

Using an employee advocacy tool is an all-around better option than skipping it altogether.

Why Do You Need it?

If you wished to, you could create a few Twitter accounts for the leaders of your company, set up some bots to tweet out links to anything you post on your blog, log out forever, and call it a day. This certainly wouldn’t be anything out of the ordinary.

However, most users can spot a strictly automated account a mile away and won’t be very impressed with your company. Fans may subscribe to you just to be notified when there’s a new blog post, but there will be nothing in the way of audience engagement. New prospects who visit your social media accounts may be turned away by the obviously automated content.

However, an interesting feed with a human touch and lots of user interaction is something that people will appreciate. You may be too busy to stay active on social media, but your employees might not be.

Consumers are less likely to trust CEOs nowadays, so the spotlight turns to the average person. Not to mention, average folks may have their own network of friends and peers their content can reach. A long reach is the key to brand success.

It’s fairly clear: this is a profitable marketing tool that produces more natural and appealing content. The internet has wised up to clickbait and automated accounts, so it’s now necessary to put a bit more effort in. And when it comes to social influence, employees are the ones who have the public’s trust.

Encouraging Advocacy

Now that you know what employee advocacy is and why you need it, how do you get employees motivated? If the program provides no reward incentives or positive effect on their career, they won’t waste their time. You’ll have to give some encouragement.

Firstly, forcing employees to speak about your brand on social media is not the way to go. Morale goes down the drain quickly when you make people do something they’re not interested in. Instead, get them interested! Offer incentives to get them excited. Implement a rewards system, or use a leaderboard to challenge competitive workers.

And instead of giving huge paragraphs of intricate rules, regulations, and expectations, set short and clear guidelines and allow the workers to take control, producing and sharing content that they enjoy. Consumers know when an employee loves what they do, and you’ll earn the trust of them both.

The important thing: don’t dictate their every move. Rules are important, but don’t overdo it. It may seem risky to give someone free reign over your company’s image, but the rewards are far greater. This employee-first doctrine creates content that sounds more real, and less like it was written by an SEO bot or produced in a factory.

Perhaps you could even allow them to create their own content. Talented authors, artists, and image/video editors could prove to be a huge asset if you can discover them. And who can say no to extra career opportunities?

Produce Relevant Content

When your staff has nothing to share, what will they talk about? If you’re not already in full social media mode, then it’s time to get started. Get on Twitter, write on Facebook, and start creating blog posts.

Besides drawing extra attention to your company, it’s both effective repostable material and opens up avenues for discussion by your employees. Don’t forget to have some fun, though! If your company hosts a party, get everyone together for a picture. Content like that provides a breath of fresh air and gives consumers a look into the company atmosphere.

In short: Everything you post on social media should either be insightful, memorable, or fun. Engaging articles with snappy titles, relevant but interesting images, or quick videos are all appropriate. After all, most people on Twitter wants to watch a 20-minute video about the stock market or read a 10,000 word digest on tax returns. Sticking to this general idea will benefit both your social media popularity and your employee advocacy plan.

Improve Your Marketing Strategy With an Advocacy App

The definite way to implement this marketing plan is by using a networking platform. There are many apps out there that can connect your company online, but it’s best to choose one that’s designed around employee advocacy.

Apps like these cover the features most business connection apps provide, while also giving you access to relevant analytics. This information will let you know what content to target and how interested consumers are in your brand. Without this valuable intel, you’ll have to rely on follower and like counts to gauge effectiveness — which can often be unreliable.

Start small. Loop in the best of your employees, the ones who seem eager and willing to try new things. Run contests and set goals for them to meet. If you find success, you can roll it out to willing workers, and continue until you have a stable platform.

And in time, you’ll have a successful program that’s both boosted your visitors and given your employees chances to further their skills and careers. If nothing else, it’s worth trying! The risks are minimal, but the benefits are immense.

Original Article:

Get Things Done More Efficiently than Ever with monday.com

Designers know that communication and organization are essential to making a project successful. Otherwise, it’s just too easy to suffer from setbacks and misunderstandings. Working as a team means knowing who’s responsible for handling tasks, keeping tabs on progress and being mindful of deadlines. But even if you’re working on your own, you still need a way to stay on top of your to-do list.

Thankfully, there is a solution. monday.com turns task management and collaboration into a visual experience. Its unique combination of a user-friendly UI and powerful functionality make it a must-have tool. They have helped companies of all sizes get things done more efficiently – and they can help you do the same. Let’s find out how:

Keep Track of Everything (and Everyone)

When it comes to project work, there are so many things we need to stay on top of. Trying to do so with email or traditional meetings ends up causing more problems than they solve. There’s got to be a better way.

monday.com (formerly known as dapulse) is here to save the day with everything you need. Use it to communicate with team members, manage and assign tasks, share progress, files and more. They have a strong set of core features to help you achieve your goals, including:

The Ultimate Board

Use boards to keep track of every aspect of your projects. You can set up multiple boards to provide anything from a high-level view of what your team is working on to a task list for a single person.

Boards are designed to be intuitive and user-friendly. From color-coded task statuses to a simple drag-and-drop method for moving things around – there’s no steep learning curve to adjust to. Things simply work.

And, you’ll love the fact that you can tag each task and easily search for every related item in the system. This makes it incredibly painless to find what you’re looking for.

monday.com Board

Communicate with Ease

With monday.com, you’ll find that communicating with team members and clients is both easy and enjoyable. Participants are kept in the loop with new message notifications on their desktop or mobile devices in real-time. That means you’ll spend less time in pointless meetings and more time knocking tasks off your list.

You can also share files directly from your device or supported third-party cloud services. Plus, this forum provides a great place to share new ideas, feedback or ask a quick question. And, because everything is all in one place, you won’t have to dig through huge archives to go back and reference something. Try doing that with email.

As a bonus, you can cheer on team members by sharing .gifs and giving them a thumbs-up. A little bit of encouragement can go a long way!

Visualize it All

Seeing your projects in a visual manner can really open your eyes to the bigger picture. With monday.com’s Timeline feature, you’ll see a listing of team members, which projects they’re assigned to and respective dates. It’s all there in an attractive and interactive chart.

The Timeline lets you easily find out which team members are super-busy, along with those who might have time for a new task assignment. Because it provides such a great view of what’s happening, you’ll be better able to stay on top of project deadlines. Task management has never looked so good.

monday.com Timeline

Real Results from Real People

Reading about how monday.com’s features make life easier is great. But when you see the real-life results others have had, it’s all the more impressive. You’ll find that monday.com has been utilized by companies ranging from solo entrepreneurs all the way up to large corporations.

It’s not often that a tool can be successfully used by such a wide variety of clients. This speaks to monday.com’s flexibility in adapting to the different needs of its users. The system can be easily customized to your specific requirements – no matter how simple or complex.

And it’s a great fit for every industry. Your first thought might be of a hot tech company – and it does do wonders there. But it’s also been an indispensible tool for schools, fitness gurus and even a small bike company.

Both pop culture and nature aficionados will be thrilled to know that monday.com also helped out a team from Discovery Channel to plan the ever-popular “Shark Week”:

Take Task Management to the Next Level for Free with monday.com

Implementing a strong task management tool can transform the way you work. You’ll have a better understanding of your projects – right down to the smallest details. Team members will stay on the same page and be aware of their own responsibilities. This results in projects that get done more quickly and with fewer hiccups. monday.com provides you with a highly-visual and easy-to-use platform that brings everything and everyone together.

The best part is that you can start using monday.com for free. Experience this revolutionary tool for yourself and see how much it can streamline your workflow.

Original Article:

2018 WordPress Themes – More Popular than Ever

If you’ve come this far without using WordPress, this might be a good time to make a switch. The reasons are many. WordPress is a free open source content management system that’s highly flexible, and easy to use. It also has the backing of a large community of users.

There is a nearly endless supply of plugins and themes available to you. Thus, there’s virtually no limitation on the types of websites you can build. The demo content of most of the available themes, like those described here, can be imported.

You will just need to select a theme. Afterward, you can be assured that the layout and structure of your website’s theme will match that of the demo.

Consider using one or more of these world-class WP themes! They will definitely help you to create your own world-class websites in 2018.

Hestia

Hestia

Hestia is a single-page design theme that adheres to Google’s Material Design principles. This makes it possible for web designers and website owners to adapt Hestia to virtually any niche, website purpose, or screen size in perfect harmony. Hestia is especially suited for creative agencies and startups, as well as small shops and businesses.

You can easily build a shop in Hestia with WooCommerce. It is compatible with most of the popular plugins, including bbPress, Photo Gallery, Travel Map, Yoast SEO, WP Super cache, and Flat Parallax Slider, to name a few.

Built-in SEO Optimization ensures your website or shop will be correctly indexed, so it can be found by the major search engines. Your content has something to do with this of course, but it is helpful when the theme itself is created with SEO in mind.

Hestia is free. Premium versions are available, but it would be more than worth your while to give the free version a try. It may in fact be all you are likely to need.

Enfold

Enfold

Enfold is a ThemeForest best-rated top seller, and as such is well known in WordPress web design circles. Especially noteworthy is Enfold’s large variety of demos. These demos not only contain images you are apt to find uses for, but include a license to use them.

You’ll find demos representing niches large and small, travel niches, and demos suited for everything from blogging to weddings, to construction, to consulting.

Enfold is extremely easy to work with. The demos can be installed with one click, page-building is easy, and no coding is necessary on your part. Once you start Enfold, you’ll soon discover how much time you can save during your web-building adventures, and should you hit a little bump in the road, youll also discover that great support can take on a whole new meaning.

Porto – Ultimate WordPress + Ecommerce Theme

Porto - Ultimate WordPress + Ecommerce Theme

Porto has been around for several years, during which it has enjoyed increasing popularity; and for good reason. For many, Porto has been seen as simply being a better choice for new website design. Its authors have kept abreast of the latest trends in web design, and best practices in coding; resulting in a best solution for you.

Porto is highly optimized, it’s super-fast, and it’s compatible with tons of WP plugins. There are plenty of demos to choose from, ranging from classic website demos, to one pagers, and shop demos. The best way to see what Porto offers, is to visit the website and view the Main Demo, of which there are 18 variations.

You’ll like what you see, plus you’ll come away understanding why Porto’s (happy) customers are presently 53,000+ strong.

TheGem – Creative Multi-Purpose High-Performance WordPress Theme

TheGem - Creative Multi-Purpose High-Performance WordPress Theme

TheGem is a versatile, responsive, high-performance WordPress theme with a modern creative design to suit a multitude of creative uses for building websites. It’s a top-seller on ThemeForest, it has a 5-star rating, and with more than 14,000 sales the past year alone, it’s a best-selling WordPress creative theme. Since TheGem has too many awesome features to list here, visit their website and see them for yourself. You’ll be impressed.

Houzez – Highly Customizable Real Estate WordPress Theme

Houzez - Highly Customizable Real Estate WordPress Theme

Building a website that has all the features and functionality a real estate agency requires, would normally be a daunting task. Not so with Houzez. Everything is there to begin with, and all you need to do is tweak things to the liking of your client. It doesn’t get much easier than this.

Uncode – Creative Multiuse WordPress Theme

Uncode - Creative Multiuse WordPress Theme

Characteristics of the starting theme are often reflected in the final product; one reason why Uncode, a pixel-perfect theme featuring awesome attention to details and performance, should serve you well. Uncode’s massive options, and advanced grid and adaptive images systems, make you the master. If you like “smooth and sleek”, you’ll surely like what this WP theme has to offer.

The Core

The Core

The Core is a premium, multi-purpose WordPress theme that is well-equipped to take on virtually any task you might demand of it. With its 20+ premade websites, visual page builder, and an awesome assortment of premade layouts, The Core lays claim to having the best WP theme design in the business. Purchase hosting from one of The Core’s partners, and you get the theme, theme installation, and a demo import for free.

Grimag – AD & AdSense Optimized Magazine WordPress Theme

Grimag - AD & AdSense Optimized Magazine WordPress Theme

If you’re an AdSense user, or have contemplated using AdSense in your marketing campaigns, Grimag, the AD optimized Magazine WordPress Theme, is right for you. In addition to being AdSense ready, Grimag is bbPress, BuddyPress, and Translation ready. This powerful publishing solution is an ideal solution for anyone looking to get the greatest monetization results from their online publishing efforts.

MOVEDO – We DO MOVE Your World

MOVEDO - We DO MOVE Your World

This top-rated premium multipurpose WordPress theme will take you places in web design you’ve never been before, and you may not wish to return. MOVEDO was crafted with awesomeness in mind, with features such as motion dynamics in columns, super-crispy moldable typography, and the ability to manipulate header elements until they appear “just so”. You can create wild and wonderful websites, and thoroughly enjoy yourself while doing so.

Anariel – A WordPress Fashion Blog Theme

Anariel - A WordPress Fashion Blog Theme

This modern, classy WP Fashion theme is just the thing for a fashion blogger who prefers a minimalist design approach, and who wants to create a modern blog with plenty of options. Anariel is responsive, and comes with 6 pre-defined demos you can install with a single click. If you’re a fashion designer, you absolutely should have a theme that specifically fits your need for a fashion blog. Anariel does precisely that.

Real Homes – Real Estate WordPress Theme

Real Homes - Real Estate WordPress Theme

Real Homes is a handcrafted WordPress theme for real estate websites with more than 4.7 out of 5 rating from 950+ real buyers. Its popularity (15,500+ buyers), together with its many features make it well worth considering, but if you dig deeper, you’ll find that what purchasers and users really like, is its flexibility.

You can present listings and properties in so many different ways; including comparisons. Real Homes can also be used by those interested in or charged with property management.

Leadinjection

Leadinjection

Leadinjection is a WordPress landing page theme that is ideal for marketers, business owners, affiliates, and other professionals who have a need to launch landing pages within minutes. Leadinjection is easy to install and customize. A favorite feature is the Lead Modal Popup, a lead capture form popup that appears on your website per your specification, can’t be blocked, and draws attention to itself, providing you with a genuine marketing advantage.

Conclusion

There’s more than a little variety to choose from in this listing of top WP themes for 2018. We have no doubt you have discovered this by now.

What is a beauty of a listing like this? It includes many multi-purpose themes for a wide variety of different web-building projects. However, that is not it.

There are also those more specialized themes. They address itches you’ve been longing to scratch but haven’t found the means to do it with.

Original Article: