The Future of Automation in Design

It’s very unlikely that web designers are going to be replaced by computers in the near, or far, future, but there are some interesting developments in the world of automation that could make your job easier, or at the very least, more interesting. One of the more ephemeral developments has come via Google’s “Dream” Code, which is based off a rather complex neural net that the company utilizes in its image search and recognition technology. By essentially telling the program to find an image of something specific in an image that doesn’t actually have that detail, the coding will actually enhance edges and “create” that image where it wasn’t originally featured.

The Future of Automation in Design

How does this all actually come out in practice? If you’ve ever looked at the sky and seen a group of clouds, and then imagined what shapes those clouds might be, you could define certain parts to be an arm, or a leg, until you have the shape of a rabbit in your mind. With the case of Google’s Dream code, the image of a rabbit shape would be enhanced, and made very “real.” The code can find images of dogs in abstract galaxy shots taken by satellites, or turn a selfie into a surreal collection of neon eyes. Whatever the outcome, this amusing novelty is actually part of a larger, fascinating development in automation, and one that could have some serious implications for web design.

Recognition is the Key

One of the hurdles faced by artificial intelligence is the actual ability to recognize what it’s looking at. Google, and other companies involved in software and artificial intelligence, have been going to great lengths to create programs that have an easier time understanding what an image holds.

The Future of Automation in Design

For web design, although we aren’t quite there yet, there may be some interesting tools and opportunities for developers. Imagine being able to create not only responsive, resizing websites, but to also create entirely unique responsive graphics based on choices that a user is making. For example, if your site sells certain gourmet foods, an intelligent image selector may “reimagine” the site’s graphical layout to put more emphasis on those foods in image selections, while maintaining your own parameters for color, shape, and more. In other words, the machine could act like the subconscious of your visitor.

The implications are even more interesting for advertising. If you can imagine ads that are unique to each visitor, based off of recognition of different information that your site has received about time of day, habit, and even time spent browsing or reading a particular article, it becomes easier to picture just how effective a “smart ad” might be. It’s just one of the ways in which a machine with image recognition could make a difference in web design. In time, sites could be entirely customizable based on actual user activity– a future which could lead to some fascinating design choices and plenty of work for the designers themselves.

The Beauty of Responsive Typography

There are more fonts than ever floating around online, with far more becoming “standard” as part of what browsers and operating systems actually have on hand to display. Even international sets of characters are more widespread than they’ve ever been which is great news for sites that want to reach across the pond to find even more customers. That having been said, there are also opportunities for responsive website designers that are interested in creating a much more customized experience for users that may be using different devices, each with their own viewports and dimensions to consider.

Just as you can change the aspects of an image with responsive design, you can also pick fonts which may be well-suited for certain restrictions in space. Small, seemingly negligible details, such as stroke width for vertical characters, can become all the more important when you’re comparing a typical screen with one that may be a quarter of its size– lines can disappear entirely, or spaces between characters can become so tight that you may end up with pixels bleeding into one another. It can hurt your aesthetic appeal, and even make certain content unreadable.

With responsive typography options, however, you get some very interesting choices and options that could improve your average user’s experience. Here are a few reasons why responsive typography is the “go to” choice for designers:

The Beauty of Responsive Typography
  • Some fonts were made with electronic screens in mind, and that means that they display more crisply on a screen that has sharp, white background lighting, as opposed to fonts which may be on paper. This can make a big difference in the way that a font is read, and how easy it is on the eyes as a whole. When you’re handling responsive font choices, keep a close eye out for fonts that have been made within the past decade. Even if they look effectively identical to more popular choices, you may find that these electronic-specific fonts have features, even if slight, that their paper-born peers do not.
  • Reading distance makes a difference. Not every device or screen is going to be the same distance away from the reader as the other. In fact, you will find that the difference between the distance of a monitor, and the distance at which you hold a mobile device, can be significant enough to make certain font choices effectively unreadable, or at the very least unappealing, to one demographic or the other. When you’re implementing mobile font choices, you need to take these distances into account.
The Beauty of Responsive Typography

Finally, you may be in luck if you’re in love with a particular font size. Some font families have their own choices for different optical sizes– far more exact in stroke definition and character spacing than simple font size options, these variants may give you the exact font that you want, only in a smaller, or larger, scale of detail. That can make picking your responsive fonts a far simpler task.

Simplicity Still Turns Heads in Design

