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.

Step #1: Understand the Value Proposition.

It’s critical that you understand value proposition and the competitive context of what ever you are trying to sell. For this exercise, I will be creating a Landing page for CMB2, a popular WordPress plugin created by the rockstars here at WebDevStudios. The purpose of the following steps is to create what we’ll call blocks from a hero, features, and a call to action. We want to communicate the value prop by displaying distinguishing features, and have a call to action linked to the download in the WordPress repo and Github repo.

Step #2: Start with Sketches.

My recommendation is to always sketch out your ideas. If you’re too busy to sketch, then you’re too busy to get it right. Many designers go straight into Illustrator or Photoshop. While that may still produce an acceptable result, don’t kid yourself–going straight for the mouse is not the most effective way to get to a design solution. You must discover the solution and that takes research driven by sketching; you must thoughtfully go through the value prop and encapsulate what you believe will get users converting. You need a broad set of ideas to choose from. You can get those ideas quicker by sketching them.

Need more convincing? Think about it from the perspective of different industries. Sketching is a requirement in architecture, print design, industrial design, film, animation, photography, and alike, because this form of creative processing and brainstorming is known for being effective at laying groundwork for the end result. Throw on some solid tunes, grab your pencil or pen and start sketching. Make these sketches exploratory and loose.

Here are my sketches starting with the hero and ending with the hook:

Step #3: Have some Photoshop manners, will ya!

The next step is implementing some of these blocks in Photoshop. Make sure to use smart objects when needed. As well, anything that is a vector will eventually be an SVG so make sure to prep that as smart objects that connect to illustrator. Time is of the essence, but that doesn’t mean work should ever be sloppy. Assume others will review your PSDs, so etiquette is a must. Name your layers and group stuff in folders, etc.

We are going to use 320 pixels as our baseline number. To create the different sizes (width) of the blocks, we will be using 320px as a multiple. For example, 1280 / 4 = 320, which means the hero will be 1280 x 960. I created a document and called it “hero.” Let’s set up a twelve column, 960 grid. Give twenty pixels of gutter.

The hero will have a main message “Hello, I am CMB2,” and secondary supporting copy. We’ll use what’s already in the repo as the supporting copy, which is “CMB2 is a metabox, custom fields, and forms library for WordPress that will blow your mind.” Also, I was thinking about creating a droid character called CMB2 as an homage to R2D2 of Star Wars fame.

In total, we are going to create four blocks. I am creating a hero, download stats, features, and the call to action. Take your time on the hero. While all blocks are critical, the hero starts it all–and is the very first impression you make on a visitor.

Step #4: Connect the PSD dots the right way.

I created a new Photoshop document called “CMB2-lander.” I made this document 1600 pixels wide and a to-be-determined height depending on the sum of all blocks. You will be placing linked blocks in this page–smart objects only, please! Label your layers–always. This is where your header and footer smart objects will go. Here’s all the blocks, in context, in the comp:

Step #5: Design what you can build.

If you are the unicorn I know you are, you design like a boss and can build it yourself. But, before we go further, it’s important to make sure that you can, in fact, build what you design. Don’t go rogue and design something that you (or someone else) can’t create. That doesn’t mean play it safe; that means know your craft well enough create things that can be executed. It will force you to level up–both by upping your awareness and expanding your skill set.

Here’s my toolset.

The tools I use to build a website are a pencil, a pad, Terminal, Sublime, MAMP Pro, SourceTree, using a starter theme like WD_S, and, finally, life. Day to day life is the most inspirational place I know, and I tap into it for ideas more than anything else. Look up at the sky. Look at the stars…we are surrounded by things both good and bad–by things that are empty and full of wonder. Tap into your creative center and design something wonderful, even if it is just a landing page. If you do it right, it’s not just a landing page; it’s art.

Pay attention grasshopper!

“Don’t concentrate on the finger or you will miss all that heavenly glory!”

Creating a product landing page can be easy when you have a system that you go back to–over and over again. Just like a corporation or small business, systems are critical. Over time, I came to understand that value drives visuals in the most successful landing pages. A landing page’s beauty is purposeful and there is no dissonance between message and design. This isn’t about design just for the sake of design! You’re telling a story by tapping into your skill and your surroundings. This is about knowing your craft in order to stimulate the behavior you want from users–conversion.

May your users convert the heck out of your next beautiful landing page!

A quick note from your resident editor: This post was created and written by Simon before he moved on to greener pastures, but it was so good we still wanted to share it. That said, please take a moment to follow Simon @SimonWebDesign and check out his website. He’s an incredible designer and colleague, and if you like this post, you’ll probably like his other work too. 

