CTAs are important because without them you’re leaving it up to users to find things they need (or worse, leave your website). Your aim should always be to reduce the cognitive load on users by making things simple and easy to execute. A successful CTA should be succinct, well-designed and accessible to users with a wide range of experience and abilities in order to maximize the amount of people who can see and interact with them.

Now that we have a bit of a foundation, let’s dive into ways you can maximize the effectiveness of your call-to-action buttons.

CTA Text

The text for your CTA button is just as important (if not more) than how it looks. Some users may be more likely to engage with a button that includes actionable text such as “Now” or “Today” as it generates a subtle sense of urgency.

Letter case in buttons

Another thing to take into consideration is the letter casing of your call-to-action buttons. In most cases (pun intended), you’ll want to decide on a single format (all-caps, lowercase, sentence case, etc.) for consistency. This should also align with your brand voice. Using all capital letters (aka, all-caps) may be too aggressive for a dog-boarding website but could fit in with a more serious-toned brand or more urgent CTA (like donations for a nonprofit).

The case of your button text should also influence the text itself; for example, using actionable phrases like “SIGN UP NOW” combined with all-caps could be perceived as too forceful. If you do choose to go with all-caps text, you should also make sure the CSS styles for the text are optimized. Take the following example where we’ve added some letter spacing and reduced the overall font size to make the button feel more professional and less forceful.

Test, adjust, repeat

Just because you’ve written a seemingly effective and concise CTA doesn’t mean your work is done, either. There are lots of case studies of high-profile websites that tweak their CTA messaging based on data such as analytics, user testing, and heatmaps. Former Mailchimp designer, Aarron Walter, discussed in his book, Designing for Emotion, how Mailchimp saw an increase in signups by simply changing the button text in their header from “Sign Up” to “Sign Up Free.”

Accessibility

When designing your call-to-action buttons, you should also be considering the various accessibility issues involved. In terms of the actual code of buttons, there are a lot of things to consider such as aria-labels and other functionality for users navigating your site via keyboards, screen readers or other forms of assistive technology. We’ll stick to design considerations for this blog post.

The first thing I check when designing buttons is color contrast. There are free tools like the WCAG Color Contrast checker that allow you to plug in your hex code values to check the contrast. Poor contrast means that users with less-than-perfect vision (a lot of people), color-blindness (about 8% of the male population in the US), or other forms of impairment, will have a hard time reading your button text. This can be tough when your main brand color is on the brighter end of the color spectrum (such as yellow, orange, red, green, etc.). You should always aim for at least passing AA contrast. You can see the buttons so far in this article pass for everything except normal-sized text for AAA contrast. If we want to shoot for AAA, it’s as easy as selecting a slightly darker button color or changing the text color.

This was a pretty easy example, but what if you have a tough brand color such as yellow? Let’s look at some ways of working within that constraint. We can see that out of the gate, this yellow fails all the checks for color contrast, but fear not; we can apply some creativity and have this passing contrast checks in no time!

Here are four potential ways of using the yellow brand color from before but in contrast-friendly ways. We can use an outline (or ghost) button style with the brand color as the border, text and icon combination, or a combination of both. You can get creative and come up with even more variations.

Design

Lastly, let’s look at some overall design considerations for your call-to-action buttons.

Padding

One of the most common mistakes I see with CTA buttons is simply not having enough spacing (or padding) for the button. This leaves the text feeling cramped and awkward, while also making it harder for users to click or tap due to the small amount of real estate. Not to mention, it makes your CTA seem less professional or legitimate. Aside from these items, the button on the right just looks more “clickable” than the other button, wouldn’t you agree?

Spacing

The spacing and proximity of your CTAs to other elements on the page is incredibly important in drawing attention to them. Make sure that your CTA has plenty of breathing room (white space) to increase engagement and so it doesn’t get lost in a sea of elements vying for attention. You should also take care not to overload any given CTA section with too much content. One sure-fire way to turn off users is overloading them with text. Sometimes, communicating an idea with a single, snappy heading and nice image will draw far more attention than over-describing an idea with paragraphs of text.

Multiple CTAs

There will be times when you will want to display a primary and secondary CTA in the same component. When you need multiple CTAs so close together, it’s important to consider the spacing rules we already covered. You’ll also want to make sure that you’re giving visual priority to your primary CTA, as opposed to giving equal visual weight to both (i.e. you need to make it clear to the user that one is more important).