Your presentation for design needs to have universal appeal if you want to stay in for the long haul, but what that means precisely seems to change from site to site, and designer to designer. Some may say that the universal appeal comes from different geometric choices in how elements are laid out, how they mirror or complement one another, and the exact speed at which an eye will travel over a site's different features, from its text to its menus. Others may point out that universal design choices come down to the actual usability of the site, and how quickly a visitor can get from point A to point B without being weighed down in unnecessary, bloated coding or images.

There's a little truth in both of those ideas, but they also go back to a very easy to remember concept, which runs along the lines of “Simpler is better.” In nearly any design decision, it's best to work from the core of the design option, and to let it speak for itself. For example, if you're interested in a design that you want to make “red,” then there are plenty of ways to approach that project, but you shouldn't let your “red” concept get overwhelmed in the many other decisions that you could be facing, which includes logo choices, banners, and any photos that are listed on the site.

Here are some of the reasons for simplicity's value in design, and why you may want to think again if you find yourself overwhelmed by your design options:

Simplicity Still Turns Heads in Design
  • Simple designs load faster. That may not seem like much, but when the average mobile user could spend as little as five seconds on your site before they decide whether to stay or go, the loading time does actually have a large impact. Obviously, nobody shoots for a site that loads slower than molasses, but simple designs ensure elements load smoothly and cleanly for users of desktop and mobile browsers alike.
  • Visitors often prefer simpler designs. Examining some of the recent rebranding trends in logos, you can see a lot of movement toward simplifying even the graphic that's used to represent a business. Most people prefer a simpler, better defined image over something that has unnecessary bars, colors, and element choices, and that carries over to site design as well. Some of the most popular sites on the web use an extremely limited color palette; companies like Apple prefer the stark monochrome aesthetic in their applications, and their hardware. It's no accident; consumers see a cleaner product, and react accordingly.
  • Speed matters, and not just in the load time. Once the page actually does fully load, your visitor will want to get the information they came for, or place their order, without needing a map to guide them to their destination. That's one of the benefits of simplistic design; you put nothing between your visitor, and their goals.

Responsive Images Made Simple

One of the most dreaded tasks when working with responsive sites is the issue of responsive images. In some cases, you may think that you need to make 3, to 4, to upwards of 10 different image asset sizes to match your responsive parameters. Some sites go even higher on the scale, and that’s a lot of man-hours that you could be dedicating to other design tasks. Thankfully, there are automated resizing tools that can make the task as streamlined as possible, but they aren’t the silver bullet you may be expecting.

Responsive Images Made Simple
  • Pay attention to file sizes. One of the benefits of responsive images lies in the fact that they can make a less bandwidth heavy experience for mobile users that want their pages to load quickly and smoothly. There are automated image resizing tools and scripts out there, including several free add ons for WordPress, but they don’t always take the actual file size in mind. They instead tend to focus on the actual dimensions of the image. That’s good for making a better presentation, but it can be bad for how quickly– or slowly– a web page loads. Pay particular attention to the file size of any resized image assets to ensure that you’re not bloating your site.
  • Sometimes, it’s better to go “native.” Automated tools are easy, but they’re also not always foolproof, as we’ve mentioned with file sizes. One way to actually get your site’s image dimensions on point is to use command line tools, such as open source editor “ImageMagick.” Tools like ImageMagick allow you to put in the important parameters of your responsive images, and to do so with relative ease as compared to trying to do it yourself. It’s more command and flexibility than an automatic image resizer, but takes a bit more time to get used to if you aren’t someone that typically uses command line programs.
  • More than half of a page’s file size usually comes from images, so if you’re not paying attention to the actual resizing for responsive images, you could be weighing your site down more than you realize. Small scale audits of different responsive site layouts can give you a better idea of how much of a burden your images are or are not, and can also give you a better understanding of which pages are working better with responsive coding than others. Don’t forget about your landing pages, either; you want them to load as quickly as possible and heavy image sizes are going to be counterproductive on that front.
Responsive Images Made Simple

Always keep a close eye on the actual images that are displayed, and do so on a device that accurately matches your responsive dimensions, so that you can watch out for issues like overlap, image stretching and warping, and more. Most of these problems can be fixed more on the coding side of the equation than actual image creation, but they are nevertheless very important for a clean presentation.

Monochrome Provides “Timeless” Style

Color choices are becoming bigger, as screens get sharper and images become bolder, but it's hard to dethrone the king that is “Monochrome.” With a simple gradient of black to white, it's possible to establish many different themes within a seemingly limited palette of colors, and to even do so in a way that futuristic, retro, or classic. Whatever your goal is, you may be able to get a lot more mileage from monochromatic looks than you realize.

