It's almost the end of the year, so we're starting to shift our focus on what's coming up in 2015. Based on some trends we saw from 2014, we can make a few educated decisions about what design trends we'll all be following in the coming year. If you have a website that needs a refresh or a redesign, you can be sure that many if not all of these elements will be present in your new web design.
1) Go mobile or go nowhere
Having a mobile friendly website is not an option anymore. The number of people accessing the web from mobile devices is steadily rising, making it standard practice to have a website that is mobile friendly. Get on the bus or get left in the dust.
2) Images & Video
Having amazing images and videos that are very prominent on your homepage is a simple and elegant way to make sure your website stands out. When it's incorporated into an overarching style and tone, it can be very powerful. In an increasingly visual society, images are going to mean more and more with each coming year.
3) Flat Design
Flat design refers to a way of designing an interface so that it does not give the illusion of having three-dimensions. This means that things like drop shadows, textures and gradients that are used to add depth to a design won't be as present as they have been in years past. Instead, the focus will be on a minimalist approach that uses simple elements of typography and eye catching colors.
Flat designs are also faster to load, making for a quicker and more responsive user experience.
4) Unconventional and innovative design
With such things like large images, videos and flat design, website designers are challenged to come up with designs that are user friendly, present important content prominently and present a smooth experience overall. We're going to start seeing some really great stuff as designers strive to flex with the shifting landscape.
5) Stories told through design
When you put all of these elements together, you end up telling a story about your brand through your design. Everything from the images, page layout, font choices and actual written copy is a part of your overall story that embodies your strengths and values as an organization. Careful attention must be paid to make sure that all of the elements are in harmony and reinforce your message together.
All of these trends are ones we have seen gain some momentum in 2014. We are excited to have had the opportunity to put them into practice and look forward to seeing how far we can push them in the year to come!
Here at GLAD WORKS we are quite proud of the way we approach our projects. We have developed a process that we use in just about everything we do, and at this point, it's so finely tuned that it's every bit as sexy and streamlined as a hot red racecar. Here's a little peek at some of the major points of our process.
Whether we're designing a mobile friendly e-commerce website or a simple postcard, our general work process is similar across all of our services. It's how we get to maximize our time, getting the right things done at the right stages so that projects are finished on time, every time and don't go over budget.
Before any contracts are signed, we make sure we have a very clear picture of what our clients are looking for. That way, all of the project details and pricing are agreed upon and fine-tuned before we even seal the deal because nobody likes surprises. We don't like them and you don't like them, so we avoid them as much as possible.
Sure, things may change a bit here and there as we move along, but clients are always in the loop and very involved in our process. We see our work with you as collaborative and we want you to give honest feedback. In return, we will be honest with you if we think something is not in your best interest.
Getting to work
Once we've had our kickoff meeting (a meeting in which we do NOT kick you) we get to work on design/copy/photos/web development—whatever the project might be. But we don't race ahead to the finish line after we meet!
We take a few pit stops along the way, checking in with you at key points to make sure we're headed in the right direction before proceeding. Sometimes this step-by-step process seems a little overly cautious, but in the end, it saves a ton of time and money performing edits and guarantees your satisfaction since your are involved in every stage of the project.
When we have produced our final version, we send it over for your review one last time and get your sign off before handing it over to the printer, making a website live, posting a blog post, what have you. We go over it again too, just to make sure it's what we had all envisioned it to be.
We guess you could call us a well-oiled machine!
You may not know this, but there is a rather heated debate going on between writers and designers over how many spaces should follow a period. In fact, a long time ago a designer confronted our very own copywriter. She was informed that it was not correct to use two spaces after a period. Who. Knew. Apparently, to a designer, seeing two spaces makes them die a little bit inside.
So, in an effort to save the souls of designers (and the lives of writers) everywhere, let's tackle this subject. To double space or not to double space, that is the question!
Two spaces after a period, everyone does that right?
Even as this post is being written, double spaces are being used because: HABIT. When the post is done we go back and do a "find and replace all' to fix the egregiousness because it's very hard to stop what has become so automatic. Thumb hits space bar twice, what are you gonna do? The thing has a mind of it's own! It all started way back in high school typing class where we had it drilled into us that you need to have two spaces after a period. Remember your high school typing teacher? He or she would be aghast at this single space tomfoolery! What nonsense is this?
Evolution is a real thing
If you look at a style manual, you won't find one that doesn't specify a single space. Both the Chicago and MLA specify only one space, for example. But why have we been putting two for all these years? What gives?
As it turns out, the double spacers of the world are not wrong, per se. It's just that style has evolved in favor of the single space. This is due in part to digital typefaces, which have precise spacing already built in. Typefaces (aka fonts) are designed so that the letters take up a certain amount of space. Designers carefully consider spacing when they design typefaces, so to add an extra space after a period goes against the intentions of the person who designed the typeface. It kind of ruins their day. To a designer, space is an extremely precious thing. Don't fuss with it and they'll let you keep your face.
So, what now?
Well, since using a single space is now the standard, you're going to have to break your old habits. The adoption of that standard by major style manuals pretty much makes it a law. Of course, you won't get arrested or anything, but you'll totally get a stern look from a designer. Trust from those who know.
The purpose of this post is not to make you sad, double spacers. You're not wrong and you're not bad people or bad writers. You're more like fashion victims. Step away from the proverbial blue leisure suit and nobody will get hurt.
Our poor copywriter, knowing the rules full well, is still trying to break the double space habit, bless her heart. She's trying to be cool, GLAD WORKS friends. She's trying and taking it one day at a time.
Thank goodness for the "find and replace all" tool, that's all we're saying.
So tell us, do you double space or single space? Is this the first you're hearing of all this? Speak up in the comments below and for the love of all that is good and decent in this world, single spaces only.
Today we have a special treat for you! We’ve given you a glimpse into the lives of a graphic designer, a copywriter and a web developer, but today we bring you a glimpse into the life of a creative director. A creative director is the person who brings all the folks from different disciplines within a creative agency together to form a cohesive team. She is the keeper of the creative vision and it’s her job to deliver a great outcome to her clients. Here at GLAD WORKS, that person is the multitalented Gina DiSpirito and she wears many hats indeed (literally and figuratively).
A creative director is certainly someone with a strong artistic and creative vision, but she also needs to be a people person. First, she needs to be able to communicate effectively with her client and know all the right questions to ask so that she can fully understand their needs. She then interprets that information and brings it to her team in a creative kickoff meeting. Once the team hits the ground running with their agreed upon strategy, it’s her job to manage the different disciplines (design, tech, copy, photography, etc.) to provide quality control over concepts and projects and make sure everyone sticks to the same vision.
When she’s not busy supervising and inspiring her team or presenting concepts to her clients, she’s communicating with her account and traffic managers to make sure that deadlines are met and schedules are adhered to. She does this with multiple projects simultaneously every. single. day.
And, she has her own design projects that she works on as well.
It’s sort of like being the ringleader at the circus, only with less elephant poop and way more paperwork.
A typical day for Gina looks like this:
Wake up after only about four hours of sleep (if she’s lucky) to the sound of Bella and Dolce, the GLAD WORKS Chihuahuas, begging for their breakfast.
After the ladies are taken care of, she calls to check in with the office and starts looking at her emails. “Gee,” she notices, “only 150 emails while I was sleeping. Slow night!” Next, she prioritizes, sorts and answers as needed. Sadly for Gina, none of it is spam and it all requires her attention.
Once she’s answered her emails, she has her morning protein smoothie and gets ready to come into the studio. She puts on a jaunty hat and chooses coordinating outfits for little Bella and Dolce. With her husband Adam (our technology director) in tow, the whole family heads out for another busy day at the studio.
Once she arrives at GLAD WORKS and Bella and Dolce have done their visiting with each team member, it’s time to get to work. While the little ladies work on getting their beauty rest, Gina gets started on her projects.
On any given day, she jumps on multiple calls with clients and vendors, heads out for meetings, works on her own design projects, meets with the creative team to review work, heads creative kick offs, works with project managers and generally kicks butt.
Before you know it, it’s 4:30 and she hasn’t had lunch yet. Too bad, there’s another conference call in three minutes! Who needs lunch, anyway?
After work, when most people are heading home like zombies, just waiting until a decent hour to go to bed, Gina hits the gym for consecutive hour-long spin classes, 80-minute treadmill marathons or sessions with her personal trainer.
Once the gym is done, she and Adam finally head home, eat dinner, answer more emails and watch an episode of The Pitch or Shark Tank. Finally, she falls asleep only to wake up a few short hours later to Bella and Dolce’s desperate pleas for breakfast.
Clearly, it takes a special kind of person to shape and manage the collective creative brain of an entire agency while at the same time managing daily business operations. We get tired just watching her!
It’s always fun to take a look at what’s going to be the new hotness for the coming year! Web design has a lot of fun things happening in 2014 and we’re very excited about some emerging trends. But don’t confuse following trends with following fads. Fads are a flash in the pan, while trends stick around for years and evolve over time. Our designers put a lot of effort into staying on top of what’s new and what’s cool so that your websites are top notch and full of The Awesome. Let’s check out some possibilities…
Sweet fonts abound
You know what total typography geeks we can be, so it should come as no surprise that we’re so stoked about all the incredibly fun fonts that designers are starting to add to websites. We think that when used in the correct amount and in the correct place, cool fonts that step outside the standard serif or san-serif rut can add great impact to a webpage design.
Video and video and more video
We’re seeing video popping up all over the place! Instead of reading, people are watching. Since they’re becoming easier to produce and share, videos are becoming the favorite way to communicate, especially when the information is complex and needs a lot of visual support. Some companies are putting a video portfolio right up on their homepages, forgoing written copy in favor of dynamic slideshows set to hip music.
We’ve all read the articles saying that “Content is King,” but this year it might not be. Content is going to start shrinking down into bite-sized pieces instead of lengthy paragraphs. This is because our attention spans are getting shorter and shorter with each passing moment and website content needs to be very direct and succinct.
We wrote about the growing need to be mobile friendly in a post about mobile marketing. More businesses are catching on to the fact that they need to be accessible anywhere, by anyone on any device. So, more websites will be mobile optimized this year as the push to make the mobile web a friendlier place continues.
Scaled back colors
You know how much we love to talk about color! We’ve noticed a lot of websites emerging lately that make use of only one or two colors. Sometimes they’re completely neutral in black and white with only seldom pops of a single bold color. We love to use color in new and interesting ways and this year, we’re going to get to play!
Focus on the user experience
Web design isn’t only about making things look pretty. Businesses are now looking to more minimalist design, better organization of information, and mobile optimization to make sure users have a great experience using their site. A rewarding user experience is key to getting customers to like you and visit again!
Not every brand-new website you see launch this year will have these features, but the trends are strongly in these directions and we can’t wait to see what designers do with them. Here’s to a cooler, more user-friendly year in web design!
Sure, a plain peanut butter sandwich is ok, but it’s a little dry. A plain jelly sandwich is also edible, but it’s lacking something. This is exactly how it is when you have a great design with uninspiring or meaningless copy, or great copy with a visually unreadable design. You need the two to be equally fabulous if you really want to have a winning combo that keeps people coming back for more. That’s why it’s so important for copywriters and designers to work together. We work in a content-focused industry, so we place high value on this symbiotic relationship.
Copy inspires design, design inspires copy
It’s tremendously helpful for a writer to see a design before writing. It gives them a sense of how much space they have to work with. They can also see how many titles, call outs, headings and other elements the design has that will need words. It’s also great to see a design because it establishes the tone for the copy. A more playful design will call for less formal copy and a more corporate design will need something more conservative. For example, it would be really weird if a clinical website had lots of whimsical copy, wouldn’t it? That would be like having a clown give you a dental exam. That “dentist” would lose all credibility with you and you’d be looking for a new one realquick.
Especially if you’re afraid of clowns.
But just as the design can inspire the writing, the writing can also inspire the design in the same ways. It’s helpful for the designer to see how much copy there is and how many titles, call outs and headings they may need to make space for. The copy can also help the designer establish the tone and the audience so that the design works in harmony with the copy.
Writers and designers working together
Clearly it’s kind of a chicken or the egg situation when it comes to who inspires whom. Who goes first? Does the designer come up with a design first or does the writer draft some copy? That’s always the question, so what happens quite often is the designers and writers sit and work together. Lots of times there’s a wireframe and a sitemap (click here to learn more about wireframes and sitemaps) that they both work from at the beginning that helps them shape their own individual piece of the messaging and tone.
It sounds odd to think of a designer as someone with a message to convey because after all, don’t they just work with colors and layout and stuff? If you remember back to some of our past blog posts, you know that the colors, navigation and layout have their own messages to convey and that they’re just as important as the copy. Design communicates volumes in its own right.
Designers and writers need time to bond
If you happen to be putting together a project and you hire a designer who does not work with a writer in-house, make sure they have a chance to meet one another or at least have a phone call so that they can have a chat and strategize together. Otherwise, there’s a chance you’re going to wind up with a plain peanut butter or plain jelly sandwich that will leave readers feeling empty and unsatisfied.
Put the two together, however, and you have a winning combination!
This is the last edition of our three part series on the anatomy of a website! By now you know what a sitemap and a wireframe are and you know all about the different kinds of navigation. Today we’re going to wrap it all up by going over a few of the other important elements of a website that you already know about, but maybe haven’t thought of in quite the way that we do.
You still need those exam gloves, so go get ‘em!
All the stuff on a website would be awfully disorganized without some sort of container to help us keep the contents of the pages organized. It’s the same thing with that shameful drawer or closet in your house that you’d be mortified if anyone saw (you know you have at least one of those spots!). To make it nice and neat, all that drawer or closet needs are a few nice containers to keep everything in its place. It’s the same thing with a webpage. Without containers, the elements of the page would drift around without boundaries and be a gigantic mess. That’s why you see boxes and lines separating the different elements of a webpage.
Located at the bottom of the page, a footer contains contact information, links to main sections of the website, social media links, and other important stuff like that. The footer usually doesn’t change when a user navigates to a different page so that the information contained in the footer is always available. Footers are helpful not only because they list important info, but they also let visitors know they’ve reached the bottom of the page.
Any area of a website where there’s no text or graphics is called whitespace. While it’s very tempting to fill every little piece of a webpage with stuff, there’s great value in whitespace. It helps a design feel light and breathable, it helps guide the user’s eye around the page, and it helps to create balance and unity. Without judicious use of whitespace, a webpage would look chaotic and crazy. It would confuse and overwhelm a visitor, making them uncomfortable and sending them elsewhere.
It’s important that your website be consistent with your brand. While it may be cool to think of your website as a chance to really go nutsy and experiment with a whole new look, it’s probably not in your best interest. Your logo and the colors you choose should match the rest of your collateral like your business card, letterhead, and so on. You want your customers to recognize your website instantly and know they’re in the right place. When we talk about making it consistent with your brand, this is what we mean. We even think about the fonts we use and the tone of the copy. It’s got to suit you right down to the tiniest of details! This is not to say that you can’t be fun or jazzy on your website, you just have to be recognizable as you.
Content refers to all the things on your webpage like the text and the images. Content should be well organized, concise, and easy for the eye to scan for information. Most of your visitors have a short attention span, so you need your content to be as tight as possible. It’s very tempting to try to stuff as much as you can onto your site and include all sorts of pictures and snippets of info, but, in general, less is more.
There are many, many other things we could tell you about with regard to the anatomy of a website, but these are things that you’ll hear about most often when we talk to you about your project.
Thanks for letting us geek out and share our knowledge with you!
After our discussion of sitemaps and wireframes from last week, we thought we should move on to talk about some of the more fun parts of a website’s anatomy and talk about navigation. Web users are very impatient, so navigation is incredibly important in helping them find what they’re looking for as quickly and easily as possible. It can actually make or break the success of your website, so it’s certainly a very big deal and something you should pay close attention to.
Still got your dissection kit from last week?
You’re gonna need it!
The term “website navigation” refers to the way users get around your website. It’s kind of like using street signs to find an address. Without them, you’d be pretty lost, wouldn’t you? With that in mind, you can see how it’s incredibly important that the navigation of a website is very easy to find and easy to use.
The first thing we need to think about is placement. Since a navigation bar doesn’t take up a huge amount of space, it can get lost in a sea of other content you have on your site. That’s why it should be a very prominent and consistent element that appears in the same place at the top of every page. It should also have the same style, type and colors so that users know where to go to get around no matter what page they’re on. There are two common kinds of navigation: horizontal and vertical.
The kind of navigation you see most often is arranged horizontally across the very top of a page. It’s a list of all the pages on the website that a visitor may want to see.
Another common arrangement is vertical text navigation. You see this most often on the left side of a website. Vertical navigation can be used in conjunction with horizontal navigation and it’s often used for sub-sections of a larger one found in the bar at the top of the page.
You know how when you click or hover over a button in the navigation bar, a menu comes down and offers you a look at what other sections of the site can be found under that heading? That’s a drop-down menu. They break down top-level buttons into smaller sections. Sometimes they even have sub-menus that show users even more choices as they look through the drop-down menu.
So, let’s say for example you’re on a clothing website and the navigation at the top has options like “clothes,” “shoes” and “accessories.” When you choose “clothes” a drop-down menu appears and offers you more options like “women’s clothes,” “men’s clothes,” or “children’s clothes.” If you choose “men’s clothes” the sub-menu has even more options like “shirts,” “pants,” and so on. Drop-down menus are a great way to help users get around a website quickly and easily without taking up valuable screen real estate. Without them, there wouldn’t be much room for any other content in complex websites.
Obvious section names
As tempting as it may be to have clever and quirky ones, the section names of a website should be really straightforward so people can find what they’re looking for without thinking. People hate to think, you know. Their brains are already overloaded with all kinds of other stuff, so you’ve got to keep it as simple and direct as you can. This helps folks navigate without the frustration of having to click around trying to figure out where stuff is. Concise names may also help with SEO.
Navigation is a very important consideration in any website no matter how big or small. It’s crucial to have it set up so that users have an easy time finding their way around.
Greetings GLAD WORKS friends! Due to the smashing success of our post on RGB vs. CMYK color spaces, we decided to dig in a little more and explore the wild and wooly world of Raster Images vs. Vector Graphics. They’re two different kinds of computer graphics, and just like with RGB and CMYK, they have everything to do with the way your projects come out. We’re telling you about all of this so you won’t feel quite so lost and in the dark when we start speaking GLAD WORKSIAN on you. We do that sometimes and we don’t even mean to.
But that’s ok because now you can just nod along and not even have to pretend to know what we’re talking about!
Two kinds of computer graphics
Raster and Vector are types of computer graphics. Raster images (aka bitmap) are composed of pixels (bits of image color) and vector graphics are composed of paths. A raster image uses a grid of pixels where each pixel can be a different color or shade. If you were to zoom in on a raster image, the edges would become jagged as you would start to be able to see the little pixel squares of color. This is different from a vector graphic which uses mathematical relationships between points and the paths connecting them to describe an image. Since they’re composed of paths instead of pixels, when you zoom in on a vector graphic, the edges are smooth.
Raster images require higher resolutions and something called “anti-aliasing” in order to look smooth. Vector graphics, on the other hand, since they’re made of lines, curves, and points that are calculated mathematically, can be scaled to any size or resolution and still have clean edges. Each have their place in your design projects, and it’s important to have the right type of graphic depending on what you’re trying to accomplish.
Vector imaging is frequently used in printed page layouts and illustrations. They can be made larger or smaller without loss of image quality because they’re mathematical descriptions of an image instead of pixels. Typography and illustration are vector graphics. Complex logos and shaded illustrations can be vector based, but it’s tough to get a photo-realistic appearance. Most of the vector images you see tend to look more one dimensional and cartoon-like.
Adobe Illustrator is a vector-based program, but you can still place raster graphics in an Illustrator file. Because you can make them bigger and smaller without losing quality, vector-based images offer freedom from resolution when developing print-based projects.
Raster images up close and personal
Raster imaging is usually used for photographic images with complex shading. They function like pointillist paintings— your brain mixes the color information into recognizable shapes. Digital photos and scanned drawings are raster images. If you scale a raster image down, you essentially omit some of the unneeded bits at the smaller size, and the software reinterprets the color for you. If you try to scale it up, you end up seeing the individual pixels. That’s why it looks jagged or blurry depending on how much you try to enlarge it. Because of this decrease in quality when enlarged, raster images are resolution dependent and require minimum resolutions, or DPI, based on the size of its intended output.
DPI: pixels for every occasion!
Because vector images are not pixel-based, they aren’t ruled by DPI. The advantage to using vectors is that they can be sized, small to large, without a loss in quality. That gives them a distinct advantage for some projects. Now, when we talk about raster images, we do have to be concerned with DPI since they’re made up of so many pixels per inch.
The number of pixels per inch (PPI) or dots per inch (DPI) is called resolution. The higher the resolution, the more pixels you have crammed in there. For web and screen view, you typically need just 72dpi because that’s the maximum amount that monitors and projectors can display. For printing from your printer at work or at home, you need 150dpi. Professional press printing typically requires a minimum of 300dpi since the equipment is capable of much finer detail.
That’s part of the reason why it’s very hard to use a photo you took with your phone as the cover of your annual report. The resolution of the image is far too low and you’re limited in what you can do to make it bigger. And although we know you’re oh-so tempted, we beg of you, just don’t do it!
The more pixels you have in an image, the more bits of data need to be stored which increases your file size from kilobytes to megabytes to (hold onto your hats) gigabytes! So, for example, an average home page photo on your website shouldn’t be more than 100KB since most monitors max out at 72dpi, but that annual report we talked about might have an image that’s 5MB or more, weighing in at a minimum of 300dpi! When talking about raster images, the bigger the image, the bigger the file size should be. And don’t even get us started on printed billboards! Those files can be like, whoa, HUGE!
Now, we don’t expect you to be graphics experts after having read this, but we do hope that it gives you a general idea of the different kinds of computer graphics we work with when we do our magical design-y stuff.
We want you to speak our language! We have so much to share!
We know that CMYK and RGB totally sound like the two boy bands your teenage daughter is swooning over, but they’re actually color spaces that we encounter with images. Each color space has a specific use and they’re the reason why things that look one way on your computer screen may look completely different in print.
Today we’re going to explain what CMYK and RGB are and how they have different uses depending on what your project is. It’s going to be a lot like an episode of Bill Nye the Science Guy only with less bowties and fewer awesome sound effects.
CMYK stands for Cyan (pale blue), Magenta (hot pink), Yellow, and Key (black) and they’re the ink colors used in the offset printing process. The four colors are combined to varying degrees to create the colors on printed pieces. CMYK is considered a subtractive color mode. To understand what that means, think of the paper that’s being printed on as white and the ink subtracting from the brightness or whiteness of the paper. Typically CMYK is used for print pieces such as postcards, newsletters, invitation suites, etc.
RGB stands for Red, Green, Blue and it’s the color of the light that comes from computer monitors or other electronic devices like televisions and scanners. A computer has a much different array of colors that it can display as opposed to what a printer can print. With RGB, the primary colors red, green and blue are combined to create a huge array of colors. It’s considered an additive color mode because the background of the screen is black. The LEDs that light the screen add light to black. The variations in colors determine what color the viewer sees. Anything dealing with the web or that’s meant to be viewed on a screen should be done in RGB.
Why Do RGB colors need to be converted to CMYK for printing?
So, let’s say you’ve made a very nifty looking poster on the computer and you’d like to print it out. Once printed, the poster isn’t nearly as nifty as it looked on your computer screen. The colors are dark and dull and the whole thing looks kinda wonky. Why did this happen? You have a nice printer full of new ink! But it’s not your printer, it’s that the RGB color scheme on your monitor has a different range of vivid and vibrant colors than CMYK can produce. Luckily, the above scenario doesn’t happen very often as most home ink jet printers are smart and do the conversion from RGB to CMYK for you.
Converting RGB to CMYK
Sometimes converting from RGB to CMYK requires the use of a conversion table to make sure the colors on the screen will match the color in print. There are other ways to do this, but we won’t bore you with the details you hire us to worry about! Photos that are placed into the piece will probably be in RGB format and will have to be converted separately. Some colors just cannot be reproduced in print and have to be changed in Photoshop.
Of course, this is all a bit more complicated than we’re making it out to be, but we hope you come away from this post today with an understanding of the standards we’re working with and why things need to be done a certain way so that we can get the best possible results.