Closing

Whether you’re running an enterprise-level corporate website, a large-scale media site, or a consumer goods website that helps people track down their favorite products, the design decisions you make in regards to your CTA buttons can either convert your visitors into loyal customers or provide no impact at all. Use these tips and guidance to ensure you’re making the right choices for your CTA buttons.

Ready to improve the CTA buttons of your website? Talk with our team. We’d love to strengthen the design elements of your call to actions and improve your conversion rates.

The post 3 Design Tips for Call-to-Action Buttons appeared first on WebDevStudios.

It Helps You Focus on Your Users

Looking at the aforementioned stats, you can accurately assume that a lot of your user base is most likely on mobile. As of 2018, around 55% of website usage is done via mobile device or tablet. I was once working with a client and asked about mobile vs desktop usage stats on their website.  They were convinced that most of their users were accessing the site by a desktop, but the data I had acquired on their users contradicted that. Focusing on only desktop mock-ups, when the number of desktop visitors might be less than 30% of your users, doesn’t make sense.

It Simplifies Your Product

Designing for mobile causes you and your stakeholders to simplify, which is good for everyone. A simple, clean website is easier for everyone to use and generally looks much more visually appealing than a cluttered and complex one. Forcing a lot of fluff and features from a big screen into the constraints of a smaller screen is a lot more work than the other way around.

Developer Handoff Is Seamless and Cost-Effective

Having mobile comps eliminates the need for developers to spend extra time trying to figure out what all of those desktop features are supposed to do on mobile because it’s already been planned and designed. Think about it: a sidebar filter for a section of products works beautifully on desktop, but on mobile, there’s no room for a sidebar. What happens to this vital user control once we view it on smaller screens?

By investing in mobile website mock-ups you may also find things that are possible on a desktop but not on mobile. These will be discovered early so you can plan accordingly or come up with another design that works for all screen sizes.

Users Expect a Great Mobile Experience

Designing strictly for desktop and then scaling down for mobile might get you by, but users are increasingly becoming more accustomed to a stellar design and experience in the mobile apps they use. When they come across a website that feels thrown together on mobile, they will notice. And if the competition has a site that feels closer to the app experiences they enjoy, they’ll probably move on to those websites, meaning that you lose visitors and potential customers to your competitors. This survey reveals that 57% of users say they won’t recommend a business with a poorly-designed mobile site.

Your Competitors Are Already Thinking Mobile First

Your competition is likely already thinking mobile-first and if not, you have a chance to take the advantage with an increasingly mobile audience. Consider this statistic: in 2016, 51% of all digital ad budgets were spent on mobile. By 2019, that statistic is expected to grow to 72%!

Better Mobile Readability

One of the most common problems I see when a project does not set aside time to work on mobile mock-ups is that the typography and call to actions suffer greatly. The reason for this is that the large, 50-pixel heading that looks bold and beautiful on a desktop, looks comically large and hard to read on mobile. On the flip side, often perfectly readable body text and calls to action can be rendered too small on mobile. Take a look at the screenshot below to see the difference taking a bit of time to focus on mobile elements can make.

Hopefully, I have convinced you of the importance of mobile mock-ups. Remember, a website that is designed to adapt to all mobile devices saves you time and money. Don’t think of mobile experience as an afterthought. Keep it at the forefront of your mind during the initial planning stages of your website. Doing so will pay off later.

The post Why You Need Mobile Mock-Ups appeared first on WebDevStudios.

Visual Simplicity

Landing pages should be as clean and minimalistic as possible. Think Swiss design. The use of minimalism and white space allows us to focus 90% of the visual attention on the call to action (CTA), which is the lifeblood of the landing page!

When you are creating landing pages, remember that your calls to action should be very bold and strong. An overall simplicity can create natural contrast by helping CTAs stand out from the content and sales material. Take a look at these examples, and it’s pretty clear that a more minimalistic approach helps you focus on the messaging and CTA and promotes action more effectively.

Eye-catching and Pithy Content

Landing pages are not the appropriate setting for a blog-style amount of content. You’ll lose the users attention quickly if you don’t engage them. Content should be short and to the point, with headlines that are catchy and draw attention to the main CTAs. For example, look at the difference between these two examples; which catches your attention more?

Call to Action Text

