Tag Archive for: Web Design

Why Aren’t We Talking About Design For Tablets?

, ,
iPad 2

Source: Matthew Downey

There is a big push recently to ensure that websites are optimized for mobile devices, especially after Google has openly stated they plan to begin punishing sites that don’t properly accommodate mobile traffic.

There are really two solutions for making a site work great on smartphones. Designers can either create an entirely separate and unique version of their site specifically for mobile phone users to access, or they can choose the more popular responsive design solution which promises to “work on every device.” Both have their perks and drawbacks, but can lead to great smartphone internet experiences when done properly.

The devices everyone forgets to discuss are tablets. While we’re ensuring sites work wonderfully on smartphones and desktop devices, the normal solution is to simply direct tablets to the desktop version of the site and be done with it. While that may sound fine initially, it actually leads to sub-par experiences for a quickly growing market.

According to Mobify’s ebook Tablet Design Best Practices, over half a billion tablets are estimated to be shipped in 2013 and 2014 combined, and that number could end up being higher as prices drop and new options become available. Not only that, tablet users continuously show remarkably high quality of traffic and are more earnest to make bigger purchases than smartphone or desktop users.

If you aren’t optimizing sites for tablet users, you are leaving quality traffic and willing consumers to mediocre experiences that can lead them to take their business elsewhere.

Designing sites that work well on tablets doesn’t require much more time than ensuring you are also delivering a quality smartphone internet experience, and often builds on the same responsive or adaptive framework. Most desktop sites do in fact work on tablets, so long as they aren’t overloaded with Flash, but they become frustrating to use. Buttons are too small or scrunched together, text becomes tiny, and images can become pixelated messes when viewed on the high pixel density screens that are becoming standard.

If you want to create a site that will actually excite and draw in tablet users, you can choose to minorly alter your desktop site with small adaptive enhancements and basic media queries, or you can strip your site down to its basics and rebuild a tablet option that creates a uniquely usable site.

For companies without a lot of resources to spend on creating multiple versions of their sites, improving your desktop site to make it enjoyable for tablet users is often the best option. It can be as simple as making buttons a bit bigger and incorporating the zooming and pinching that tablet users are constantly doing. Text also has to be bigger, but that can be easily solved by increasing font sized to 16 pt minimum. But, there are even smaller changes you can make that can make the site easier to use.

Typing on tablets can be incredibly difficult without any tactile response and overzealous autocorrect, but it isn’t difficult to make your site light on text input or create shortcuts that will save the fingers some effort. It is also a snap to enable contextual keyboards with some simple code adjustments.

But, webmasters who want to really engage tablet users and have the resources to do so can find huge benefits from going above and beyond, taking the basic structure and layout of their site and remixing it with adaptive frameworks to really make the site tablet friendly. It is entirely possible to create an adaptive tablet site without even changing the desktop site, and you rarely have to create entirely new elements for the site. It is more about using the elements you have on your site in new ways.

For example, sites with tons of images can make it so that these high quality images can be pinched and zoomed endlessly, while the rest of the page maintains its original size and clarity. You can also re-imagine your navigation for your site to fit how visitors will be using your site. Similarly, you can attempt to replicate the app style on your website with smooth transitions and panel menus hidden away, but always available at the tap of a button or swipe of a finger.

It is hard to suggest specific techniques for creating great adaptive tablet websites that go beyond simply editing your original desktop page, but that only goes to show how slowly the internet is adapting to one of its most fruitful markets. There are massive opportunities for us to completely redesign the tablet experience for the people actually using them, but designers can be stunted by the need to work for multiple clients, limited resources, and general willingness to rest on “acceptable” sites rather than truly exciting experiences.

Hopefully, as businesses recognize the potential of the market, designers can begin to truly explore the potential for design on these great devices.

/0 Comments

Why Are Designers Upset About Creative Cloud

,

Creative CloudFor the past decade or more, Adobe and Photoshop have been staples in the vocabulary of any designer. Adobe has been by our side constantly upgrading, and draining our wallets, but not really causing much of a stir. Not even the Flash vs. Apple conflict really shook the boat that much.

