A GraphQL Primer: The Evolution Of API Design (Part 2)

In Part 1 we looked at how APIs have evolved over the last few decades and how each one gave way to the next. We also talked about some of the particular drawbacks of using REST for mobile client development. In this article, I want to look at where mobile client API design appears to be headed — with a particular emphasis on GraphQL.
There are, of course, lots of people, companies, and projects that have tried to address RESTs shortcomings over the years: HAL, Swagger/OpenAPI, OData JSON API and dozens of other smaller or internal projects have all sought to bring order to the spec-less world of REST.
Source: Smashing Magazine

Respect Always Comes First

The past years have been remarkable for web technologies. Our code has become modular, clean and well-defined. Our tooling for build processes and audits and testing and maintenance has never been so powerful. Our design process is systematic and efficient. Our interfaces are smooth and responsive, with a sprinkle of beautiful transitions and animations here and there. And after so many years, accessibility and performance have finally become established, well-recognized pillars of user experience.
Source: Smashing Magazine

Automated Browser Testing With The WebDriver API

Manually clicking through different browsers as they run your development code, either locally or remotely, is a quick way to validate that code. It allows you to visually inspect that things are as you intended them to be from a layout and functionality point of view. However, it’s not a solution for testing the full breadth of your site’s code base on the assortment of browsers and device types available to your customers.
Source: Smashing Magazine

Free Live Course: 15 Time Saving Shortcuts for Adobe XD

 15 Time Saving Shortcuts for Adobe XD

Join us for a free live stream, where experienced Envato Tuts+ instructor Dan White will share 15 time-saving tips and shortcuts to help you in your next Adobe XD project. From working with text on paths and understanding layout grids, to learning about publishing options and masking; we’ll cover all these shortcuts and more. So download the starter files, join in the live chat, and enjoy the livestream!

The course will be free for everyone who joins live, so don’t miss out on your chance to follow along and ask questions. Envato Elements subscribers will be able to access the recorded version of the course on Tuts+ once it is published. 


Source: Webdesign Tuts+

Bad Icon Design: 3 Pitfalls and How to Avoid Them

Let’s look at three common mistakes and pitfalls when designing icons, and ways to avoid them!

Pitfall 1: Icon is Too Complex

An icon may be designed to represent a complex topic but it should avoid being overly complex itself. Complexity affects scalability and can lead to it being unrecognizable. An effective icon is meant to be recognizable and unique at a glance, at whatever scale. 

Take a look at this simplified “Lightly” icon; it scales more effectively and still conveys the same concept. 

iOS 6 vs iOS7 icon
Lightly icon redesign for ios7 by Jay Kwong

Solution: Use simple, unique shapes that best convey the concept without any superfluous details. Get to know the scalability requirements for your icon and design for your constraints. Simple and distinctive icons can be highly effective. 

Pitfall 2: Icon is Designed in a Silo 

If your icons look like they wouldn’t fit together visually side by side, you may have been designing the icons in a silo. Icons for a digital product should fit in with the overall visual strategy to look and feel like a family. This is a common pitfall that can happen if newer icons are designed over time and by different designers. 

Facebook’s latest mobile icon set has a cohesive look due to the use of rounded shapes and simple line styles. 

Facebooks cohesive icons
From Facebook and Instagram get redesigns for readability on TechCrunch

Solution: Design icons as part of a set. Use common perspective, line weights, color choices and styling to ensure a cohesive feel. Approach the icon design by focusing on the context where it will live. 

Pitfall 3: Icon is Designed From Scratch

Icon libraries exist for a reason. Use references to get a sense of what visual metaphors exist for your concept, and don’t make assumptions about what works for an icon before gauging the existing landscape. An icon designed from scratch may be confusing to users from differing cultures and backgrounds. 

“Settings” icons are typically depicted by a gear, but that’s not always the case.

from icons8com
From icons8.com

Solution: Utilize existing icon libraries to start brainstorming your icon concept. Be aware of any potential differences or alternative meanings of symbols across cultures as well as consistency with shapes used for common icons.

Learn More About Icon Design


Source: Webdesign Tuts+

Ghost Button Design: Is This Really Still A Thing (And Why)?

For such a small design element, buttons sure are a complicated one to tackle. It makes sense, what with call-to-action buttons serving as the next step in your visitors’ path to conversion. Mess that up and you might as well say “bye-bye” to business.
Though we have a good understanding of the types of button design rules that universally work, there will be times when you’re surprised by a rogue element that performs well.
Source: Smashing Magazine

How to Use Variable Fonts on the Web

