Essential Design Trends, May 2016

Website design sure does look happy these days. Maybe because Spring is in the air or maybe there’s just a good vibe going around. Either way, the trends in website design this month are reflective of that upward feeling, with cool icon-style illustrations, big photography and bright color choices.

Here’s what’s trending in design this month:

1) Icon-style illustrations

It’s hard not to love a great illustration. Some of the best illustrations we are seeing right now have more of an icon-style feel to them. The comes with a few key characteristics:

• Flat and simple illustrated elements (note how all of the tiny illustrations are combined in the Confederation Studio site)
• Bright color or simple coloring featuring primary hues
• Geometric shapes with an interactive purpose
• Elements with the look and feel of the icon, minus the container, so visually you see it as a drawing and not a button
• Hand-drawn illustrative effects
• Elements that looks like icons, but take up considerably more space on the canvas than an icon
• Simple line-style drawings (such as the style from Draw a Better 2016)

What’s cool about this trend is that it works to incorporate an element of whimsy into a design project without feeling overwhelmingly whimsical. It creates a nice balance of handmade and professional. It also takes on a somewhat more masculine feel than many of the other trends that focus on whimsy, such as watercolor or hand-drawn script lettering.

Even if you aren’t an illustrator, this is a trend you can take advantage of. There are plenty of vendors—paid and free—that create vector-based icon kits. Look for a kit that includes all of the actual shape files so you can pull apart pieces, change colors and mix-and-match parts to create oversized illustrated iconography for your projects.

2. Larger than life photography

A big, bold photograph or image makes a stunning first impression. That’s why so many designers are selecting larger-then life images to draw users into their website designs. This design element can be surprising, interesting and be a great alternative if you have one or two great images, but not a large library to work with.

But you have to willing to get a little uncomfortable to get there.

To make the most of the larger-than-life photography trend you need to be willing to do one of three things with the design:

1. Crop a photo so tightly that it takes up a significant portion of the screen, so that the image is scaled to a proportion that’s larger than reality
2. Zoom in to an almost uncomfortable level with images of people and faces to show every detail
3. Stage a standard photo but add an element that’s different or interesting in a way that’s a little unexpected

All three of these techniques might be quite uncomfortable at first. Intense crops, super-close faces and oddities can all make you a little uneasy at first. Approach the visual for this type of design a little differently. Start with the biggest or oddest option possible. Then back off in small increments and evaluate how you feel about the image. Chances are you might end up going back to one of the earlier options.

By taking this approach you allow yourself to see the design and imagery in a different way. That’s what makes this trend so striking—the images are different. They draw users in because the shapes, crops and overall styles are so unlike most of the websites a user lands on every day.

3. Bright color choices

Bright, bold color is in. The trend has influences rooted in Material Design. Even though Material is an interaction-based design style, some of the visual components are gaining traction on their own. This applies to color in particular.

Why use a Material-style color palette if the rest of the design is not Material? It’s a simple way to add a trendy element to a project without a full-scale redesign. You can almost add a bright color and leave the rest of the design alone with just a few tweaks to the CSS or imagery.

What is Material color? There’s no perfect definition, but here’s how Google describes it: “Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.” –https://www.google.com/design/spec/style/color.html

If you are interested in creating a Material-based color palette and need a starting place, try Material Palette. http://www.materialpalette.com/

The bold color options are beautiful and stand out against many of the more subdued minimal-style projects that have been popular. Bright blues, greens and yellows are especially popular as accents in the color palette. The trend seems to be focused on touches of Material color, not full-scale color palettes.

For a project that really wows, it takes a more than just a bright color. The mood of the project should be equally bright.

• Note how Lefty pairs bright green with images of happy, smiling people to create an overwhelming positive mood.
• BNP Paribas uses a bright green to bring users into a game-style interface that is set against a darker backdrop.
• Big Drop uses a bold yellow (and blue, red and green on the scroll) with light images and a fun typeface to draw users in, making the business site seem less formal.