The actual call to action link or button text should have just as much thought as the heading copy. For example, you may be able to significantly increase your conversion numbers simply by changing your CTA copy from “Sign Up” to Sign Up Free.” As you go through the process of creating landing pages, consider the words you’re using. If your button has drab copy such as “Learn More,” you’re almost certainly missing out on conversions. Opt for something more persuasive that also indicates a small amount of urgency. It should encourage action from the visitor by using words like “Get Started Now” and “Start Exploring.”

Sharp, Beautiful Media

Just like successful songs need a catchy hook to get stuck in your head, your landing page should have some type of graphic to help hook the user visually. This can be a beautiful photo (custom photography is a million times more effective over stock photos, by the way), a well-executed product shot, or a custom graphic or illustration.

It’s important to determine which is appropriate for your brand and the goals of the landing page. For example, if your target audience is hip 24-year-olds in New York City, a cool abstract illustration or graphic will work much better than a landing page targeted to 45-year-old blue collar workers, who would probably benefit more from a clean product shot or photo.

Even if you don’t have a physical product, you can always hire a designer to mock your product up into a more real-world design to help connect with users. For example, this product shot is for an eBook, but because it’s mocked-up in the form of a physical book, it builds trust that it’s a legit product and helps catch the visitor’s eye.

Use Testimonials and Real People

Even if you only have one or two, featuring real words from real people can help create a more personal connection with your users. It’s been proven time and time again that showing real people on product and landing pages helps to increase conversion numbers. Highrise decluttered their landing page, and by adding prominent testimonials and pictures of real users, they saw their conversion rates skyrocket.

Many, many websites overlook the essential elements of landing pages. Just by following my recommendations, you can easily stay ahead of the competition, appeal to your visitors, and increase your conversion rates. Your website exists to make your business a success. Guarantee that goal by creating landing pages that work.

The post 5 Tips for Creating Landing Pages That Work appeared first on WebDevStudios.

Break It Up!

Breaking a long form up into chunks can help make it easier for users to fill out and focus on one block of content at a time. This can also greatly benefit users who may suffer from conditions such as dyslexia or attention/comprehension issues. This approach has the added benefit of making the form less intimidating or daunting and it looks better visually, too.

The two most common ways of approaching this technique are to either break the form up into sections on one page, with clear separation, or to break the form into multiple pages. A really good example of this can be seen on our client’s site Loveisrespect.

Less Is More

Simply looking over your form fields and identifying fields that can be either combined or eliminated can greatly help the user in filling out the form. For example, instead of having a First Name and Last Name field, why not combine these into a single Full Name field? Do you really need both Cell Phone and Home Phone fields? Could you also eliminate the Surname field? These types of questions are great for reducing the form length!

Create Conditions

My final tip is to show form fields conditionally. For example, if you have a section of the form asking about children, why not first have a radio button asking, “Do you have children living at home with you?” and if the users select “Yes,” then you conditionally load in the extra fields related to that. Most modern form builders allow you to do this very easily. We use this tactic on almost all of our clients’ Gravity Forms.

These tips are truly simple and applying them to the next form you design and add to your website will go a long way. A well-designed web form will not only enhance your website’s UX and strengthen its accessibility, it will also increase conversions, turning website visitors into customers.

The post 3 Tips for Proper Web Form Design appeared first on WebDevStudios.

You can think of Style Guides in the same light as the more traditional Brand Guidelines. In fact, they will normally include at least baseline information from the Brand Guidelines themselves (as long as the organization actually has some branding information). Where the two diverge are that Brand Guidelines normally only include which fonts should be used, basic color palettes, and logo usage. Style Guides, on the other hand, go far more in depth.

Take a look at a section of the WordPress Brand Guidelines for an example, and compare that with the screenshot from a Style Guide we built for one of our clients.

Brand Guidelines provide good information and help to ensure brand consistency across different mediums, but when it comes to actually building a product like a website or app, it leaves a lot of room to the imagination—a little too much room.

Style Guides go beyond basic color, font, and logo usage to provide a very detailed road map of how commonly used website elements should look and be used, such as buttons, form inputs, navigation systems, headings, body text, etc.

Another great thing about Style Guides is that they help us create a visual language for your product. Take a look at the screenshot below where the two sections have different icon styles, fonts, and typography. It’s not a huge difference, but it’s enough to make the page look unprofessional. Now, multiply that across 40-60 pages and multiple sites and you have a pretty big problem on your hands. This is especially true if your goal is to position yourself as a professional and trustworthy business (remember, people are wary of poorly designed websites).