The post 5 Steps to Creating a Better Landing Page appeared first on WebDevStudios.

I’ve known for awhile that I wanted to make Sketch3 part of my toolkit, but also that I will have to deliver PSDs for the foreseeable future. Creating a Sketch file concurrently with a PSD makes me hunch my shoulders in despair – I hate duplicating work (who doesn’t?). And I don’t really have a lot of time to spend on training myself on yet another product (who does?). Yet here are a few ways I’ve found that Sketch makes my life easier while also saving me time when I’m working with Photoshop.

START WITH PLUGINS

When I first tried Sketch I was dubious about using another vector program when I already had Illustrator available. Thanks to the work of designers before me, I quickly learned that the power of Sketch lies in its extensibility, and through the magic of plugins I created my own Sketch3 app that works the way I need it to – and is much more than a vector drawing app.

The master list of Sketch3 plugins available on GitHub.

The thing I like best about Sketch is that it doesn’t get in my way when I want to…sketch. Part of why I have clung to Photoshop for so long instead of moving to Illustrator or using another vector program for my interface sketches is that I have a lot of muscle memory invested in that old clunky PS interface and when I want to jot an idea down quickly, I do it in a random PSD file. It’s a bad habit, but it’s still a habit, and I wanted Sketch to replace it.

Now when I have an idea, I can draw shapes that pre-fill with random images. I can create a style guide artboard for typography and color palettes. I can export my color palettes and typography styles as Sass variables that plug right into my theme stylesheets. I can import text data from an existing WordPress-based site using JSON (so handy for redesigns!). I can group symbols so that editing one button modifies all of them, and I can create buttons that dynamically resize based on the amount of text they contain.

This has the power of turning my quick sketches into living designs that I can use as the foundation for a web or app interface project.

CREATE IN SKETCH, ASSEMBLE IN PHOTOSHOP

Sketch can export layers to EPS or SVG format, and Photoshop can link to EPS files as Smart Objects, so when I’m sketching, I try to think in terms of creating objects in Sketch that I can link to as Smart Objects in Photoshop.

If I’m drawing shapes and icons, I export SVG versions for immediate use in a theme, and export EPS versions for immediate use in a PSD.

My Sketch files look pretty close to the final Photoshop version, and the only work I duplicate is copy/pasting text from Sketch into editable Photoshop layers, using my Sketch style guide to quickly set up text styles in PS. I create icons, buttons, and gradients in Sketch and export them for final layout and alignment in Photoshop.

CHANGE YOUR THINKING

Instead of opening up Sketch with the goal of creating a final deliverable design, I use Sketch as my style guide creator with an eye toward quickly developing layouts, color palettes, typography styles and symbols that can be used to create a beautiful Photoshop file quickly, with the amazing benefit of having color and typography data immediately available for use in my theme stylesheet. Sketch becomes the glue between my PSD deliverable and the final product, and I’m saving time instead of spending hours in Photoshop creating bitmap data that I have to recreate in a stylesheet later.

If you want to use Sketch (or are already using Sketch!) but are required to deliver designs in PSD format, I hope this glimpse into my workflow helps you tailor Sketch with plugins to be the design tool you’ve always wanted.

The post Integrating Sketch3 Into Your Photoshop Workflow appeared first on WebDevStudios.

Here is a list of features (which I’ll also cover in further detail later in this post):

• 36 user interface patterns available out-of-the-box
• An auto-generated colors swatches page, which watches the _color.scss for changes, and recompiles as needed.
• A Typography page, which allows you to quickly test out typographical choices.

36 Patterns, and then some

Out of the box the Pattern Library contains thirty-six common UI patterns, and they’re organized in to the following categories:

• Accordions
• Carousels / Sliders
• Data Visualization
• Effects
• Forms / Fields / Inputs
• Hero / Banner
• Layout
• Media
• Navigation

Each pattern was written to meet our internal standards, as well as the WordPress coding standards. Also, each pattern leverages as much of wd_s default CSS as possible. Let’s look at an example pattern with only the default wd_s styling applied.

As you can see each pattern contains a bit of meta information, like original author, date added, and a brief description, as well as the HTML should you chose to use it in your WordPress theme. Pretty neat, right?

Should you also choose to extend the pattern, we’ve organized all the associated Sass partials in a corresponding /patterns/ directory. So we can modify the example pattern above by turning it on (all patterns are off by default) in /assets/sass/patterns/index.scss with $use-vertical-bar-chart: true !default;, and can modify the partial (/assets/sass/patterns/_vertical-bar-chart.scss) to your heart’s desire, and see the results instantly in the Pattern Library.