The trick to adding in hints of Material Design-inspired colors is not to lose your branding. Don’t redo your entire color palette based on a trend; rather find a way to incorporate bright color without overwhelming the design. The example uses are great ways to think about it—use a simple colored shape as a visual element, try a boldly colored headline or use bright color panels to create a more immersive interactive experience for users as they scroll down the page.

Conclusion

It’s great when a few trends can just make you happy. That’s what this group does with color and with type choices and with imagery. Maybe it’s not just the influence of spring and we’ll continue to see these elements in even more designs in the months to come.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Facebook; I’d love to hear from you.

How to Design HTML5 games

HTML5 and the term “cross platform” are buzz words, and for good reason. The technology works for smartphones, tablets, laptops and desktops. Agencies love the concept, because any web designer who knows HTML, will understand HTML5. What does it mean for you, the Web Designer?

• More projects involving HTML5
• More projects revolving around interactivity
• Creating experiences for the end user to interact with

At the heart of this interactive experience, are casual games. In this article, I’ll show you how you can get some coveted game design experience. The goal? Have “HTML5 game design” on your résumé.

I play games, but…

It’s a common fallacy among web designers that designing games is a specialized skill. You don’t need to attend game design school, to design games. Anyone can design games. First, let’s break this into parts. Building a game requires 3 major steps:

1. designing the game;
2. producing the visual and audio assets;
3. programming the game.

As a web designer, the easiest way to gain experience, is through designing the game itself. For points 2 and 3, an agency typically already has designated artists and programmers for the job. If you’re good at artwork, 2 is highly attainable. For the purposes of this article, let’s discuss step 1. Where do we even begin? Here are 10 steps that every game designer needs to go through, to earn their stripes.

1) Play lots of casual games

Have an iPhone or Android phone? Go to the App Store, head to the top free games chart. Download and play every single game in the top 20 list. Do this at least once every 2 weeks.

While you’re playing, be conscious of how each game is designed. Which animation techniques and mechanics is it using? Did the characters stand out to you? Did it have a storyline? What did the game make you feel? After 20–30 games, you’ll start to spot patterns.

You’ll notice that some games, at the core are really about the same thing. Eg: Clash of Clans, Boom Beach and Hay Day are about building, defending and attacking.

You’ll notice that simple games, such as Flappy Bird or Swing Copters focus on really hard challenges, which can be repeated an infinite number of times.

You’ll notice that some games focus on compelling storytelling with carefully designed characters.

You’ll also notice a few odd indie games, that’re just downright random but really fun!

2) Make sketches… lots of ‘em

Make sketches of the things you like from the games you played. Sketch characters, maps, menus and user interfaces. Was there a certain character which you liked? Was there a certain angle of the game that made you excited?

Here’s a character called ‘Matt’. He’s a bored office guy, glued to his chair:

3) Make flow diagrams

Flow diagrams describe the step-by-step process of the game. They describe the point where the user starts the game, all the way to important events, such as a victory or loss. Start with simple diagrams like this:

As you gain more confidence, iterate on your simple flow to make more complex flows.

4) Write a game design document

Using what you learned from Steps 1–3, design and write a simplified game design document (GDD). A GDD basically tells the reader what the game is about.

Quick example: Let’s take our character called “Matt” in Step 2, and let’s say he’s trapped in a boring office job. He wants to escape. The catch is, he can only do it from his rolling chair. We’ve produced a neat sketch of the game screen. It shows a maze of office desks conspiring to block Matt’s escape.

As an example, we made the goal of the game simple. Navigate the office maze to escape it.

That’s it, for a very basic GDD. Here’s the complete flow diagram, for our game, Escape The Office.

5) Train your cross-platform mindset

With HTML5 games, a lot of it boils down to being able to run the game on different screen sizes, efficiently. Here’s a rundown of different devices we have in the market: iPhone, iPad, iPod Touch, Samsung Galaxy Note3, Samsung Galaxy Tablet, Google Nexus, LG, Xiaomi, Windows Phone, Windows Laptop, Mac, the list goes on and on… Ridiculous? Yet, this is what large companies do. As an independent designer, how do you design a game, that fits different screen sizes?