Simply put, Photoshop and its partners in the Creative Suite have been the go-to applications for a huge number of the people working in web development, photography, design, and video.

With their latest new release however, that all could change.

As you may have heard, Adobe has decided to stop releasing physical software in favor of a move to a cloud-based subscription service called Creative Cloud. What you might not have heard is that there is already a petition signed by over 37,000 angry people begging Adobe to abandon their plans.

The move to the Creative Cloud would mean that Adobe would drop all support for older versions of their software, specifically the Creative Suite (They will continue to add support for CS6 for now). However, the Creative Cloud would function essentially the same as the old software. It won’t be a set of web apps, and you will still have to download and install the software to your hard drive. But, all your files and data will be in sync across multiple computers and devices.

The monthly subscription service will be $29.99 for existing CS customers, and $49.99 for new users. But, you could also buy just a single program for $19.99 a month each. For that price, you’ll also get 20GB of cloud storage.

Basically, Adobe has found a way to attack piracy and increase their profits by making users continuously pay for the software and not distribute or manufacture physical objects. And that is why users are upset. While the subscription fee is obviously a fair deal lower than the cumulative price we payed for previous releases, over time this means Creative Cloud will be much more expensive than ever before.

It also creates a new (more expensive) option for all other design software companies to follow. Adobe has always been the trendsetter in this area and it is likely even the alternatives spurned Photoshop users turn to will eventually follow suite. Or, this could be the end of Adobe as the gold standard. As Corey Siegel from Design Instruct puts it, this is Adobe’s “all in” bet.

/0 Comments

Seven SEO Considerations That Need To Be Taken Before a Site Redesign

, ,

A website redesign can be unbelievably exciting, but it can also be dangerous to your traffic. If you don’t communicate well with them, designers and creative teams can accidentally throw out all your hard work on optimization in favor of purely visual aspects of the site. You can lose content, functionality, and all the other optimization that has won you the favor of search engines.

With a few considerations and regular contact with the design team, all of these problems can be prevented. Brad Miller pointed out seven factors you should consider when tackling a redesign. Just don’t get to eager to delve into changing how your site looks, and you can end up with a great looking site that works as well or better as your old design.

  1. Always start with research – Any design that is going to give you results is built on research. You need to know who you’re targeting, what the best functionality practices are, the current standards, and doing extensive market research. This shouldn’t come part of the way through the design or after the site is built. It should always be the very first move you make.
  2. A Redesign Changes Your Site Structure – A quality redesign can be much more than a new coat of paint on an old frame. It gives you the opportunity to change how your site is structured entirely, which should be used as an opportunity to optimize your site for visibility and conversions. Consider what pages are succeeding and what isn’t on your page and reassess how you can efficiently design your site.
  3. Redirects – Before redesigning begins, you should make an inventory of every page and incoming links on your site, including subdomains. As the structure of your site is changed, including the URLs, a strategy will need to be put into place for redirects to protect any SEO rankings. Audit where links are coming from and going to, then map out all your pages as well as their new redirects.
  4. Navigation – You need to consider how people will be finding your site from the start, and putting that information into your URL structure. Can you shorten URLs or make them more streamlined? As sites grow, URLs can become unweildly, and should be trimmed as much as possible. Once you have people on your site, however, you need to understand how they will navigate around the site. Where are they entering your site from? What do you want visitors to do? If you know how visitors navigate your site, you can design it to direct them where you want.
  5. How is the Content Going to Be Presented? – Content is the keystone to a successful online marketing campaign, but it is still an afterthought for many site designs. Content should be visible and worth the attention of your viewers. Decide before hand whether you will have a blog and how that blog is going to be used.
  6. Technical SEO – Way too many redesigns play with factors that need to be controlled for proper optimization. They build sites that look great, but take ages to load losing visitors and credibility with search engines. However, you can use the redesign to toy with some behind the scenes factors like ensuring your site is compliant with all the standard best practices of design and SEO and cleaning up your code to make sure search engine crawlers will be able to easily understand your site.
  7. Testing – Test everything you can afford to. Not only do you gain invaluable data about your consumers and how your site is actually being used, but you get the chance to actively connect with customers and mold your new site to their needs.