You can even extend the original HTML, if you like, as the whole Pattern Library runs on Jekyll, the static site generator. Just open up the corresponding pattern in the Pattern Library’s /src (or to continue our example: /pattern-library/src/_patterns/vertical-bar-chart.html).

Color swatches

We thought this would be a nice bonus, as it ties in to the concept of creating a Style Tile. Whether you’re a developer or a client, often times it is useful to see a color palette, so we put in an auto-generated color swatches page that watches the _colors.scss Sass variables partial, and regenerates when any changes are detected. This gives us a single point of reference during discovery, scaffolding, and development to see what colors are available, as well as avoid overly extending existing colors.

wd_s Pattern Library 2.0 – What is in store?

We’ve already got a bunch of improvements for the next version, but first we want to get some mileage and squash some bugs. Please help us test it out by checking out the feature/pattern-library branch (git clone -b feature/pattern-library git@github.com:WebDevStudios/wd_s.git) of wd_s, and let us know what you think.

The post Introducing the wd_s Pattern Library! appeared first on WebDevStudios.

In the beginning, there was man

Okay, so maybe not THAT far back.

In the beginning, there were mockups

That’s better.

We’re all familiar with the concept of mockups. We (or one of our more-talented designers with awesome skills) provide a PSD mockup of one, or several, pages to the client. It’s a representation of what the website will look like, and the client is free to pick at and scrutinize the smallest (and largest) details of said mockup. “Move this over a pixel!” or “Bump the font size one point up!” may sound like simple changes, but what if you’ve got ten different PSDs and the client wants to see the change reflected in all of them? Well, I’ll tell you what: you get a lot of wasted time.

To me, that just doesn’t fly. I’m all about efficiency when I work. I sit down, I get in the zone, and I start working away with as few distractions as possible. But the mundanity of updating several mockups for a simple change just to sate the client just lacks appeal.

So, what do we do? Instead of telling the client to shove it or to tell them to imagine the shifted pixel or font size, maybe we should just get out of the habit of providing full-blown, full-page, or sometimes several-page mockups.

It’s a Small, Small, Small, Small World

What blog post about modular design would be complete without referencing this article by Daniel Mall about the grace and ease of element collages. Of course, that post and line of thinking may not have even come to fruition without Samantha Warren’s article about Style Tiles in 2012.

These two heroes of the design process got us thinking outside of the mock and in a more focused way. Not only have they introduced processes by which we can give the proper amount of attention to detail necessary, but they’ve also increased our productivity by cutting down the amount of time we spend (waste?) on creating full-blown mockups for clients. In this game, saving time means saving money and I think we’re all on board with that.

This does mean, however, a radical shift in the way we present our ideas to the client. I fully understand that some clients may be a bit apprehensive to accept element collages over a full-page mockup. After all, the latter is something they’re used to. It’s a comfort food. It’s what they know and it’s what they expect, and if it’s not done just right they’re going to be left with a bad taste in their mouths.

On the flip side of that argument, though, the clients who come to us for a project aren’t the experts in design and development. After all, that’s why they’re coming to us. I’m not going to write a letter to Sony or Microsoft and give them my personal feedback on how to improve the features or looks of the PS4 or Xbox One. I’m just a consumer and they’re the pros; they’ve done all of the testing to ensure that the final product I receive is the best it possibly can be (for the most part).

By the same token, shouldn’t we be taking that kind of responsibility with our work? If we know that something new is on the horizon, or even here already, shouldn’t we be the ones presenting those new ideas to our clients? We should be on the front lines of innovation and education! They trust our knowledge and our skills enough to hire us, so they’re going to trust us enough to at least listen to the new processes and workflows that we’re ready to propose.

Yes, it could be a bit of a shock to the senses for client to receive an element collage instead of a full-page mockup. They would see all of the elements of a website, but they may not actually make sense as far as placement, positioning, or even structure. Again, though, that’s where we come in; it’s OUR job to explain what they’re seeing on the screen in a way that they will understand to ensure they’re not confused or freaked out at receiving what appears to be a bunch of random elements crammed together. We’ll have to explain to them that these are the elements that will make up their website and that these styles and elements will be used throughout the site to retain uniformity, cleanliness, and ease of use.

Taking The First Big Small Step

Think of it this way: if you make a list of things to do over the weekend, you’re going to want to be as granular as possible. If your weekend task is to clean the house, your checklist is going to be a lot longer than “Clean the house.” You’re going to separate your tasks into smaller, more specific tasks. You’ve got to vacuum the living room, sweep and mop the floor in the kitchen, clean the toilet, clean the tub, etc. You’re going to make sure you nail every item on that list, and you’re going to know you’ve completed everything you set out to do once you’ve crossed off every one of those tasks, otherwise you’re going to forget to dust the ceiling fans or clean that weird crevice between the fridge and the wall.