Monochrome Provides “Timeless” Style

Here are some of the great features of a monochrome design:

  • Iconic elegance. Designing icons and buttons is itself, a challenging task when you're also balancing your color options. When you're down to black, white, and everything in between, then it can free you up to make interesting icon choices for your site. Whether it's social media buttons, or you're looking at different ways to incorporate a “ghost button” style link into an image, the choice of black or white gives you lots of room to create stylish silhouettes, or to create some very simple, and eye catching, black icons for navigation.
  • Appealing photography. Just removing the color from a photograph usually isn't enough to make it look great in a monochrome theme, but it's a start. You may need to balance out the dark and light elements to put more figures into a prominent place in the photo, or even to enhance light sources to create the sort of atmosphere that you intend the site to have– bringing out sharper detail in fog rolling over a city at night, for example. The upswing is that you get some very classic looks for subjects that you may want to put a classy spotlight on, and you can do so with many different types of photos. Natural photography, subject photography, and cityscapes or landscapes all play well with a monochrome theme.
  • Add a little drama. One of the other benefits of monochrome is that you can incorporate color if you want the subject to have a dramatic impact. Whenever there's a black and white photograph, for example, and even one of the objects in that photograph is red, or orange, or blue, it catches the eye immediately. It's best not to go overboard with the concept, but when you're selling products, for example, you can choose to display that specific product in color, with the surrounding elements of the photo being in black and white. It makes an image really pop.
Monochrome Provides “Timeless” Style

Monochrome's an easy choice for many reasons, but it can also lead to too much “sameness” when compared to other black and white themed sites, so it's a good idea to do your research so that you can find new ways to display your own black and white tones. Remember to pay attention to other details, like your borders and your font choices, because when you've removed color as a distraction, even minor details, like line thickness, become far more noticeable.

Better Graphics with Geometrical Appeal, Part 2

In part one of this series, we talked about some of the simple applications that you can use in graphic design with circles, squares, and rectangles. In the second part of these articles, we’ll discuss even more ideas with geometry, which could inspire some really interesting graphic and web design choices in your next project.

Better Graphics with Geometrical Appeal, Part 2
  • Third dimensional designs are a very interesting, and sometimes overused, aspect of using geometry in graphic design. In the most recent past, it’s been used to create some of the “3D” effects that we’ve seen popularized with Apple iOS applications and marketplace presentation, but that type of 3D-design, referred to as “skeumorphism,” is well on its way out. The more modern applications of 3D design in graphics is coming from arenas such as Google’s “Material Design” aesthetic, which makes use of squares, triangulated shapes, and shadowing, to create depth without sacrificing clean lines and colors.

3D design can be simple, or it can be complex, but it almost always relies on proper application of geometry to achieve the desired effect. By using geometry in the Material Design example, for instance, it’s possible to create animated features that are initially “flat” in nature, but which can rise or fall on a flat plane– in this case, a web page– while maintaining proper perspective for it to behave as a real, third dimensional object would. That includes shadowing, which could be considered to be an additional geometrical consideration.

Better Graphics with Geometrical Appeal, Part 2
  • Layering is another branch of the 3D concept that you’ve likely seen applied often in “flat design” aesthetics, wherein shapes are simply layered over one another. There may also be the presence of a shadow border to create the illusion of a 3D look, but the layering itself is often performed in a way that compliments both shapes. It doesn’t necessarily need to be one element overlaying a plain field or defined negative space, but it does need to take into consideration that some elements compliment others, and some merely distract attention.

An example of proper layering in material design could be something along the lines of a series of progressively smaller squares overlaying one another. They may share space, but those squares can each be their own design element and even be incorporated into the user interface when handled properly.

  • Spiraling is akin to layering, in that elements may overlay one another in a circle, or arc, which grows smaller as it curls in on itself. Spirals are a fairly familiar shape, and something of a newer design aesthetic with graphics, but they definitely have an interesting place and function for user interfaces that want to have a branching, expanding menu that isn’t necessarily the same old shape or flow as others.
Better Graphics with Geometrical Appeal, Part 2

It’s always important to think outside of the box, no pun intended, on how you apply geometrical aesthetics. With photo assets, ghost buttons, and other elements, you can create some really outstanding works with fairly simple principles backing them.

Better Graphics with Geometrical Appeal, Part 1