Style Guides are normally created in whatever design program the rest of the product is built with, such as Sketch or Photoshop. They can also be converted to code and used to rapidly piece together new pages of the site without even creating full mock-ups. There’s a great post on our blog about the difference between Style Guides and Pattern Libraries, which goes into more detail about using code-based Style Guides (Pattern Libraries).

Later, we’ll touch on how you can harness the power of these Pattern Libraries without investing the time and money into building a full-fledged Library.

Now that we know what a Style Guide is, let’s talk about why your organization needs one and how you can save time and money by employing them.

Why your company needs a Style Guide

Style Guides offer two incredible benefits to your organization—the ability to create a consistent look and feel throughout the site, and a tool which affords designers and developers with a way to easily and quickly create new pages for your website or app.

Let’s dig into these two benefits.

Quickly Create New Pages and Features

At WebDevStudios, we provide each of our clients with a complete Style Guide. Some of them have even said they use them internally to make sure print materials, internal documents, etc. all have a consistent look. Most of our clients will take advantage of the Style Guide in the browser.

We provide clients with a robust and modular “blocks” based system for building out new pages of their website. You can think of it like a Page Builder, but much more user-friendly and with far superior performance (Page Builders can often produce nasty code and slow your site down).

This system allows clients to piece together a new page for the website in no time at all, without having to focus on the design of these elements (remember, the blocks come straight from the Style Guide). Now, instead of having IT code a new page, or hiring an agency for a one-off job, clients can easily build them out within minutes.

Visual Consistency

Imagine if large companies such as Microsoft and Apple didn’t employ Style Guides across their various digital properties. They may have several in-house and outsourced teams that work to create new designs for them, each bringing their own “style” with them. The Style Guide forces these teams to work within a set of constraints to ensure each page has the same baseline styles.

But won’t Style guides make every page look templated and boring?

At first glance, you may think style guides are essentially Lego blocks for constructing new pages, which may create a boring experience. And while they do afford us with a modular system for picking various pre-made blocks of styles (like Legos), this doesn’t necessarily mean every page will or should look the same. It’s just like how a “Star Wars” Lego set looks a lot different than the “Jurassic Park” set.

There are definitely times when you will be able to simply pick pieces from the Style Guide and assemble a new page, and that’s one of the benefits. But there will always be certain pages of your site that are more important and will require art direction and dedicated mock-ups. Think your homepage, the product page, careers page, etc. With these pages, you want to tell a story and really engage with users on a deep level. That can certainly be accomplished with the Style Guide, and chances are, you’ll still use many pieces of it, but these are the pages where you can truly provide a unique design (while staying within the bounds of the Style Guide).

A good example of innovation through a set of constraints can be found in Jazz. In 1959, Miles Davis gathered several of the best Jazz musicians together into a tiny studio to record the innovative record Kind of Blue. The way Jazz was played at the time was very sporadic, with notes flying up and down the entire musical scale. We know it as “bebop.”

Davis wanted a new approach for this record and instead had the musicians play within a set of constraints–only a few scales and modes–a small box on the guitar neck instead of the entire neck. The resulting record would change the way Jazz was played forever and is largely considered a masterpiece.

When we stop thinking of constraints as limiting and look at them as a tool to innovate with, Style Guides can help us accomplish some pretty cool things.

Go get your style on!

So hopefully by this point, you have a good understanding of the benefits Style Guides can bring to your organization and are ready to get started on your very own. If you’d like some examples of more great Style Guides online, I’ve created a brief list of some of my favorites:

• U.S. Web Standards
• Mailchimp Pattern Library
• Lonely Planet Style Guide

Let us know in the comments if you have any great examples of Style Guides you’re a fan of or any other tips you use to ensure visual consistency in your projects.

The post Why Your Organization Needs a Style Guide appeared first on WebDevStudios.

As with any WordCamp, the highlight for me was engaging with the amazing community, reconnecting with old friends, and making new ones. We had a great venue – the North Carolina State Engineering Campus, combined with some spectacular spring weather. It didn’t hurt that there was a taco bar at lunch, either.

I finally got to check a big item off my bucket list: getting to see Chris Lema speak in person. He definitely did not disappoint. His keynote opened WordCamp Raleigh and got everyone pumped for the rest of the weekend.