/0 Comments

Parallax Design vs. SEO: How Design Affects Optimization

, ,

Any SEO professional who has been around for a couple design trends knows what its like to bump heads with designers about the design methods and usability. There are certain innovative design trends that can be wonders for usability, but are completely at odds with standard SEO practices. According to Janet Driscoll Miller, that doesn’t mean we have to throw out both, we just have to be creative with our solutions to integrate creative design.

Parallax design is the most popular trend that runs into this issue with usabilty and SEO. It has actually been around for a few years, but it has recently gained quite a bit of notoriety as designers have used it to animate pages in a way that scrolling makes the entire page change what is being shown. It’s really easier to show people than to describe.

The most commonly seen site with this design style is the Spotify front page which essentially moves layers as the viewer scrolls downwards.

Spotify Screenshot

 

What makes parallax design so popular is it basically allows the site to walk a visitor through a story by scrolling down the page. Google has even used the style for their big “How Search Works” site, where Google tried to explain how it works to the average internet user. It directs how visitors view the site, rather than letting visitors click around at will.

The big problem is that parallax designs are essentially extremely large one page websites, which is extremely difficult to optimize for many search terms. All of your keywords have to be concentrated onto one page, rather than spread out across many as Google is used to. On top of that, inbound links to your site all point to a single page, not specific content.

Another interesting problem is that parallax design doesn’t work on mobile phones of any kind. As mobile traffic rises, that means more and more people aren’t able to use pages in this style. It also means site owners have to basically create an entire separate mobile version of their site. Many companies already do this, as Google did for the “How Search Works” site. Until responsive design popped up, it was common practice to build a second mobile site.

None of this means we should immediately cut out parallax design. As stated before, parallax design is unparalleled at telling stories, and some site don’t have to rely heavily on SEO to drive traffic. There is also an approach which allows you to use parallax design and a multipage site, by creating accomying sub-pages, like Spotify did. The home page is a parallax design, but the links take you to content on separate, static pages. That creates a static URL for different content and allows keywords to be more spread out.

Deciding whether or not to hop on these trends all depends on what you intend to achieve with your site. If you intend to tell a story or direct visitors through your site in a linear fashion, parallax design is possibly the best answer.

/0 Comments

What are Dominant and Recessive Colors?

,

Color Wheel

 

Have you ever seen the old “optical illusion” that makes one color appear to be two entirely different colors? If you’ll excuse the MS Paint quality image (is there a rule that all optical illusions have to have been designed before 1997?) the one below makes two spirals appear to be blue and green, when the stripes making the spirals are actually the same color. Its the same principle at play as when you look at a color in a design and it just doesn’t seem to work right. When placed next to specific hues, certain colors can take on the visual characteristics of their neighboring color. Making this even more tricky, the human eye perceives color in different ways depending on if it is in the background or foreground.

Optical Illusion

 

The specific colors that can take on other characteristics are referred to as recessive colors, while those who always look the same are called dominant colors. Many pure colors such as cyan maintain their hue even when mixed or paired with other colors. No matter what color is mixed with a dominant color, the original color will still remain at least partially visible.

Dominant colors also tend to “push through” the design, or powerfully assert themselves within the composition. While recessive colors easily fade into the background, it is hard to make a dominant color sit far in the background. Pure hues are naturally dominant, though primary colors are more dominant than the others, because red, blue, and yellow literally can’t be created by mixing other colors.

Recessive colors, on the other hand, naturally fade into the background. They also easily take on the properties of any surrounding color. Recessive colors act as a neutral in a palette which help the more dominant colors maintain their emphasis and focal attention. As Carrie Cousins puts it, “recessive colors are the blurry or muted tones behind the focal point of an image or the pattern that appears behind something you’re supposed to be looking at.”

Cousins explored the relationships between dominant and recessive colors exhaustively at Design Shack. Not only does she delve into the scientific basis for why we perceive these colors the way we do, she also explains how these ideas can be adapted to design of all kinds, including web design.

/0 Comments

What Do Designers Need To Do Before iOS 7?

,

iOS 7 Icon