Geometry is one of the standard foundations of graphic design, and art as a whole. Within the different shapes that we see in nature, we also see appealing angles, symmetry, and even the “Golden Ratio” that mathematicians have loved for thousands of years as a telltale sign of promise and value. We look at all of the different ways and shapes for structures to stand, for webs to be woven, and for seashells to grow before they find their way into our beach-themed decorations, and it all comes down to the fact that geometrical design and appeal are a sort of universal value that certainly have a place in modern graphical design.

Better Graphics with Geometrical Appeal, Part 1

As concepts become more complicated, and seemingly trend toward a more “organic” look, we also find that there are different applications for geometrical aesthetics in graphic design as well. Looking at some of the more recent website trends, including larger amounts of negative space, and scrolling “parallax” design, all point toward a continued need to keep objects within certain, appealing dimensions of one another, to keep the eye focused.

With all of that in mind, here are a few ways that you can improve your graphic design assets, using geometry as a guiding light:

Better Graphics with Geometrical Appeal, Part 1
  • You can get a lot of use out of circles, but they don't always need to be a plain, boring line on a piece of paper. A circle, as a graphic design element, is going to be present in just about anything that you do that doesn't involve sharp angles. In one form or another, the circle has a place, either as a button, as a background design element, or even in the choice of stock photography that you incorporate into an image. Human heads are essentially long circles, the planet is a circle, and many popular logos are circular in nature.

The important thing to remember is not that not every circle needs to be completely represented, nor does it need to necessarily be a perfect circle– in fact, half circles provide unique and eye catching user interface elements that you could get a lot of mileage out of. The same is true of circular UI elements as “drop down” or contextual menus, creating a “fan” of options that springs out. Use of circles in this way can be fairly intuitive, and the flow with users should be on point.

  • Squares also have their place, and are the more commonly considered geometric element when you're working with pages that have frames, borders, headers, footers, titles, and banners. While the trend toward organic website looks has moved away from the “boxy” sharpness of a good square or rectangle, they still have some of the ideas in place, if not totally apparent– corners of interest framing negative space, for example, are one square that doesn't have obvious, apparent lines at work.

In part two, we'll look at other geometrical applications for graphic design.

Are You Missing the Mobile Market?

When creating a website, it can be all too easy to work within certain templates or goals, and assume that “good enough” is the same thing as a job well done. Nothing could be further from the case in an environment where new technology is allowing for brand new expansions in a mobile user’s experience, and new tactics that allow for connectivity, content creation, and even social media sharing. Mobile websites that were made as little as two to three years ago could already be behind the curve as far as what’s available, and what’s outdated, which is why it’s never a good idea to set your mobile site in motion and then rest on your laurels.

Are You Missing the Mobile Market?

An Evolving Scene

Mobile internet sites, more than any other currently online, face changes to hardware and software that comes on a regular basis. There have been times where, in as little as one to two months, there have been paradigm shifts that can affect how users experience a mobile site. Here are a few of the ways it happens, and what you can do to stay ahead of the curve:

Are You Missing the Mobile Market?
  • Google’s updates are becoming very mobile-centric, and while that doesn’t necessarily effect your website’s presentation right now, it can, and will, if you don’t pay attention to what those updates are focused on. Google’s mobile search engine updates tend to put a great deal of focus on usability, proper font choices, and now weights responsive designs– those that adapt to the available viewport– over a “one size fits all” mobile design. If your site needs to get viewers, then you need to pay attention to what Google’s valuing.
  • Android and iOS are the most popular platforms for mobile users, and they’re also frequently updated. This affects the viewing experience of users that may be using the mobile iOS and Android browsers of choice, and it also affects different parts of web design, including app design. If you want to stay on top of the mobile market and have a product that continues to sell well, then you also need to be on top of aspects that need to evolve along with their respective platforms. You could be looking at product instability otherwise, or websites that just look chaotic due to relying on obsolete protocols.
  • Hardware changes too, including the trend toward larger screens for smart phones and tablets. Reduction in the borders of these devices has led to a larger screen with thinner edges, and that can add as much as an inch to a viewport. Again, responsive website design can allow your site to look great on these new and ever-expanding screen dimensions.
Are You Missing the Mobile Market?

Not every trend is worth chasing, but you will find that when a majority of consumer electronics is moving into a certain direction, your mobile design needs to follow suit. You may need time to play catch up, but it’s better than being left in the dust.

4 Easy Mistakes to Avoid in Your Website Design