Variable fonts were developed as the joint effort of the four biggest tech companies involved in type design—Apple, Google, Microsoft, and Adobe. As the name suggests, variable fonts allow designers to derive an unlimited number of font variants from the same font file. This way it becomes possible to adjust the typeface to different devices, viewports, orientations, and other design constraints.

Why Use Variable Fonts?

Variable fonts significantly reduce the limitations of current font formats. Today’s web fonts are inflexible and don’t scale very well; they only provide us with some fixed styles with names like “Light”, “Bold”, or “Extra Bold”. There are even typefaces that only have one weight or slant variant. With variable fonts however, we have access to an infinite flexibility of weight, slant, x-height, slabs, rounding, and other typographical attributes.

Better still, variable fonts improve performance. Web fonts as we know them need each font variant to be stored in a separate file. For instance, this is how the folder of the Roboto web font looks:

Contents of Roboto web font folder
Contents of Roboto web font folder

Variable fonts use a single font file that the browser only has to load once. Upon being loaded it can serve all the variants from just that one binary. 

So, here is a brief comparison:

  • Roboto: twelve font files, twelve variants.
  • Variable fonts: one font file, unlimited variants.

As you can already imagine, our typographical options grow incredibly with variable fonts.

The OpenType Font Format

So what file format do variable fonts use? According to the official docs:

“OpenType fonts may have the extension .OTF or .TTF, depending on the kind of outlines in the font and the creator’s desire for compatibility on systems without native OpenType support.”

To be completely accurate, variable fonts were introduced in version 1.8 of the OpenType font file specification. OpenType is an extension of the TrueType font format, therefore variable fonts are available as either .otf or .ttf files.

Design Axes

The new OpenType font file specification comes with a new technology called OpenType Font Variations that allows us to interpolate the font along numerous design axes—up to 64,000 according to the Adobe Typekit Blog.

The OpenType 1.8 specification defines five registered axis tags:

  1. weight <wght>
  2. width <wdth>
  3. optical size <opsz>
  4. slant <slnt>
  5. italic <ital>

Moreover, type designers can also define custom axes along with their own four-character tags in the “name” table of the font file.

Below, you can see a great illustration of how design axes work (from John Hudson’s article on Medium.com, referred to by Typekit as the non-official announcement of variable fonts). It demonstrates a three-axis variable font with weight, width, and optical size axes:

Design axes of a variable font
John Hudson

The red glyph in the middle represents the set of outlines stored in the font, the green glyphs represent the extremes of the three axes, and the orange glyphs represent the corner positions. 

The whole cube represents the design space we have access to if we use this three-axis variable font. It’s a cube only because the font has three dimensions (weight, width, optical size). With fewer axes, we would move downwards towards a rectangle (2-axis) or a line (1-axis) and with more axes, we would move upwards into a multi-dimensional hyperspace. 

And of course, a real-life 3-axis variable font wouldn’t necessarily be a cube but more likely a rectangular cuboid, as the different axes in most cases don’t have the same length.

Named Instances

Variable fonts still allow type designers to define named instances—specific font variants among the unlimited number of options. For instance, Adobe’s Variable Font Prototype contains two axes (weight and contrast) and eight named instances (Extra Light, Light, Regular, Semibold, Bold, Black, Black Medium Contrast, Black High Contrast).

Named instances are more important if we want to use a variable font with design programs such as Adobe Illustrator. On the web, we can easily generate any instance (named or unnamed) with CSS (e.g. in the Adobe Variable Font, the Extra Light named instance takes the minimum value of both the weight and contrast axis). 

Adding Variable Fonts to a Web Page

We can add variable fonts to a website using the @font-face rule at the top of the CSS file.

For instance, we can add the Avenir Next variable font with the following CSS rule:

You can find more variable fonts on the Axis Praxis website (it also has a playground for variable fonts), on the GitHub pages of different type design companies (e.g. MonoType, Type Network), and Typekit has also started to publish the variable font versions of their most popular Adobe Originals families.

Note: not every OpenType font you’ll find on the web is a variable font (they were introduced only with version 1.8).

Setting Font Variations With CSS

To define font variations, we can use the font-variation-settings CSS property introduced with the CSS Font Module Level 4. This is a low-level property that allows us to control variable fonts by specifying a value for each axis.

Example 1: Avenir Next

The Avenir Next variable font contains two design axes: weight and width—both are registered axes. Avenir Next also has eight named instances (Regular, Medium, Bold, Heavy, Condensed, Medium Condensed, Bold Condensed, Heavy Condensed).