His talk was titled “Seven Stories. One Point,” and each story he told was encouraging, whether you’re new to WordPress and feeling unsure of yourself, or a veteran in the community suffering from impostor syndrome.

There were several great talks this year, ranging from learning how to use Docker for your local WordPress development environment, to an introduction to WP-CLI, to a two-part REST API workshop. I even got in on the fun and gave a talk on maximizing your productivity.

You can read another great recap post by Ben Meredith, one of the WordCamp Raleigh organizers, over on his blog.

WordCamps are always a great place to learn and make new connections, so I always encourage folks to attend as many as they can. I actually got my job here at WebDevStudios because of a connection I made at WordCamp Raleigh way back in 2014. Be sure to keep an eye on WordCamp Central for upcoming WordCamps and say hi to one of our WebDevStudios peeps while you’re there.

The post Post-Event Report: WordCamp Raleigh 2017 appeared first on WebDevStudios.

Have you ever called your designer “a creative,” or asked them to just “use their imagination” when discussing new designs? Maybe you even came to them with a solution to a problem you hadn’t defined yet and asked them to make it look pretty. If any of those are true, it’s time to discuss the key differences between art and design, and why it matters to you and your company. Although art and design can look like the same thing, when you’re looking for someone to build your site with effective design, do the differences between design vs. art matter?

Art is open for interpretation

Art is subjective. Twenty people can look at a painting and give you twenty unique explanations about what it means, drawing upon their personal experiences and how the piece speaks to them.

Design is not subjective. Of course, one person may prefer the green button over the red button, but if the purpose of the button is to delete all of your photos, red would be a clearly better choice than green. There are hard facts based on data that support design choices and help inform these types of decisions, whereas artists don’t have to consider the goals of people looking at their art.

Design is more science and psychology than art. If your design has an interface flaw or doesn’t effectively solve a problem, twenty users will experience the exact same problem in the same manner. That’s because people always have a goal when they’re using a website or app; it’s nothing more than a tool to help them accomplish that goal.

Design is not created in a bubble

Art is created by one person, pouring her soul onto a canvas, drawing from wherever the imagination leads. Design has to involve other people. At the very least, a designer and a stakeholder. Design focuses on solving problems in a visual manner. That’s why when we see an infographic or sign in screen on an app, we immediately process it much differently than we would a painting or sculpture.

The very purpose of creating art is different from the purpose of design. The artist wants to express their point of view to the world, while a designer strives to connect the business goals and goals of the user in a visually pleasing and simple way.

We interact with design

Most of the time we don’t directly interact with art. We can admire it and contemplate it’s meaning, but for the most part, it’s a very passive activity. Think about how differently you would engage with a piece of art hanging in a gallery versus filling out a signup form on an app–two completely different activities with completely different goals and outcomes. This is why when designing for the web and mobile, we must constantly ask ourselves how we’re helping the user accomplish their goal, not how we’re going to make it pretty. Don’t get me wrong; interfaces can and should be attractive, but a beautiful app that’s confusing to use is far less useful than a mediocre design that’s well-planned and executed.

So now you should have a clear idea of the differences between these two ideas. They are both essential to us as humans, but we should always take care to remember these key differences between them.

The post Design vs. Art: What’s the Difference and Does It Matter? appeared first on WebDevStudios.

Watch the tone

Don’t use negative or condescending language in your 404 message. You may think you’re being witty, but a user with limited time has just landed on the wrong thing and the last thing they want is your sass.

Don’t blame the user

Messages that try to make it sound like the user made the mistake (even if they did) aren’t helpful to anyone. So instead of messages that make assumptions like “Looks like you spelled something wrong,” try using a more positive and helpful approach, with something like, “Looks like we couldn’t find page–try searching again or contact support.”

Don’t give the user information that doesn’t help them

Not much needs to be said here–server error names and codes don’t help the average user.

What is the average user going to be able to do with that information?

So now that we know what not to do, let’s look at some positive steps we can take towards a better UX for our 404 pages.

Provide more than just a message

Having good tone and a helpful message is a great start, but what about giving the user some options? We can give the user more options and thus more chances of finding what they were looking for. Try including a search box and some links to helpful or popular pages. Also, don’t forget that there’s no reason you can’t make a 404 page look nice, too! Which of these pages do you think users would rather encounter?

Add a little humor (when appropriate)

