Creating a website that works well on the huge range of devices is no easy task. In fact, creating a website with a solid user experience on every device being used to access your site may actually be impossible. You have to account for a variety of screen sizes, creating a site that loads quickly enough to keep a user from losing interest, and the fact that no everyone has the newest devices for browsing the web. In fact, many are using devices that are quite outdated, which can be an issue for modern designers.

Responsive design is the popular solution for these problems, but it isn’t a magic fix. Responsive design methods certainly make it easier to account for the huge range of devices connecting users to information, but without relentless testing and tweaking there will invariably be a few devices which run into problems accessing your website.

However, responsive design is still the best current solution for these issues. Your only real alternative solution is creating different websites for mobile and desktop users, but this still requires massive amounts of testing to make these sites usable for every device. It makes more sense to do all that work towards a single site, rather than two.

As Marianna Gallano explained, the most common approach to responsive design is to split pages into multiple elements, such as the header, image galleries, and product descriptions. Each element stands on its own in terms of functionality, but seamlessly transfer their look and user experience to various devices and screen sizes. This way, images are able to automatically scale and resize, while text always stays legible, even on the relatively small screen of a smartphone.

WhoIsHostingThis, a site covering news for webmasters and webhosting, created an infographic to break down what responsive design really is, why it is so important, and how each element of a site functions within the whole while responding to a variety of screen sizes.

Most people may not know this, but web design has two distinct sides. You’ll notice this when you begin to build a site and learn you need to hire a designer and a web developer, or one of those rare few who are great at both. But, what does this actually mean? Why do you need two separate people to build one site?

The Designer

To understand why web design has these two distinct facets, you have to understand the basics of how a site is created. A web designer creates the look and style of your page using graphics and design software such as Photoshop. But, this design isn’t a functional site. To bring everything to life, the design has to be coupled with code.

The designer is generally considered to be creative side of the team. Their job is to work with the client to dream up a look and feel that matches the brand. These are the artists who you imagine working to create a website. A web designer succeeding in the current market will be able to tell you all about color and typography, the importance of spacial relationships, and how these effect your audience.

The Developer

The developer is the “behind-the-scenes” person who makes everything run. These are the people who actually build the skeleton and muscles to the designer’s skin. They use HTML, Javascript, JQuery, and CSS to make everything technically work together.

This is the technical side of the creation process. These people usually have a degree in computer science or programming, and are very technologically minded. While a designer may be creative, a developer will likely be more detail-oriented.

Why Not Both?

While these sound like separate jobs, they are both working towards the same goal. You can’t have one without the other. But do you really need two separate people for this? In the current market, the answer is most often yes. While many designers are relatively informed on coding, and developers are aware of the creative process establishing the look of the site, these are both complex jobs which require specialized talents.

There are those who bill themselves as both, and many are perfectly capable of building an entire site by themselves. However, these are few and far in between. The best designers and developers have read up on the other side of the process, and may even have a fair amount of technical skill. But, you’ll benefit from building a team instead. The extra set of eyes will spot any flaws before resources are invested in the wrong areas, and you’ll have someone specially suited for sides on either side of the aisle.

Now that the dust has settled after some extended debate, it seems clear that responsive design is here to stay. It won’t last forever, but it certainly isn’t a flashy trend that is going to fade away soon. It makes sense responsive design would catch on like it has, as it makes designing for the multitude of devices used to access the internet much easier than ever before.

Almost as many people accessing the internet right this moment are doing so using a smartphone or tablet, but they aren’t all using the same devices. A normal website designed to look great on a desktop won’t look good on a smartphone, but similarly a site designed to work well on the new iPhone won’t have the same results on a Galaxy Note 3.

This problem has two feasible solutions for designers. Either you can design multiple versions of a website, so that there is a workable option for smartphones, tablets, and desktops, or you can create a responsive website which will look good on every device. Both options require you to test your site on numerous devices to ensure it actually works great across the board, but a responsive site means you only have to actually design one site. The rest of the work is in the tweaking to optimize the site for individual devices.

That all explains why designers love responsive design as a solution for the greatly expanding internet browsing options, but we have to please other people with our designs as well. Thankfully, responsive design has benefits for everyone involved. The design solution is even great for search engine optimization, which is normally not the case with design and optimization working together. Saurabh Tyagi explains how responsive design benefits SEO as much as it does consumers.

Google Favors Responsive Sites

SEO professionals spend a lot of their time and efforts simply trying to appease the Google Gods, or trying to follow the current best practices while also managing to outplay their competition. Google has officially included responsive design into its best practice guidelines, as well as issuing public statements calling for websites to adopt the design strategy, so naturally SEOs have come to love it.