There is a lot of talk going on about Apple’s new mobile operating system iOS 7, even though it is at least a couple months away from actually being unleashed on the public. Most of the discussion is centered around the new flatter aesthetics Apple has adopted, especially the new icons. But, there are quite a few other changes designers are concerned with, namely the actual app redesigns necessary to keep up to date with the update and how much influence iOS 7’s new UI should have on the redesigns.

Many believe that the Apple’s new style should be a heavy influence on the new app designs so that they will appear more native. But, other brands have put a ton of energy and resources into designing their own style and appearance and they don’t want to throw all of their independence and unique brand identity away. To make it even more confusing, there is a fair amount of confusion over how strict Apple’s iOS Human Interface Guidelines are.

This puts designers in a place where they aren’t sure what they are required to do to continue to be accepted by Apple’s app store, and what is simply suggested to keep in step with Apple’s style. Sam Jones from Web Designer Depot decided to tackle all the questions designers have during the transition period, and his article will give designers a good idea of where to go from here.

Jones also pulled quotes from Apple’s iOS 7 Transition Guide which help clear up exactly what Apple expects from their apps. If you want to know the exactly what apps must do, and what Apple suggests for moving forward, the information from the Transition Guide is about as clear as can be.

Things Apps Must Do

  • Update the app icon. In iOS 7 app icons are 120 x 120 pixels in high resolution, rather than the 114 px they’ve been using for the Retina capable iPhones.
  • Every app must update the launch image to unclude the status bar area, if the app doesn’t already do so.
  • All apps are also expected to support Retina displays and iPhone 5 dimensions in all artwork and designs

Things Apps Should Do

  • Apple would like all app content to be discernible through translucent UI elements such as bars and keyboards, as well as the transparent status bar. In iOS 7, view controllers use full-screen layout.
  • iOS 7’s bar button icons are lighter in weight and displayed in a new style, and as such they would like designers to redesign their own custom bar button icons.
  • Prepare for borderless buttons by moving away from supplying button background images and reassessing how to handle them within your layout.
  • Examine your app for hard-coded UI values—such as sizes and positions—and replace them with those you derive dynamically from system-provided values. Use Auto Layout to help your app respond when layout changes are required.
  • Examine your app for places where the metrics and style changes of UIKit controls and views affect the layout and appearance. For example, switches are wider, grouped tables are no longer inset, and progress views are thinner.
  • In iOS 7, users can adjust the text size within apps, and as such designers should move to adopt dynamic type, so that text responds appropriately.
  • Ensure your app doesn’t respond inappropriately to the new Control Center gesture or to a navigation controller’s swipe to go back gesture.
  • Keeping in line with Apple’s new flatter style, they would like designers to reassess their use of drop shadows, gradients, and bezels. Apple’s new aesthetic puts way less emphasis on visual effects that attempt to make UI elements look physical.
/0 Comments

What Is Minimalism and Why Does It Matter to Design Right Now?

,

Minimalism has been all the rage in web design lately. Flat design is currently one of the most popular design trends around, and it relies strongly on minimalist design principles. If done correctly, minimalism can achieve an experience that will stick in the minds of visitors for some time while doing away with all the sound and fury normally associated with the web.

Obviously, minimalist design techniques require sites that can be parsed down to just a few pages of information, but that has the added benefits of making your site automatically more friendly for mobile loading speeds and making your site easier to read. It can also cut your maintenance time down to a fraction of what is necessary for other larger sites. But, if you have a site that aims to comprehensively cover a topic or multiple topics, minimalism might not be right for your site.

One of the best aspects of great minimalist websites, and one of the biggest reasons flat design is taking off, is that every good minimalist site is built on a unique wireframe and a quality gridding system. When done right, that means your site will be easily made responsive, making the move to a mobile friendly site even easier than ever before.

Flat design is already beginning to branch out and apply more depth to sites that retain their minimalist principles, so it makes sense to get to know the ideas behind the broader style of design being co-opted for the new mobile-friendly internet. Mohammed Shakeri took the task of exploring how minimalism functions, some of its history (including Ludwig Mies van der Rohe’s famous “less is more”), and he even helps explain how to begin the transition to a minimalist website.