Adding a dash of humor to a normally frustrating situation can often be enough to encourage the user to stay on your site and give it another try. Be sure to use your best judgement, though; a humorous 404 message is probably not the best idea for a mortuary website.

Track your 404s

If you’re already using some kind of analytics on your site (as you probably should), why not track your 404 pages? If you notice a lot of people coming to it from another page specifically, that can give you an idea that you need to check that page out as there may be a bad link or some other UX hurdle to address on that page.

Those are my tips for sprucing up your 404 pages! Please let me know if you have any tips I didn’t cover by posting in the comments section below, and hey, what are your favorite 404 pages out there? Link us up!

The post Creating Better 404 Pages appeared first on WebDevStudios.

Don’t simply default to the latest trend.

I’m sure you’re thinking something like “Well, no duh! That’s nothing new!” but what I want to do is challenge you to think about these two things a little differently than you normally would.

Putting the focus on the user should always be paramount, but don’t just stop at, “It works for our target users. Ship it.” If you really want to create something, like MailChimp, that will be a joy to use and have people talking about for years to come, you need to go a few steps further to make sure you can say, “It works and our audience loves using it.” It’s the reason most of us would probably choose a BMW over a Ford Focus; one looks fine and gets you from point A to point B, but the other looks beautiful and is a joy to drive.

So you want to focus on the user and give them a wonderful experience, but how? One of the best ways you can accomplish both is to simply not default to whatever the latest web trend is. If this sounds kind of vague, allow me to demonstrate:

The site on the left defaults to using most of the trends I’m going to talk about, such as a slider with generic stock photos, clip-art, or stock graphics, and a basic, slightly messy grid.

Contrasting this, the site on the right uses a grid of stories on top that contain more interesting photos that don’t look staged, custom graphics that are interesting and pique interest in the articles, and a more compelling, tidy grid.

Most people would agree that the site on the right is the BMW, but how can you achieve the same effect with your site? Let’s go through the most common web patterns today and look at some alternatives, or anti-patterns.

Stock Photos

The scourge of the internet…sort of. Stock photos have become become practically synonymous with bad or generic design, and not just with web designers. There are many websites and memes making fun of just how bad a lot of stock photos are, including this hilarious parody by Vince Vaughn poking fun at the popular web trend.

We can’t just swear off pictures, though. Imagine the internet without funny cat pictures—horrid, right? Well the good news is that there are plenty of alternatives.

Anti-stock photos

In recent years, a swarm of anti-stock photo sites have popped up offering free or very affordable alternatives that are often less staged and better quality than their paid counterparts. Some of my favorites include:

• Death to Stock
• Unsplash
• Picjumbo

Custom Photography

You can’t beat going with custom photos on your website. Most cities have an abundance of local photographers ranging in prices that you can hire to take photos of your team, products, etc. and you can feel good about helping a local artist/business out in the process!

Stock Icons

This one is a bit different from stock photos; most modern icon sets actually look good. The problem is that web designers have been relying on them so much that they rarely offer anything new or unique to the website. If you’ve fallen into a rut of just sticking your favorite stock icons in every design, here are some alternatives to help your design stand out:

Custom Icons

You guessed it—going custom! The main benefits of creating custom icons is that you can truly make them match the brand and ensure your clients is getting something unique from their competition. The downside of course, is that it does add a decent amount of time to the project.

Customized Icons

An alternative that I like is to take some of my favorite icon packs and customize them to the project. Take a look at the before and after of these icons. I simply added some color from the brand and an extra design touch with the lines and waves to create a more personalized feel. These extra elements even add a little more descriptiveness to the icons as well.

Animated Icons

Another option is to animate your icons with AfterEffects, or even better, CSS. This option can help create a more dynamic, interactive feel that’s more eye-catching for key information.

Layout

Layouts on the web have gone through a lot changes over the years, from main content areas with prominent sidebars to the “bands” of full width content seen today. With the advent of Flat Design, our sites have cleaned up a lot, but in the process we’ve also boxed ourselves into a, well, boxy design trend.

Getting Creative

Jen Simmons has been a proponent of finding information for our designs and layouts in places other than other websites–specifically, magazines and books. These print mediums offer an insane amount of diversity and creativity, and while we can’t achieve everything print can with the web, we can certainly use it as an influence to create some more interesting layouts and effects. Take a look below, normally on the web, floated images and text appear pretty blocky:

…but watch what happens when we apply one CSS rule, shape-outside: polygon; to our image:

A simple CSS change and we have a cool new, magazine-like layout. View my CodePen for this here.

Summary

We covered a lot of common patterns and some alternatives to them, but there are many more out there and many more to come. So go try some of these tips out on your next design and let me know how it turns out for you!

The post Web Design Anti–Patterns: Setting Your Site Apart appeared first on WebDevStudios.

Let’s take a look at some simple tips you can incorporate into your workflow that will have you moving between Photoshop and WordPress like they were the same program!

Planning

As with all things in life, planning before you take action will inevitably save you time and frustration in the long run. When you’re dealing with multiple projects, clients, and team members, this is even more true. Having a set routine for dealing with each of these projects will have you moving faster and faster with each new project.

So what should you plan for? Here are a few general WordPress–specific things to plan for, but always be sure to evaluate these on a project-by-project basis.

Plan for real world situations

Sure, the design looks amazing with those two word titles and crisp, retina-ready placeholder images, but also try mixing in content from the client’s current website if she has one, or if you’re designing a commercial theme, just make sure the design won’t break when a user creates a long title or forgets to add an image to the post.

Plan for all kinds of content types and containers

WordPress is a very flexible system and allows for sidebars, widgets, custom post types, and many forms of variable content so making sure your design accounts for these situations is imperative to a great theme.

How will content be entered for each section? Most of our sites are a mixture of traditional pages, posts and custom fields built using CMB2. Try to make sure the design will make sense and be as easy as possible for the user entering content.

Communication

Keeping communication open instead of getting locked into working through the design of the theme is key. Talk with project managers and stakeholders to ensure you know what the expected functionality is that you’re designing. You can really impress the client by showing them animations, transitions, and user-flows between pages by using an app like InVision, and you’re also making sure that whoever is developing the site doesn’t have to guess about what each piece is supposed to do or look like when it’s interacted with.

If you won’t be developing what you design, keep a steady stream of communication with your team to make sure that what you’re producing in Photoshop can be implemented in code within your budget. Often you’ll find that you need to come up with a solution that will be easier to code but looks just as nice as the previous one.

The PSD

Photoshop is truly a beast of a program, with most web professionals only using a small set of its features. But with great power comes great responsibility, as everyone’s favorite neighborhood spider would say. How can you ensure that the developer (whether it’s you or someone else) can easily navigate the PSD to find what they need? Here are some tips I’ve found quite useful over the years:

Take advantage of Photoshop CC Libraries

Use this as your theme’s style guide, where you define colors, typography, and other commonly used elements. Defining these early on and using them instead of the old “duplicate layer” method or creating from scratch each time will not only save time but also ensure a greater level of consistency through the many pages and sections of the site. It also makes it easier for someone else to come along and add to the theme.

Use Photoshop’s Generate Assets exporting command

This will allow you to quickly export any bitmap images inside your layers, which saves the dev a lot of time and is more accurate than the old “slicing” method. You can access this by going to file > Generate > and checking “Image Assets” as shown in the screenshot. This has the benefit of being faster and more accurate than the traditional slicing method used in the dark ages of web design (2002-2007, approximately).

Descriptive names and good organization

Keeping a neatly organized document is good for the sanity of everyone on the project. One of the best things you can do is to simply give descriptive names to layers and groups. In the image shown, which layer group and layer name makes it easier to see the purpose of and connection with the rest of the design? Pretty clear, huh? Even when you’re under a tight deadline, try to make time to properly name and organize your layers–you’ll be saving a baby deer every time you do (or at least keeping the office bottle of Advil less depleted)!

Optimize your images–do it for the children!

Whether you’re using a preprocessor like Grunt, or using an optimization service such as WPMU Dev’s Smush Pro Plugin or TinyPNG, it’s important to provide optimized images when transitioning from Photoshop to WordPress. This will help ensure the end user has the shortest wait time possible when loading your website. Nobody wants to wait ten minutes on your cat images to load over their 3g network while they’re trying to find out Mr. Biffle’s Top Ten Favorite Hiding Spots of the Week!

Those are my tips and best practices for moving from Photoshop to WordPress, but I’d love to hear some of yours. Feel free to drop them in the comments below!

The post Design and Photoshop for WordPress: Tips & Best Practices appeared first on WebDevStudios.