One of the biggest reasons Google loves responsive sites is that it allows websites to use the same URL for a mobile site as they do for a desktop site, instead of redirecting users. A site with separate URLs will have a harder time gaining in the rankings than one with a single functional URL.

Improves the Bounce Rate

Getting users to stay on your page is actually easier than you might think. If you represent yourself honestly to search engines, and offer a functional, readable, and generally enjoyable website, users that click on your page are likely to stay there. By ensuring your website is functional and enjoyable on nearly every device, you ensure users are less likely to hit the back button.

Save on SEO

Having a separate mobile site from your desktop site means double the SEO work. Optimization is neither cheap, fast, or easy, so it doesn’t make sense to waste all that extra time and work on basically duplicate efforts. Instead of having to optimize two sites, responsive websites allow SEOs to put all their efforts into one site, saving you money and providing a more focused optimization effort.

Avoids Duplicate Content

When you’re having to manage running two sites for the same business, it is highly likely you will eventually end up accidentally placing duplicate content on one of the sites. If this becomes a regular problem, you can expect punishments from search engines which could be easily avoidable by simply having one site. Responsive design also makes it easier to direct users to the right content. One of Google’s biggest mobile pet peeves of the moment is the practice of consistently redirecting mobile users to the front page of the mobile site, rather than to the mobile version of the content they asked for. Responsive design avoids these types of issues altogether.

If you’ve spent much time online in the past year or two, it is almost certain you’ve come across an infographic. They are highly enjoyed by the public, as well as being educational. This is why more companies and content creators are using infographics to communicate and share knowledge with the public than ever before. Some may say it is just a trend, but either way the data shows that searches for infographics have risen over 800 percent in just two years, from 2010 to 2012.

Even if you don’t know what an infographic is, the chances still favor that you have seen one either in your Facebook feed, a news article, or maybe even your email. Infographics are images intended to share information, data, or knowledge in a quick and easily comprehensible way. They turn boring information into interesting visuals which not only make the information easier to understand, but also make the average viewer more interested in what is being communicated.

According to Albert Costill, multiple studies have found that 90 percent of the information we retain and remember is based on visual impact. Considering how much information take in on a day to day basis, and that means you’re content should be visually impressive if you want to have a hope of viewers remembering it. If you’re still unsure about infographics, there are several reasons you should consider at least including them occasionally within your content strategy.

  1. Infographics are naturally more eye-catching than printed words, and a well laid-out infographic will catch viewers attention in ways standard text can’t. You’re free to use more images, colors, and even movement which are more immediately visually appealing.
  2. The average online reader tends to scan text rather than reading every single word. Infographics combat this tendency by making viewers more likely to engage all of the information on the screen, but they also make it easier for those who still scan to find the information most important to them.
  3. Infographics are more easily sharable than most other types of content. Most social networks are image friendly, so users are given two very simple ways to show their friends their favorite infographics. Readers can share a link directly to your site, or they can save the image and share it directly. The more easily content can be shared, the more likely it is to go viral.
  4. Infographics can subliminally help reinforce your brand image, so long as you are consistent. Using consistent colors, shapes, and messages, combined with your logo all work to raise your brand awareness. You can see how well this works when you notice that every infographic relating to Facebook naturally uses “Facebook Blue” and reflects the style of their brand.

Obviously you shouldn’t be putting out an infographic every day. Blog posts still have their place in any content strategy. Plus, if you are creating infographics daily, it is likely their quality will suffer. Treat infographics as a tool that can be reserved for special occasions or pulled out when necessary. With the right balance, you’ll find your infographics can be more powerful and popular than you ever imagined.

It seems like everything looks different over at Google these days. Not only has their logo subtly flattened out, but the way we see a significant number of searches has been greatly altered with the introduction of the Google Carousel. Now, AdWords seems to be following suit as reports have started to come in of a new logo and web UI design.

As Search Engine Land reported, Rick Galan tweeted out a screenshot of the new appearance. The logo is now integrated directly into the navigation bar and the green coloring of the bar has been replaced by Google’s widely used desaturated blue-grey.

The new AdWords logo might by signaling a redesign of all Google product logos towards a more flat design, such as what they have done with their flagship logo. Their old logo is below for comparison.

It could also simply just be a test as Google has not released any public statement or announcement for the logo, so much is unclear, especially how long a roll out might take. No one knows when we will see the change, but don’t be surprised if your AdWords experience looks different in the near future.

Typography has become a fundamental part of design in every way, even making its way into web design over the past few years. You can’t just spill out words and letters onto a page and expect it to look good, and designers have turned the art of making typography look great into a science over hundreds of years.