1. Fix the game orientation. Design your game such that, it works either in portrait mode, or landscape mode only.
2. Find the most common game resolution that works for most devices. Maintain the aspect ratio. Then, scale up or down, depending on the device resolution. We find aspect ratios of 3:4 (portrait), or 4:3 (landscape) most popular, and efficient.
3. Design lightweight, casual games. Don’t go for the bulky, 3D MMO game. Instead, go for fun, light casual experiences. The game could be as simple as whacking moles, or jumping around platforms. Anything under the sky is fair game (no pun intended).
4. Always draw high resolution artwork. At least 2048px wide as a baseline. It’s easier to scale down than it is to scale up.

6) Start pitching

Ask your company (or clients) if they’re interested in any game-related projects. Show them your designs. Pitch your heart out. Walk them through the GDD.

Your first game idea pitch won’t be like Shark Tank, rest assured! Chances are, they’ll allocate a small budget for the game. If there’s no budget, continue making better designs, and reaching out to other companies. If you have the resources, fund your own game projects on the cheap.

7) Find a programmer

Once you have a budget, start looking for programmers that specialize in game development. Show them your designs, share the budget, and tell them the vision. Most game developers are very helpful. What you need is a programmer that’s well versed in HTML5 games. This person has to know how to code something that scales nicely for all kinds of form factors. Discuss the “cross platform mindset” with the programmer.

8) Grind

The development of the game itself will take weeks, if not months, initially. There will be blood sweat and tears, but it’ll all be worth the experience. It’s very important to keep the scope of your game design very, very small, at least for your first project.

9) Finish the project

The key word here is “finish” the project. Oftentimes, as designers, we want a perfect game. Zero bugs. Beautifully designed game art, with ideal rules. Throw that mindset out the window. Go for “good enough”. Release the game into the wild. Nothing says it like a game that’s live, in the hands of users. You can always polish up the game post-launch. Done is better than perfect.

10) Measure feedback

Check user responses to your game. Use free tools such as Google Analytics to track your game’s views, plays and events.

If you’re designing games to gain social media attention, analyze the Facebook likes, the Tweets and the Instagram Likes. Study how the users reacted to your game.

UI/UX Designing

If you have a passion for art, and a good head for technicalities, chances are that UI/UX designing is your jam.

This is one of the few jobs that provide an outlet for skill, imagination, creativity and technological know-how, which also makes it so demanding.

If you’re looking for ways to improve on your skills, though, this is the roadmap to a pro designer mode.

Spend Time in Drawing and Sketching

The job of a UI/UX designer is to combine the role of a visual artist with that of a techie, but in paying attention to codes and digital designs, but over time I found myself more and more distant my first true passion for art.

This caused difficulties in designing, until the day I picked up a sketchpad and just started conceptualizing…on paper. Just think of what many art classes focus on: positive and negative space, colors, perspective, depth, layout and framing. Each of these elements counts amongst essential skills for an UI designer, and can help you get closer to your dreams of success.

Make Use of User Testing with Prototyping Tools

Image source: Tsuriel

This is an important secret for UI and UX designers: user testing. The basic idea behind it is the thinking out loud approach, which works so well in a variety of fields and situations.

Methods vary from discount testing to lab tests, and there are some really good books if you want to go into details e.g. the Handbook of Usability Testing by Jeffrey Rubin and Dana Chisnel. One of my favorite tools is Invision, which lets me transform my own designs into interactive and totally-clickable mockups.

Optimizing UI and UX for Mobile Devices

Image source: Lukas Horak

One mistake I’ve seen very often is that designers leave just one design framework for both mobile and desktop devices. Realizing this, I mobilized my own design team to work on separate versions.