If you’ve been considering hopping on the latest trend to streamline sites, but haven’t been able to figure out what all the fuss is about, it’s never to late to find out. Or, as Frank Rossitano sings, “It’s never too late for now.”

/0 Comments

10 Resources That Will Help You Make an Infographic

, ,

Easy Infographics Graphic

 

It is undeniable that social media has completely changed the ways we share information. Gone are the days when loaning a book was the best way to help your friends learn about a topic. Even long form blog posts are often smothered by easy-to-understand content delivered in direct and immediate formats that are fun to read and tempting to share.

This is clearest when you look at the infographic, poster styled graphics aimed at informing people in depth on topics, similar to the way some of the more detailed posters you find in schools function. The difference is that infographics tend to give much more information than any of those posters ever could, thanks to the removal of site constraints.

Infographics engage users and attract them with stylish graphics and colors, which make readers more interested in the information that would normally be boring. Because of how easy it is to digest the information and get excited about what they present, infographics are incredibly popular on Facebook.

For a while, creating one of these infographics basically required a dedicated designer on staff, as no one gets interested in equally boring or sterile graphics without any of the style that bring infographics to life. That has changed much over the past year however, with a lot of credit belonging to the number of free tools and web applications that quickly help put together infographics with minimal design knowledge.

Crazy Pixels shared 10 of these free resources for businesses or bloggers hoping to share a lot of information in an exciting way. Of course, if you just slap something together on one of these applications, it is still going to come out bad. But if you take the time to compose the graphic and market it towards the proper audience, the rest will take care of itself.

/0 Comments

What Skills Do Employers Expect Designers to Have?

,

Graphic design may be one of the most in demand jobs out there right now, especially within the art field. But, as any designer can tell you, competition for work is tough, and designers looking for full-time employment rather than freelance work have bad odd working against them. Employers are looking for designers for diverse projects that can vary wildly depending on who hires you, but they expect you to have just as versatile skills to cover anything they will ask of you.

With such a tough marketplace, it is obviously very important for designers to have a great CV or resume that will make employers want to hire you. That doesn’t mean they want it to be over-styled and decorated. Employers obviously want professional looking resumes that gives them the impression you are equally professional and business-minded. What makes the real difference to prospective designer employers is the skills you have. The jobs may vary wildly, but almost all design jobs require the same 10 skills or proficiencies.

Amy Edwards took the time to go through over 100 design jobs advertised on Bubble to see exactly what employers are looking for, and the results were even more homogeneous than you would expect. Needless to say, those Photoshop and Illustrator skills should be maintained, and you should be get getting experience in all the other programs and design techniques coming out are also hugely important in climbing the career ladder.

/0 Comments

Learn How To Use Color By Understanding Their Meanings [Infographic]

, ,

Color is one of the most important aspects of graphic design as well as branding and advertising. It can be used to give emphasis, depth, and even motion to a design but it also helps establish the overall feel or atmosphere of the design.

As designers, we do more than just create nice looking compositions. We also connect and communicate to others through images, text, sites, sound, and yes, color. Color is one of the strongest tools we have as a designer, because color decides a large amount of how a viewer perceives a design. It can set off emotional or visual cues, or it can be used simply to pull viewers in.

One of the most important parts of learning how to use color in your designs is learning the understandings and meanings of different colors. They don’t just set the mood, but colors can actually mean quite a lot about companies, sites, and even people. You The Designer recently created the infographic seen below which details “The Psychology of Color” for designers and they lead into it with an insight about color from American stage director Vincent Minnelli who once said, “I use colors to bring fine points of story and character.”

We don’t tend to work much with characters as graphic designers, but in some ways we do tell stories through our sites. Our clients want their websites to represent their company or brand as a whole, including its history and reputability. We weave these stories through our websites through imagery that supports the brand story they want to tell. Color plays a big role in this through making connections to preconceptions we already have. If you’ve ever seen a green logo for a health food store, or a red fast food sign, you’ve already seen the principle in action.

AColorGuideForDesigners_51087f68f22e5_w587

 

/0 Comments