Somehow, designer Ben Barrett-Forrest manages to condense all of this into a five minute long fun and informative stop motion animation about the history of fonts and typography, called… The History of Typography.

The short film starts out at Guttenberg and Blackletter, but manages to trace the history all the way through Futura, to pixel type and the technology that allows everyone to create their own typeface if they desire.

Barrett-Forrest used 291 paper letters, 2,454 photographs, and 140 hours of work to create the film.

Logo design is one of the most deceptively difficult jobs in all of design. It sounds so easy, pick a font, type out the company name, and maybe underline or circle it. There are designers out there who really do think that way. But, if you actually care about delivering a quality product, its much more complicated.

There are endless brands and logos out there today, and the vast majority fall away into the noise. To create a truly successful logo in the modern day, you have to design something simple but brilliant enough to make people instantly take note. In the best logos, the viewers don’t even realize why they are so attracted to the logo.

But, how do you actually create a logo that accomplishes this? It takes some studied knowledge of design and a bit of ingenuity. Joshua Johnson from Design Shack has a few ways you can approach logo design to create something truly remarkable.

1) The Visual Double Entendre

Many of my favorite logos can be interpreted in at least two ways. The visual entendre is exactly this tactic, which wraps two images into the same visual object. There are quite a few examples of this design strategy out there, but the example Johnson uses is too perfect to ignore, the WinePlace logo.WinePlace LogoThe logo is shaped like a thumbtack, seemingly marking a place or location, but if you look for more than a split second you will easily see the object also looks like an upside down wine glass. This sort of visual “trickery” encourages viewers to look a little longer and absorb the image (and brand name) more than the average glance. It is memorable for its creativity, but also because you force people to pay attention for longer.

Another added benefit of the strategy is that by nature your design must be simple to play two objects into the same image. As you’ll see, simplicity is a great rule of logo design.

2) Pay Attention to Color

One of the most basic facts of design is that color is not simply an aesthetic decision. Every color and tint carries a specific set of meanings and ideas, which often seem so embedded in our brains that our reactions are subconscious.

Many brands will have already noted this and might very well require you to stick to a very specific brand palette, but thats not always the case. On the chance that you have freedom to choose the colors of the design, you will want to pay close attention to picking the colors that will not only look good together, but also represent the nature of the brand.

On top of this, you should make sure the logo will also look clear and distinguishable if it must be printed in grayscale. Not every memo and press release will be full color, and you don’t want to lose the impact or recognizability of the logo just because someone xeroxed a company report.

3) Avoid Cliches

Trends are something that are unavoidable, but you might think twice before playing into what is hot at the moment with your logo design. Sure a popular styled logo might gain you some favor in the moment, but your logo is intended to represent your brand for years to come. You want it to be memorable enough that your logo outlives the current trends.

Fake Hipster Logo - Source: Design Shack

The current example is the dramatic overuse of the circular logo, generally styled vaguely like an old college patch or badge. Circles are popular in design and these types of logos are slightly retro, but just modern enough to have become a terribly common site across the web. But, it also means they are all interchangeable. I don’t remember any brand using the style because they all look the same eventually.

4) Custom Type Never Goes Out Of Style

Coca-Cola Logo

Some of the most popular logos throughout time rely on very little to be successful. Just think of Coca-Cola’s logo. All they need is their signature red color and a custom typeface so notable it has become the source of countless rip-offs and parodies.

The best part of using custom type is that it isn’t immediately able to be copied. Designers looking for a quick and easy way to jump on a potentially successful bandwagon are quick to begin using a font. But, if you have your type hand-designed, it takes a lot more effort to mimic. The irregularities that make custom type so special also make it too unique for a simple conversion to a font.

5) Keep It Simple

Apple-Nike Logos

While custom fonts are certainly a simple but effective way to make your mark, some designers don’t specialize in illustration or typography. That doesn’t mean they are out of luck. Many of the most famous logos in the modern day don’t feature any type whatsoever.

These logos take design to an even simpler stage, where all you need are simple shapes that are as iconic as they are refined. Apple began with their trademark bit apple shape, but originally it was striped with color. Gradually, they began to shift the logo to what looked like a brushed metal apple, but these days you won’t find any of those flourishes. All they need to be memorable is the silhouette of the apple, with that special bite taken out.

Conclusion

There are of course many other approaches you can take to making a memorable logo. For example, Johnson also brings up a discussion of symmetry and proportion in logo design that is better fit for a more in-depth analysis. Simply put, great logos don’t leave things to chance. But the truth is, if you want a truly memorable logo, you might start by trying to create something unlike those before.