Together, we created a mobile optimized design module that had bigger text, less number of elements, automatic input zoning, and more such features. One UX design principle we utilized was breaking each task into smaller portions, so that we could focus each task towards one particular process.

We also use particular mobile-oriented designs that factor-in hand/finger positions for hand-held devices.

Utilizing UI Recurring Pattern Libraries

Image source: Gleb Kuznetsov

Design patterns are big on abilities, make no mistake. If you want to up your designing skills, you’ll have to take advantage of these to a great extent. A popular design pattern to use is the Card: you identify a key component, represent it in the form of a card, make sure the user associates the shape/style with something, and then use instant recognition to reduce load.

Unearth the Ways in which Process Works to become Better

Image source: Stano Bagin

If you want to be a great – and not just a good – UX designer, you should turn your attention towards how Processes work. It is a fundamental aspect of designing, so all you need is to choose the right method depending on the context of use.

You can choose Agile development methods for incremental and interactive designing, you can use the Capability Maturity Model (CMM) and Improved CMM (CMMI) for quality control and analysis, and you can use the Lean Startup as a framework for understanding user needs and requirements through the MVP (Minimum Viable Product) hypothesis.

If you Want to Improve, Research Your Potential Users Well

I cannot emphasize on this enough, really! Imagine that you’re trying to sell steak to an 80 year old with no teeth, or a drug to a policeman, and you’ll see exactly how risky it is to go in blind.

Without knowing the age, context, needs and requirements of your prospective audience, you really can’t figure out a good design. A hip and cool nightclub’s web page would be totally different from that of MIT, now, won’t it?

So do a bit of research and find out what kind of things you’ll be offering on the page: then run a mockup to see if it lives up to what you’d imagined inside your head initially. Works like a charm, every time!

Use tools like GoogleDrive

Google Drive is the collaborative cloud storage tool which saved me so many times that I’ve lost count! There’s a reason why it’s so awesome for UI and UX designers, and that’s mostly related to its amazing sharing abilities.

For instance, you can use Sheets to break down tasks, you can use Presentations to represent wireframes and UX flows, and you can use Google Drawing to share simple state diagrams. Plus, you and your team can use it to share notes and feedback: which is very useful especially if you want to make edits later on.

Learn the Technical tricks of the Trade for Great Success

Image source: Prakhar Neel Sharma

Okay, now it’s time to look into some technical aspects like spacing and buttons. Now, web-designing requires typographers, but as an UI/UX specialist, you should have some idea of letter spacing (via CSS letter spacing property).

Next, pay attention to how you use typesetting buttons: misplaces labels are the worst thing imaginable, so be careful! Also, make sure to link with the help of padded block links which highlight clickable areas so as to give users a better experience (it can be frustrating clicking beyond the text are, and finding out you’d been hitting up on blank space all along).

Be careful to add enough padding to the links, because simply converting it to a block format won’t really help much except to increase the width and height.

Improve on Color Skills for Overall Development

Image source: Natalie Berowska

This is another skill development point that should take you back to Art class, but it’s absolutely critical if you want to be a good UI and UX designer. By using correct colors, you can highlight a particular element on a page, provide some good contrast, and direct the flow of attention.

Used properly with the help of block grid elements on a particular page, effective coloration can give a huge impetus to how your design is perceived. Better visuals, more money: at least in my experience of the past years! Besides, color and contrast are great but little known tricks for managing your visitors’ attention and focus.

Use design elements like Lines, Animation, White Space

Image source: Ramotion

The reason why I’m paying so much attention to white spaces, line and animation, is that I learnt its importance the hard way. When I first designed a website for a client, I hardly knew about these factors. Speaking to him after about a month or so,

I learnt of the less-than expected success of the site. I was young, naïve, and optimistic, so everything was personal: which is why I went back to some guidelines and tried to analyze what went wrong.

Using white space more often, a couple of animated elements, and some lines to draw between components, I offered another version of my initial design. Surprisingly enough, this actually worked and led to some great feedback.