Avenir Next Bold Condensed
Avenir Next Bold Condensed

The full CSS (belonging to a random unnamed font variation) looks like this:

We can use any value (even float numbers) for the axes between the min and max values. In case of Avenir Next, we can use the [400, 900] range for weight and the [75, 100] range for the width axis.

Where to find the ranges? The font files contain the font variation (fvar) tables that hold the necessary data. However, to access that information, we need to view the contents of the font file with a tool such as FontView. Sometimes the documentation of the font contains the ranges, but unfortunately this is not always the case. The good news is that the Axis Praxis website contains the min-max values for all the variable fonts it features.

Example 2: Decovar

Decovar is one of the most versatile variable fonts that currently exists. You can find it on Axis Praxis, on GitHub, and it also has a demo page on TypeNetwork’s website. Decovar contains one registered (weight) and fourteen custom axes, and also has seventeen named instances.

From Decovar’s GitHub docs, here are some variants we can achieve with this 15-axis variable font:

Decovar font variations

The CSS we need to use is similar to the previous example. Here, we have to define all the fifteen axes (inline, sheared, rounded slab, stripes, worm terminal, inline skeleton, open inline terminal, inline terminal, worm, weight, flared, rounded, worm skeleton, slab, bifurcated).

Note: we have to specify a value for all the axes in the font-variation-settings property—even those we don’t want to use. 

In case of Decovar, we can use 0 as value for the axes we are not interested in; these will be rendered with the default value. This isn’t always the case though, as it depends on the ranges the font uses for the different axes. Decovar is easy, as it uses a 0-1000 range for all axes, and 0 is the default value for all.

You can generate similar font-variation-settings declarations with Axis Praxis, you don’t have to calculate the values on your own. The CSS above generates the following font variant:

Decovar custom font variant
Decovar custom font variant

High-Level CSS Properties

The font-variation-settings property is a low-level property and according to the W3C recommendations it should only be used if other methods are not available. What does this exactly mean?

According to the CSS 4 specifications, we will be able to control registered axes with higher-level CSS properties in the future, namely:

  1. font-weight (will control the wght axis)
  2. font-stretch (will control the wdth axis)
  3. font-style (will control the slnt and ital axes)
  4. font-optical-sizing (will control the opsz axis)

The first three properties exist since CSS2, however the CSS4 specifications expand their usage. We will be able to use them not only with predefined keywords (e.g. normal or bold for font-weight) or round numbers (e.g. 400, 600, 800, etc.), but also with all numbers on a predefined scale (for instance, font-weight will range between 1 and 1000 & font-stretch will range between 50% and 200%).

These features are still in the experimental phase, though. So for now, the reasonable thing is to keep using font-variation-settings, as currently this is the most stable property for accessing the axes of variable fonts.

Support

As variable fonts are still very new, browser support is not yet perfect. The latest versions of Chrome and Safari already support them, but Edge and Firefox still lag behind (however variable fonts are already available in Firefox Nightly and Firefox Developer Edition). Since the Oct 2017 release, Photoshop and Illustrator also support variable fonts.

Learn More About Variable Fonts

We can expect variable fonts to bring incredible changes into the world of web typography. As it’s getting more and more support, it’s time to take a plunge into learning and experimenting. Check out the following resources:


Source: Webdesign Tuts+

Dwelling On The Past: The Importance Of Self Reflection (Part 2)

Current and aspiring web professionals must continually grow in order to stay relevant. Our field doesn’t allow for stagnation. In part one of this series, I discussed the importance of project retrospectives in facilitating and documenting team growth. We don’t always have the luxury of engaging in team retrospectives, or even of working on teams. Personal reflection provides similar benefits, while focusing on your individual experiences.
Personal reflection enables us to process and make meaning of all of the great (and not so great) learning and working experiences we’ve had.
Source: Smashing Magazine

New Course: The Designer’s Guide to JavaScript Optimization

Using JavaScript can help you add some wonderful features to your website, but it can also slow the site down and frustrate potential visitors. Discover some easy solutions in our new short course, The Designer’s Guide to JavaScript Optimization.

Screenshot from The Designers Guide to JavaScript Optimization

What You’ll Learn

In this short course geared towards web designers, you’ll get a great introduction to the topic of JavaScript optimization. Instructor Craig Campbell will show you some easy-to-implement techniques for making your JavaScript, and thus your websites, run smoothly.

You’ll learn about efficient DOM traversal, cleaning up your markup, optimizing animation, and more.

Watch the Introduction

 

Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 420,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.


Source: Webdesign Tuts+