Design Kit Screenshot

In general, web designers seem to like tools and resources that speed up their work and ease some headaches. This is most notable by the sheer number of them available. Nearly every design blog or website offers some unique design kit or has a recent blog post sharing the best recent kits.

You might be asking what a design kit is, but these kits aren’t uniform. They come in all shapes and sizes, varying wildly in scope and cost. They also range in quality from ‘incredibly useful’ to ‘waste of harddrive space.’ The best definition for a design kit is any prepackaged tool or piece of software which aids in the creation of a digital design project.

Some design kits come with interface packs, buttons, and graphics all intended to be used together. They may come with a specific color and font palette, but they are almost always customizable. Some kits are niche designs aimed at solving a specific problem, while others are catch-all assortment or full design templates.

The thing is, while these design kits can definitely help a designer in a time-crunch, they have their fair share of drawbacks, as Carrie Cousins discussed in her recent article for Design Shack.

  • Costs – One of the biggest issues with these kits is they don’t always come cheap. There are some great free kits available, but you should expect to pay for kits filled with premium features. For some budgets, this alone can rule out using a specific design kit. Thankfully most kits are relatively cheap for single license use.
  • Too Similar – Some kits begin to look bland because all of the parts are designed to be used together, but without a full finished design in mind. This can result in kits with 50 nearly identical buttons in an assortment of colors. It is up to the designer to choose parts that will look interesting together, but it can be tiring trying to sort out a repetitive and boring kit.
  • Incomplete Kit – Be careful to read all of the details for any kit before you buy so you know what you’re getting. A 1,000 piece kit may seem really useful and interesting until you discover it is largely made or elements you can’t really use. Many kits are themed and only contain certain types of icons such as social media buttons or calendar icons. Don’t spend money on something that doesn’t offer what you need.
  • Looks Too Much Like Another Site – Obviously the biggest problem with using pre-made tools and elements is eventually you’re site will look astonishingly like someone else’s who also used the tool. Many designers aspire to work solely from scratch specifically to avoid this problem, but you don’t have to completely swear off design kits to be original. Use the kit as a starting point. If you use all the elements and layouts as they came, you’re much more likely to look like any other site. If you spend the time to give these elements your own personal touch, you’ll look equally unique.

Google LogoYesterday you may have noticed a couple changes when you opened up Google. The first is the most obvious – it was accompanied by a little help box explaining the change – but Google has officially implemented their new app launcher in the main Google navigation bar for quick and easy access to other Google products.

You’ll be familiar with this app launcher if you use Android devices or Chromebook computers. Search Engine Land also reports that the grid-style launcher has been in testing since February or earlier.

Google App Launcher

The other change is a lot more subtle, but still of note for the design community. Google has flattened their logo, keeping up with the hot trend. Flat design is especially popular at the moment as Apple’s new flat iOS also rolled out earlier this week. The colors in the Google logo are also slightly different, but you won’t be too thrown off by the tweaks.

Many will have already seen the updates, but if you’re Google page still looks the same as it always has, be patient. Google says it should be completely rolled out over the next couple months on most Google products.

Risk Everything

 

For much of the history of the internet, one of the biggest guiding pressures was to fit as much content into the immediately visible area of the page while also providing an aesthetically pleasant view. The focus on “above-the-fold” design meant most sites generally have a header taking up 20-30 percent of the screen, including navigation, with content immediately available below. But, these days many designers are eschewing the old ways in favor of going big.

Many web designers are using oversized layouts with large, gorgeous images and videos, and luscious typography to immediately catch visitors’ attention. They make a statement immediately, and encourage users to begin interacting with the site. By opening the composition of your page and expanding everything, you push users to take in the sight and then start scrolling to see more, especially when combined with parallax scrolling and effects. As Carrie Cousins explains, “because the design is divided into screens that are unique, having something supersize on each is a great way to keep users interacting with the content.”

These types of websites also show that the designer or brand pushes past the standard for something more. Rather than relying on stock images, these oversized layouts are based on unique and visually exciting imagery. You get to showcase great visuals, which then showcase your own work.

The copy on your page also gets more attention on oversized layouts. There are less huge blocks of text to overstimulate the user at once, while the impressive layout draws attention to the text. Oversized layouts also allow designers to increase the size of text, demanding the attention of viewers. This is all bolstered by the use of quality typography which is allowed to standout on these types of layouts.

Cousins has a few other tips which will help designers play with the new larger possibilities of web design. While many clients may call for something more traditional, some projects allow you to expand your abilities and demand more of viewers while rewarding them with a gratifying user experience.