Mistakes in design are common, but they're usually easy to correct, or at the very least, easy to avoid. Here is a list of four mistakes that you'll run into when dealing with web design, either on your own or with a team, and why they matter. This list is by no means complete; it just covers some of the basics.

4 Easy Mistakes to Avoid in Your Website Design
  • #4: Difficult to Navigate.

Every site needs to have a good flow for users to quickly get from point A to point B. For some sites, the intended direction may be from a landing page, and then on directly to the sales or order page. For others, you may want to encourage more browsing behaviors, where users can get a full stock of the products available. With news sites, you want to make it easy for users to find preferred story types or topics. All of this comes down to the ease of navigation, and that can be complicated by how much, or how little, you invest in a solid user interface. If your site isn't easy to navigate, its content is going to waste.

  • #3: Making it Too Generic.

There are stock photos and templates all over the web, many for free or at very low cost, and they can make the process of building a website fast. They can also give your site a “run of the mill” appearance that will quickly get noticed by users that want something a little more genuine. Depending on the nature of your site, a design that's too generic may just hurt your traffic and sales a little, or it could hurt a lot. If your primary goal is to build confidence with the userbase, look more personal, and less like a questionable clone.

4 Easy Mistakes to Avoid in Your Website Design
  • #2: Not Staying Up to Date.

With the recent controversies over Flash design and exploits, it's now reasonable to assume that you should be moving toward HTML5 if you haven't already. Other standards, including responsive web design, are practically expected by the growing mobile markets. If you aren't staying up to date with your web design, your users are going to notice. You may even have people avoiding your site due to security concerns– outdated software means a higher likelihood of exploits.

4 Easy Mistakes to Avoid in Your Website Design
  • #1: Not Prototyping, at All.

A good chef tastes the food that they're making, and they do so often, so that they know they have the right seasonings and cooking times down. If you aren't checking and prototyping your design ideas at multiple stages of the process, you could be facing some serious mistakes once the launch date for your site actually rolls around. One example of this is with mobile sites specifically, and how some images may tear or overlap due to improper responsive coding. It's a problem you would be able to notice right away, as long as you take the time to test your site.

3 Questions to Ask When Choosing the Right Logo

If a picture says a thousand words, then a logo is something that can fill a novel. One look at a logo needs to be able to communicate reliability, excitement, value, structure, global interest, financial power, and an established history. It needs to be friendly, but it can’t be too flippant. It needs to be sharp, but it also needs to have some humanity and some organic qualities so that people can relate to it. A logo is a strange summary of everything that a company is doing right, or doing wrong, and it’s incredibly understandable that so many companies make mistakes that require professional correction.

3 Questions to Ask When Choosing the Right Logo
 

Even graphic artists can struggle with pinning down the right logo. Someone with decades of experience in the field may be left scratching their heads over the right colors, the right levels of detail, and the right symmetry. If you’re currently trying to pick the right logo for your next project, here are three questions you may want to ask yourself.

#3: What’s the Psychology?

3 Questions to Ask When Choosing the Right Logo

It’s easy to overlook the importance of the psychology in a logo, and instead focus on the pure ideas of “being the good guys.” You obviously want your logo to make your company look strong and reliable, but you may be leaving out what exactly you’re reliable for. One of the most well-known logos in the business, Nike’s trademark “Swoosh,” is a simple curved line with an accented tip, but it says a lot about the company’s primary goal– to make you go fast with their shoes and clothing. That instant communication is what motivates people to recognize and value the logo.

#2: Is it Too Much, or is it Too Little?

3 Questions to Ask When Choosing the Right Logo

Another interesting area of focus is going to be the simplicity or complexity of your logo. As a rule, you don’t want to cram too much attention into any logo, as you can expect it to be represented in dimensions as small as a postage stamp. Likewise, if you’re successful enough, it could be blown up to tower over Times Square, and that means that you also can’t make it too simplistic. Think about what you what to represent in a project, and then take away everything that isn’t that, until you’re left with a skeletal logo. That may be the right call for the final product.

#1: Does it Look Good on the Actual Product?

Strangely enough, some people skip this step entirely, but with prototypes of a product that’s going to have a logo on it; you actually can see what it’s going to look like in the real world. You should likely make multiple prototypes with different shapes and color choices, because certain printing processes and surfaces may show colors with differing amounts of sharpness or brightness. For logos that are going on websites, you should still see just how well it meshes with your chosen colors, your responsive dimensions, and even what it looks like on mobile screens with lower brightness levels.