5 Features to Consider When Building an Artist’s Website

Just as art can take many forms, an artist’s website can serve many purposes. First and foremost, if you’re an artist, your online home should provide a showcase of your work. But there are other key functions that can enhance the user experience, while ensuring that your talents are also financially (and otherwise) rewarding.

Let’s explore some features that make for a great artist website. Each feature is further illustrated by one of the 250+ outstanding WordPress themes available with a yearly subscription to Envato Elements.

1. Choose a Design Complementary to Your Art

Great art evokes feeling, so it’s important that your website tries to capture a bit of that as well. Depending upon the type of work you do, this could either be quite obvious or slightly more subtle. For example, the look of your site could be an ode to the type of materials you use (wood, clay, etc.). Or, it might feature a background that represents your overall style. Regardless, your website should be a reflection of your art.

Lenze - Portfolio Photography WordPress Theme
Lenze: Portfolio Photography WordPress Theme

The Lenze theme is an excellent choice for photographers or visual artists who want to reflect the personality of their work. The full-screen slideshow on the homepage helps to create an instant impact and sets the emotional tone. It also features a number of compelling portfolio layout options that you can use to create the visual effect you’re looking for.

2. Bring Focus to Your Work

Because the web isn’t necessarily limited by physical space, it’s easy to go overboard when designing a website. This is especially tough on artists because any unnecessary distractions can really take away from the art itself. When taken together, every little design detail we include can add up to something we didn’t intend. So it’s important to ask yourself what is vital and what can be tossed aside. In general, simple is better.

Arte  Art Gallery WordPress Theme
Arte: Art Gallery WordPress Theme

With Arte, you’ll find a theme that really does bring the focus to your work. The design is beautiful but very understated. Built for art galleries and museums, it features an elegant UI and the ability to bring several artists under one website. It’s great for art collectives, but could also be a good fit for a solo artist with an extensive portfolio.

3. Make a Connection With Fans

For many artists, having a loyal fanbase is what sustains their career. Musicians, for example, won’t be able to keep touring and recording without that support. Keeping fans in the loop when it comes to events like concerts should be a priority of your website. And, if you sell your work online, having an easy-to-use shopping experience is a must. Lastly, invite fans to be part of your inner-circle with features such as a regularly updated blog and access to multimedia.

SoundRise - Music and Artist WordPress Theme
SoundRise: Music and Artist WordPress Theme

SoundRise provides the ability for musicians to showcase their craft and serves as a great hub for fans. The theme features multimedia playback, includes a calendar to list appearances and WooCommerce support for online shopping. Plus, since it’s based on WordPress, you’ll be able to easily publish a stylish and informative blog.

4. Find An Interesting Concept

While art is often serious, it’s okay to have a bit of fun with your website, where appropriate. You don’t have to go to extremes, of course. But adding a creative twist to normally bland elements like headlines or portfolio listings just make things that much more interesting for visitors. It encourages them to stick around and dive deeper into your offerings.

Qusq Pro - Flat Colorful Portfolio
Qusq Pro: Flat Colorful Portfolio

The Qusq Pro theme can help to spruce up your portfolio with a design that is fun and functional. Its use of multi-colored headlines, animations and staggered gallery layouts are bound to help you stand out. The result is a feel-good repository for your art.

5. Dare to Be Different

Traditionally, art has been a driver of cultural change. It has challenged the status quo and compelled us to think in new ways. A website that does things a little differently can be a small part of that tradition. While that doesn’t mean we should go against the grain of accessibility and ease of use, it does allow plenty of room for innovation.

Color Folio - Portfolio Color Theme
Color Folio: Portfolio Color Theme

Color Folio certainly fits the bill of a theme that does things differently. Most noticeably, it’s wildly colorful–yet still very easy to read. Navigation is also different, with the ability to hop from page to page via a mouse’s scroll wheel (don’t worry, clicking still works, too). You’ll find a fun and eccentric UI that also serves the needs of users quite well.

A Portrait of the Artist as a Website

Being an artist poses both a unique challenge and an opportunity. You must find a balance between the need to share your work with the world in an interesting way against the needs and expectations of a modern website. It can be difficult to get it just right. But the rewards can be great for those who achieve that goal.

Ultimately, your website should be about who you are and what you do. Use it to reflect the personality of your art and allow interested visitors to join in the experience.

Each of the themes profiled above can help you get off to a great start. They provide a terrific frame for your painting, so to speak. From there, it’s up to you to fill that frame with something beautiful.

Man and Woman fine art painting
Man and Woman fine art painting


Source: Webdesign Tuts+