This is the way we need to work as designers. We shouldn’t take a mockup for a single post or the home page and begin a task called “Create Home Page Template.” We need to break that down because without doing so our focus would be all over the place. We’ll go from looking at the header and navigation to the sidebar, over to the content then down to the footer, back up to the header because we may have missed something the first time around, and so on and so on.

With a full-page mockup, we can also get lost in the sections or individual elements because, now that we have a thing which LOOKS like a webpage, we’re also looking at it as a webpage instead of handful of separate elements. With element collages, though, that kind of foresight is built right in from the very beginning. We take a look at the collage and see JUST the header. We see what a widget in the sidebar should look like. We see what buttons and links should look like. We’re seeing everything for what it is: a single piece of the puzzle rather than looking at the entire puzzle and trying to pick out the pieces we feel hold the most importance.

In addition to the specificity with which we’re able to see our elements, we also get to eliminate a major headache from our design process–pixel perfection. I know that phrase probably sent shivers down your spine, but please just bear with me for a moment. PSD mockups are not perfect, okay? They’re never perfect. They’re never going to be perfect. Maybe you want fifteen pixels of space below a widget, but for whatever reason you accidentally leave an extra five or ten pixels below a single widget in the mockup. Should that actually be fifteen pixels, or should it be twenty-five pixels? Why do some posts have ten pixels beneath them and others have thirteen? What does it all mean?!

In short, it means that full-blown PSD mockups are dumb and that we should move on from them. We’re wasting our time counting pixels in mockups, and the client is wasting time doing the same thing and then following up with questions about why the spacing is different in the browser than in the mockup. We know what we’re doing here. We’ve established that. So rather than worrying about the space created in Photoshop, which may be off a few pixels here and there, why not worry about the space of the elements where it actually matters most–in the browser.

If we’ve moved on to element collages, the client and team will already know what each element should look like and this is where the worrying should stop. Once the element collage is given the okay, we should be on our way to creating beauty in the browser where these items come to life and things like spacing, interactivity, and usability are much more tangible.

I Thought This Was About QA?

If you’re still with me, you may be wondering where the talk of actual QA comes into the game. I’m about to give you a Shyamalan twist–we’ve been QA’ing the entire time!

I know that right now you’re shouting loudly at your screen, “But I thought the QA process began with a really cool spreadsheet to track all of the potential bugs and issues!” and I just want to tell you to relax because you’re gonna freak out your neighbors and pets. Don’t start acting like a crazy person now; we’re almost done!

It is true that my formal QA process begins with a spreadsheet where I can track the woes of a project. That’s the formal QA process, though. We can really be QA’ing the entire length of the project, and with a modular design process like element collages we’re going to be that much closer to a clean, complete deliverable once the project wraps up.

Think back to my example about your house cleaning list. If you don’t track every task meticulously, then you run the risk of missing something. The same goes for the design process. If we get a blanket task of “Create Single Post Template,” then there is a huge chance that we can overlook some smaller element on that page. So, why not start small instead of big? Why not create fifteen or twenty tasks for a page template? A task for the sharing elements; a task for comments; a task for pagination…and so on and so forth. If you’re focused on these smaller items, then these smaller items are going to receive more of your attention. You’re going to be locked into making the pagination kick as much tail as it possibly can rather than it becoming an afterthought which can absolutely happen at times.

When you’re working in as granular a process as is possible, then you’re going to be the first one to scrutinize the items you’re designing and developing long before they even make it to the QA table. This means that, once we get to the QA process, we’re going to spend less time fixing bugs. In turn, this means that we can eventually eliminate a lot of time from the project that may have otherwise been spent on cleanup and fixes which, finally, means a faster turnaround and a cleaner overall presentation for the client.

We live in a world built for weirdos. Phones are getting larger and tablets are getting smaller. Screen dimensions are ever-changing and we can now access from our watches, refrigerators, and televisions. Everything around us is constantly changing and the way we access our information is perhaps changing the most rapidly of all. Why, then, should our design process be stuck in the mud, unshifting and unrelenting in a world that continues to grow and move around it? Clients and consumers didn’t clamor for smart watches or a million different sizes of telephones–the experts made it so and the public responded. It’s time for us, as the experts in web design, to do the same.

The post Getting Small with Modular Design as QA appeared first on WebDevStudios.