Popular design news of the week: April 10, 2017 – April 16, 2017

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Design Concept: MacBook Pro 2018

 

The Latest Photography Trends in Web Design

 

Why Gradients are the New Colors

 

3 Ways to Improve your Visual Design Skills

 

Yes, React is Taking Over Front-end Development. The Question is Why…

 

7 UX/Usability Tools to Try in 2017

 

How Much will your Website Cost?

 

Google Updates Material Design and Adds Color Tool

 

Google’s AI Doodle Bot will Transform your Crude Drawings into Glorious Clip Art

 

How to Redesign an Airline

 

Diverse UI 2.0 – Free Diverse User Images Now with Sketch Plugin

 

With Sketch 43, Design is Code & Code is Design

 

Government Logos from Best to Worst, Ranked by Roman Mars

 

How to Design 404 Pages with Awesome UX

 

Glitch – The Community Where You’ll Build the App of your Dreams

 

UI Components for Building Amazon / Yelp-like Search

 

Semantic UI

 

Burst — Free Photography for Entrepreneurs Powered by Shopify

 

Google Now Lets You Submit URLs for Indexing Straight from Search

 

Illustrator, the 30-year-old Pro Design Tool, Gains the Ability to Crop Images

 

Why ‘Mobile First’ May Already Be Outdated

 

The Complete Guide to the Product Design Process

 

A Comprehensive Guide to E-Commerce Platforms

 

A Designer’s Guide to Working in Tech

 

The Global State of the Internet in April 2017

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source

Foundation Adopts CSS Grid, Launches Building Blocks

If you don’t write a lot of CSS yourself, you might think of CSS Grid as that thing Rachel Andrew keeps tweeting about. Well, it’s a whole new system for layout, and Zurb is apparently following her feed. So are most browser vendors.

At the time of this writing, CSS Grid is supported in the following browsers:

  • Chrome. Enabled by default since version 57.
  • Firefox. Enabled by default since version 53.
  • Internet Explorer. Enabled by default since IE10
  • Opera. Enabled by default since version 44.
  • Safari. Enabled by default since version 10.1.

That’s right. Internet Explorer got there first. It’s always a little awkward when that happens. Anyway, this info comes from Zurb themselves, who have announced the inclusion of CSS Grid in Foundation in their latest blog post. They have three reasons for the switch:

They want to stay ahead of the pack

Foundation has made its bread and butter by staying out in front of emerging web technologies, and giving web designers a reason to adopt them. If you want long-term legacy browser support, there are other frameworks for that. Foundation likes new things, and so do its users.

For them, this kind of fairly-early change is business as usual, rather than a radical departure from the norm.

CSS Grid is just better for big layout stuff

On the surface, it seems like Flexbox meets the same needs as CSS Grid, and the support’s already here. Well, it’s not as simple as all that.

While Flexbox was certainly an improvement on the old float-some-things-and-absolutely-position-others school of layout, it was not without its quirks. It lends itself more easily to allowing your content to define how it’s displayed. People seem to agree that it’s great for laying out content within the smaller elements of a page.

CSS Grid seems to have been designed with the larger page layout in mind. It makes it easier to create, manage, and “responsify” large layouts with fewer lines of CSS than other options. As easy layouts are sort of Foundation’s whole deal, it makes sense for them to incorporate CSS Grid.

They think we should ditch the page metaphor anyway

Zurb and many others seems to believe that the whole concept of the “page” is going the way of the dodo, at least for designers and developers. CSS Grid apparently works quite well with modular systems that treat layouts as a collection of reusable elements rather than a single page.

This way of thinking is especially popular with developers and designers who work on apps or very large websites more than five-page brochure sites. That includes Zurb. Go figure.

The way forward is paved with Building Blocks

Is this a good thing for web des… yeah I’m not even going to finish that. CSS Grid is taking off big-time. Foundation adopting it means that it is, for the foreseeable future, pretty much official: CSS Grid is a thing. And hey, it might take some getting used to, but I like it.

Besides, Zurb isn’t stopping there. The adoption of CSS Grid has led Zurb even further down the path of modular code. They just released a new set of pre-coded UI components that they’re calling Building Blocks. Building blocks will not be part of the Foundation core. They’re extensions. Download them, drop them into your project, and go.

So far, they consist of individual UI elements coded by Zurb — as well as code patterns created by the community — specifically to work with Foundation. Then there are curated sets of Building Blocks called Kits, that are designed to make it easier to build a specific kind of site. There are kits for eCommerce sites, portfolio sites, admin dashboards, and more.

Readers with eidetic memories may remember that Rafi Benkual talked about this very concept back in our interview with him and Kevin Ball. Well, they’ve done it. It seems Zurb is determined to make it easier for designers to focus on UX concerns and aesthetics without doing all of the grunt work themselves. And push the web forward.

I can get behind that.

Source

Stoli Vodka Redesigns Website With Pop Art Focus

It’s not all the time that a major brand of vodka redesigns its website to be extra artsy, but that’s precisely what Stoli Vodka has recently done. The famous Russian vodka’s site underwent a radical redesign that’s characterized by a dynamic homepage that sees fresh content every 24 hours. What also stands out to visitors landing there is the vibrancy and loudness of the colors.

According to its press release, the point of the unique redesign is to celebrate the ordinary moments in a range of things: sports, pop culture, food and beverage, social media, and entertainment. Every time Stoli’s homepage sees a new theme, there’s a vodka-based tie-in, too: Visitors will see a corresponding, new cocktail and a fun fact meant to engage its customers.

Whimsicalness seems to have been a central purpose of the redesign, as fundamental elements like the site’s navigation benefit from unexpected twists. For instance, are you looking for the navigation menu? If you are, simply hover your mouse over the cocktail shaker in the top-right corner of the homepage. Once you do that, the shaker…begins shaking, and a tooltip with the “open menu” information appears. Once you click the shaker, the menu opens, sliding in from the right.

Think of this as a twist on the old hamburger menu, where the navigational elements are hidden. However, since Stoli’s an alcoholic beverage brand, it’s clever to have a shaker take the place of the hamburger.

Whereas some brands are content to merely publish more content on their sites and so help their SEO rankings, Stoli goes a bit beyond this by dedicating its site to daily content refreshes. The content changes, but the content that surfaces is intentionally relevant to the brand’s target audience.

Another feature of the redesign is its attentiveness to social media. Certainly, brands like Stoli, which rely on the communal nature of enjoying spirits, understand that their products are almost tailor-made for social media. To wit, if you’re enjoying a new flavor of vodka that you just discovered, you’ll probably want to let your friends know about it, too.

To that end, Stoli’s homepage now features a big, black-and-white social-media button in the bottom center, which visitors can click on to show Twitter, Facebook and email icons for easy and handy sharing of Stoli content.

The site’s redesign also benefits greatly from its reliance on high-quality and extremely engaging imagery that showcases its different bottles, cocktails and logo, but the strength of the redesign lies in how easy it is to access information. Any visitors interested in how to mix a certain cocktail simply have to click on the inviting image and then get shown the recipe on the next page.

Similarly, the site’s Story and History sections are just as engaging. The former uses video and a long-scrolling page to educate visitors about everything Stoli, and the latter relies on a neat, horizontal timeline to showcase key moments in brand history.

 

Source

How to Move Your Design Workflow to the Cloud

In an era where using the cloud has become something of the norm, it’s worthwhile to look at how this technology and way of working can be implemented into your design workflow to help improve the way in which you and your team work.

As a designer, there are a number of aspects which have to considered separately in order to move your entire workflow to the cloud. From versioning to icons, and fonts to collaboration, moving your design workflow to the cloud can make substantial improvements to the way you work. In this article we are going to look at some of the benefits of doing so, and some of the best solutions to help you on your way.

Moving my design workflow to the cloud has made it made it more efficient and easier. I’d highly recommend moving as many aspects of your workflow to the cloud as possible, and seeing how much it can help you in improving your process and management of files and projects.

Benefits

More accessible

Let’s say, for example, you leave your computer at home by accident. A fairly basic example, but with a simple sign in to a few accounts you can have your same workflow, and files, up and running in a matter of minutes. It takes the emphasis away from your computer and places it with the applications and software you use.

Safer

No longer is there a single point of failure

No longer is there a single point of failure. If you forget to backup your files and subsequently have an issue with your computer and even lose or have your computer stolen, cloud services such as Dropbox have your back. These services keep multiple backups of your files and allow you to restore versions in an instant.

Multiple machines

Many designers use more than one computer. Whether that be an all-in-one and a laptop, or a home computer and a work computer, using the cloud to manage your workflow keeps everything in sync seamlessly across these machines. This means no more downloading icons onto two separate computers, or having trouble sharing color palettes.

New computer

We all have to replace our computer at some point. Using a cloud-based workflow allows you to switch to a new machine in under an hour. A simple sign-in to multiple accounts and you’re up and running, taking away the inconvenience of transferring fonts and email accounts, and installing plugins and extensions.

Save space

For computer users with a solid state drive, you know all too well that while the performance is superior to its hard disk drive predecessor, the storage space is significantly less for the equivalent price. Most cloud storage services are now incredibly competitively priced and certainly in my case allowed me to save money by purchasing the very smallest SSD available. Having transferred my workflow to the cloud, I now use less than 10% of my SSD capacity—a significant reduction from before.

Drawbacks

Internet speeds

Not everyone has access to the sort of internet speeds which allow you to sync large files in a timely manner. It can be incredibly frustrating when you save a file and it takes 15 minutes plus to sync. This is a significant limitation but hopefully one that most people will be able to overcome at some point in the near future. Despite this, it still allows many aspects of a cloud workflow to be implemented, specifically with smaller assets such as fonts and icons.

It can be incredibly frustrating when you save a file and it takes 15 minutes and upward to sync

Internet connectivity

Many cloud-based apps are improving the experience for users who are lacking internet connectivity for a period of time. Google Docs with the offline functionality, for example, allows for as little interruption to your workflow as possible. Other apps are still not quite at the same level and so it’s an important consideration when your workflow involves long periods of being disconnected from the internet.

Solutions

Having summarized some of the benefits and drawbacks, we’re now going to look at some of the most effective and leading solutions in each main aspect of design.

File-syncing

Dropbox is the big name when it comes to file-syncing. And with good reason. It’s well designed, stores deleted files for 30 days, and has a whole host of other features, particularly on the Plus plan.

By shifting all your files into Dropbox, you can rid of the constraints and backup requirements which come with storing files on your computer. It’s cheap, easy, and accessible. Plus, you can quickly share screenshots without cluttering your desktop or having to pay for a Droplr or CloudApp plan.

Design software

I appreciate designers have different specializations and therefore require different software. However, if your workflow allows for it, I can’t recommend Figma highly enough. It seamlessly syncs your files to the cloud (without even using Dropbox).

It also allows you instant access to the full Google Fonts library, and can be accessed from anywhere (including the browser) with just a login. Figma also creates backups of each version which can be restored instantly.

Browser

Chrome is more consistent cross-browser, and handles a number of cloud-based applications such as Google Docs and Figma much better than its counterparts. Its selection of design-oriented extensions is also far more comprehensive in comparison with other web browsers. A simple sign in gives you access to all the web-based software you need. In fact, I personally could use Chrome alone, since all the other apps I use such as Figma and Slack are available in-browser.

Passwords

Any cloud-based design workflow needs quick and easy access to passwords

Any cloud-based design workflow needs quick and easy access to passwords. I’m not going to recommend a specific password manager but would recommend using one of them, not least for the fact it’s convenient.

Team assets

Keeping assets synced between teams can be difficult. Figma has now launched their Team Library which allows you to sync components (a.k.a symbols) between team members in real-time. For other apps such as Sketch and Photoshop, I’ve found the best solution to be Craft which allows you to sync and share any layer/group/artboard including style guides in Sketch with your coworkers.

Fonts

For premium fonts software such as Typekit are very easy to use and host a wide selection of fonts at an affordable price.

The fonts can be quickly synced to your computer and work especially well when combined with packages such as Adobe Photoshop, Illustrator, or Experience Design.

Icons

Personally, I use a mix of Dropbox and Figma to sync and access my icons. Desktop apps such as The Noun Project are extremely simple to use and keep your icon assets in sync, while also allowing instant access to thousands of new icons.

Source

Magic Members Review: A Feature-Rich WordPress Membership Plugin

Membership sites are an increasingly popular way to monetize a website. With a membership site, you restrict access to some or all of your content. And if users want access to that restricted content, they need to sign up or pay. Simple enough, right? I love membership sites because you’re fully in control of your revenue. No need to worry…. Continue Reading

The post Magic Members Review: A Feature-Rich WordPress Membership Plugin is written by Colin Newcomer and appeared first on WPKube.

Dropbox Redesigns its UI for Better UX

Whenever you’re working with teams as a web designer, chances are that you’re using Google Drive, Evernote, or Dropbox for any collaborations like file and image sharing. Sharing services like these make it a cinch to work remotely with teams from anywhere on the planet.

Dropbox understood the context around file sharing and the broader element of team activity, which is what its website’s redesign is all about.

According to a recent blog post on the company’s site, their latest redesign is meant to serve team-first functionality for users, thereby making Dropbox more than just a place to safely store users’ files, but also facilitate well-organized conversations and interactions around said files.

To achieve these UX goals, the company decided to simplify its navigation. This allows users to avoid the long conversations through email and instead share Paper documents and files, leave feedback, and quickly see any status updates—all from the Dropbox interface.

The toolbar has also gotten a facelift. Now, only the pertinent, next steps for a user’s workflows are displayed, based on his selections.

As a result, users should be able to get more work done and work faster, as the navigation now produces less friction.

The way information is presented to users is also improved. There’s more information on tap at a glance; users are now allowed to use a thumbnail view to visually browse their files, as well as check who is collaborating with them on shared files and folders.

If you’ve ever searched on Dropbox before, you’ll remember that it wasn’t always the most intuitive feature. Thanks to this redesign, Dropbox search surfaces results across both Dropbox Paper documents and users’ files.

Sometimes, it gets hard to differentiate between work and personal tasks when you’re using cloud services like Dropbox. Part of that has to do with the interface not making distinct enough separations.

Dropbox’s overhaul offers clearer account separation, letting users distinguish between their work and personal accounts with greater ease. One of the biggest differences is that users will only see their specific search and notifications for the account that they’ve signed into.

Overall, these design changes should turn Dropbox into a better organized cloud-sharing service that streamlines tasks and therefore improves the UX.

The company’s not done, though. In the near future, you can expect to see a new administration console that will improve how Dropbox Business’ administrators manage their teams.

For more detailed info on how users can get the most from the redesign, see this overview.

 

Source

How to Build a Custom Email with Foundation for Emails

Building email templates is down right hard. Building responsive emails is even harder.

Luckily, the kind folks over at Zurb have developed a fantastic framework that makes the process of building responsive emails easier than it has ever been before.

Foundation for Emails (formerly Ink) is a framework tailor fit for a modern designer/developer looking to use the tools and technologies of today to build responsive email templates for tomorrow.

The Numbers Don’t Lie

According to Zurb, 54% of emails are opened on a mobile device and this number is likely to rise. With that figure in place, the need for a responsive email template is a must. Zurb also states that 75% of Gmail users access their account from their mobile device.

No matter the type of email sent, Foundation for Emails has you covered. In fact, once you launch their handy project builder you are greeted with sample templates to either reference or customize to your heart’s content.

Getting Started

Throughout this article, I will be showing you how to get up and running with Foundation for Emails using a custom template I designed for my own small branding agency. As with any framework, it’s imperative for you to reference the documentation. I won’t be going over every detail as Zurb already has but this guide will be enough for you to hit the ground running.

Source Code

You can find the final source code to this project on GitHub.

Installation

To begin you can opt in to use traditional CSS or Sass. I’ll be making use of Sass.

There are many reasons I recommend going this route as opposed to traditional CSS. These reasons include:

  • More control over the framework’s visual styles
  • A full build process including Sass compilation and image compression
  • A custom HTML language known as inky which means you don’t have to write table based layouts by hand.
  • A built-in inliner for distributing your CSS as inline CSS
  • Live reloading
  • Handlebars templating

Note – The Sass version requires Node.js to run. Be sure to install it before going forward.

Install the Foundation CLI and Create a New Project

The installation process makes use of the Foundation CLI. To make use of it open your command line program of choice and type the following:

Bash $ npm install --global foundation-cli

If you run into any permission errors, try prefixing the same command with sudo. You’ll be prompted to enter your system password.

With the Foundation CLI installed, you can now create a blank Foundation for Emails project. Be sure to move to (cdinto) the folder you want to install the project in, and then run the following command:

Bash $ foundation new --framework emails

The CLI should ask you for a project name (I called mine newsletter). This name is what the folder the entire project will be labeled as. After that is set, a number of dependencies will install. (This could take a while to download.)

Once the download completes you should see the following:

Bash You’re all set!
✓ New project folder created.
✓ Node modules installed.
✓ Bower components installed.
Now run foundation watch while inside the <projectname> folder.

cd into your project folder by typing cd newsletter. Your project name may vary compared to mine but if you are following along you should be set to go.

Running the Server and Compiling Assets

From within the terminal run the command:

bash $ npm start

This will fire off the build process I mentioned before. The build process will parse HTML, compile Sass, compress images, and launch a server. Your default browser should pop open a new tab point your index.html file from the address of localhost:3000. From this page, you can visit the sample templates Foundation for Emails bundled with the install.

Assessing the design

With Foundation for Emails installed and our project running on the server provided by the framework, we are ready to dive a bit deeper into handling the design shown below.

coc-emails

For the most part, the design is minimal with placeholder content for a newsletter style email. Going forward we will modify elements within the template to make any changes. It’s a bit more hands on than a WYSIWYG email builder like the default MailChimp templates for instance, but for the sake of custom branding, it’s well worth the time. I think most users would agree. You could certainly extend this to utilize the editor within Mailchimp but that’s a topic for another time.

Starting Fresh

Assuming you are using the Sass version, Foundation for Emails comes bundled with Inky HTML which is their own creation. This HTML is responsible for making writing tables and advanced table-layouts a breeze.

The documentation for Foundation fro Emails is the best place to learn all there is to know about the custom Inky HTML you can use in your own projects. Be sure to refer to it often.

We will be working inside the src folder within our project folder. These files are being watched via gulp.js and some included plugins. When changes are made to our template code and/or styles all the files in the dist folder are updated accordingly. I won’t go deep into how all of this works but I remember when I was new to it all it seemed like magic!

Index

The index page you see is found inside src/layouts/index-layout.html. Foundation for emails makes use of Handlebars which allows you do templating inside basic HTML pages. For example, you can create a partial HTML file that gets included into another file dynamically.

Note the {{>body}} tag. All the content essentially gets imported here, in the end, thanks to the HTML parsing available inside the framework.

Pages

Every page you see within src/pages/ is what initially gets displayed when you run $ npm start for the first time. Each page is a sample template provided by Zurb.

Copy the contents of newsletter.html and create a new file called branded-newsletter.html. Paste the contents inside. Within this file, we will build the branded template I shared before.

Inside the file, you should see a lot of foreign looking HTML tags. These are part of Inky HTML. Essentially by using them, you can get away with never having to physically code table layouts. (You can’t use divs inside of emails like you would web pages; the same is true for many CSS properties.)

Below is a brief overview of tags we will make the most use of:

  • <container> – A wrapping element which has a set width.
  • <row> – necessary for wrapping columns of content similar to a floated grid on websites.
  • <column> – where most of your content will live. These can be customized using a 12 column layout. They behave like a floated or flexed div but involve tables.
  • <menu> – create a menu inside an HTML email using tables.
  • <spacer> – vertical spacing for email templates. Many mail clients don’t respect margin or padding via CSS. This is a great solution for it. Set any size by adding the attribute like this so: <spacer size=”16″></spacer>.
  • <button> – create a button with tables.

On top of these tags are additional CSS classes you can add, customize, and extend via Sass.

Scaffolding the Newsletter Template

For the sake of brevity, I am summarizing the coding process and showing you all of the HTML before I style it. This allows me to build a skeleton of sorts for the template and worry about styles later. Below is the HTML I ended up with for the design. This template lives with the pages directory and gets included in the layouts/index-layout.html file where you see the {{> body}} tag.

html

<container> <spacer size="16"></spacer> <p class="text-center"> <small>Email not displaying correctly? <a href="#">Click here</a></small> </p> <spacer size="36"></spacer> <a href="https://coupleofcreatives.com" class="logo"> <img src="https://coupleofcreatives.com/public/logo.svg" alt="Couple of Creatives Logo" width="135" height="68" class="text-center logo" /> </a> <spacer size="24"></spacer> <row class="main-nav"> <columns> <menu class="small-vertical"> <item href="https://coupleofcreatives.com/work">RECENT WORK</item> <item href="https://coupleofcreatives.com/blog">BLOG</item> <item href="http://bit.ly/2oOk3SW">YOUTUBE</item> <item href="https://coupleofcreatives.com/contact">WORK WITH US</item> </menu> </columns> </row> <spacer size="16"></spacer> <p class="issue-meta"> <span class="issue-number">ISSUE #100</span> <span class="issue-sep">•</span> <span class="issue-date">MARCH 29, 2017</span> <p> <spacer size="5"></spacer> <p class="intro"> Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. </p> <spacer size="16"></spacer> <hr class="divider" /> <spacer size="16"></spacer> <h2>Recent case study</h2> <img src="https://coupleofcreatives.com/public/case-study-image.png" width="600" height="324" alt="Screen shot of a case study for Wildwood Family Dentistry from Couple of Creatives" /> <container class="case-study-description"> <columns class="content"> <h4>Wildwood Family Dentistry</h4> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <spacer size="12"></spacer> <button href="https://coupleofcreatives.com/work/wildwood-family-dentistry/" class="small-expanded">View Case Study</button> </columns> </container> <spacer size="48"></spacer> <container class="blog"> <h2>From the blog</h2> <a href="#">This is a headling to a external link</a> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <spacer size="16"></spacer> <a href="#">Donec id elit non mi porta gravida at eget metus.</a> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <spacer size="16"></spacer> <a href="#">This is a headling to a external link</a> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </container> <spacer size="16"></spacer> <hr class="divider" /> <spacer size="16"></spacer> <h2>Watch our latest video</h2> <a href="#"> <img src="https://coupleofcreatives.com/public/video-image.png" width="600" height="337" alt="A still of a Couple of Creatives during a video shoot" /> </a> <spacer size="16"></spacer> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <spacer size="16"></spacer> <button href="#" class="secondary small-expanded">Subscribe to our channel</button> <spacer size="32"></spacer> <hr class="divider" /> <spacer size="16"></spacer> <h2>Follow us on instagram</h2> <a href="https://instagram.com/coupleofcreatives"> <img src="https://coupleofcreatives.com/public/instagram-image.png" alt="Instragram photos of Couple of Creatives" width="600" height="294" /> </a> <spacer size="36"></spacer> <hr class="divider" /> <spacer size="16"></spacer> <container class="footer"> <a href="https://coupleofcreatives.com" class="logo"> <img src="https://coupleofcreatives.com/public/logo.svg" alt="Couple of Creatives Logo" width="135" height="68" class="text-center logo" /> </a> <spacer size="32"></spacer> <row class="footer-social-links"> <columns> <table class="social-menu"> <tr> <td> <table> <tr> <th class="menu-item"> <a href="https://facebook.com/coupleofcreatives"> <img class="text-center" src="https://coupleofcreatives.com/public/facebook.png" alt="facebook" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://twitter.com/couplecreatives"> <img class="text-center" src="https://coupleofcreatives.com/public/twitter.png" alt="twitter" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://instagram.com/coupleofcreatives"> <img class="text-center" src="https://coupleofcreatives.com/public/instagram.png" alt="instagram" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://www.youtube.com/channel/UCwLgeZi57pzy-Q4LgvBBXRA"> <img class="text-center" src="https://coupleofcreatives.com/public/youtube.png" alt="youtube" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://www.linkedin.com/company-beta/10487750/"> <img class="text-center" src="https://coupleofcreatives.com/public/linkedin.png" alt="linkedin" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://plus.google.com/+Coupleofcreatives"> <img class="text-center" src="https://coupleofcreatives.com/public/googleplus.png" alt="google plus" width="21" height="21" /> </a> </th> </tr> </table> </td> </tr> </table> </columns> </row> </container> <spacer size="12"></spacer> <p class="text-center"><a class="footer-cta" href="https://coupleofcreatives.com/contact">Need marketing? Hire this creative duo</a></p> <spacer size="12"></spacer> <p class="text-center"><small>You received this email because you’re signed up to get updates from us. <a href="#">Click here to unsubscribe.</a></small></p> </container>

Inside the HTML you will see a lot of the custom tags mentioned before. The spacer element, for example, I utilize a lot to create vertical spacing. I do this simply because not all email clients honor margin and padding. To save the fuss the spacer element helps tremendously.

Adding the Styles

Since I’m using the Sass version of Foundation for Emails I’m able to create partials and import those into the master app.scss file which in return gets compiled to the dist folder as app.css.

I’m making use of a font called Ideal Sans. Unfortunately, I can only use it on my specified domain which means you won’t be able to make use of it for the headings on your end. If you are following along the headings will have Arial as the fallback for the base font.

Most of the customizations you can make to the styles bundled inside the framework are found in the assets/scss/_settings.scss. This file has a variety of variables ready to be customized to match your own branding.

On top of customizing these settings, I created some partials of my own. I imported these files into the app.scss file.

Responsive Emails

Foundation for Emails has support for responsive emails out of the box. Using the bundled <container>, <row> and <columns> tags you can essentially do the same handy work as you would in the browser. Within columns you can specify specific classes to establish a 12 column grid. For example, If I wanted to have a two column grid I would write:

html <container> <row> <columns small="12" large="6"> Column 1 </columns> <columns small="12" large="6"> Column 2 </columns> </row> </container>

Based on the screensize of the user these columns will appear at 50% width on larger screens and 100% width on smaller screens. If you’re familiar with popular CSS frameworks like Bootstrap or Foundation this should be pretty easy to grasp.

Using Images in Emails

Images need to be loaded from a web server using absolute url paths and preferably from the same domain as the person’s email who is sending it. So if I were to send an email from info@webdesignerdepot.com to my subscribers the images would need to live under the same webdesignerdepot.com domain name.

Doing this eliminates the probability of your email being misdirected to a spam folder and also appears as more professional.

Alt Tags Are a Must

If you don’t normally use alt tags (I don’t know why you wouldn’t) you need to in emails. Many mail clients don’t load images by default and it’s up to the user. Alt tags can help describe the image before the user even sees it. This is both great for accessibility and a graceful fallback for those not interested in loading images in the emails they receive.

Building Production Files and Testing

Production based emails need to have their CSS inlined. Inlining is the process of defining the styles on the element itself rather than linking from an external stylesheet. Foundation for Emails has a handy build feature that does this for you. The final files get compiled and minified inside the dist folder.

To build production files you’ll want to kill any servers already running by typing ctrl + c in your terminal program. From there type:

Bash $ npm run build

When the email opens in the browser you should see the same as you did before. But, If you look closely at the source of the page you will see a mess of code. This is the result of the build process and assuming everything looks good, is ready to use in the wild.

minified-code

Testing

I can’t stress enough how important it is to test on as many email platforms as you can. Your design will likely look different on all of them but the goal is to create a solution that at least looks consistent and legible across most platforms.

You can use a tool called Litmus for this test. There’s a free version of the tool that allows you to copy and paste your code and send an email to yourself or colleague. Be sure to do this step. Emails that get sent obviously can’t be edited after the fact.

Useful Links

Source

7 Ways to Delight Users with Animation

“Delight” is a word that we’re hearing and using more often to describe pleasurable moments in our products. Delight is the magic that makes us fall in love with a product. It’s a core element to strive for when designing. When it comes to providing pleasure or delight in our websites and apps, animations contribute a lot.

Why delightful animation is important

Digital design plays a crucial role in how customers experience a product. Modern design is highly focussed on usability, because usability allows people to easily accomplish their goals. However, designing for the user experience has a lot more to it than making a usable product. Good design is pleasurable and seductive. Good design is delightful. “At this point in experience design’s evolution, satisfaction ought to be the norm, and delight ought to be the goal,” says Stephen Anderson. Animation can help you achieve this goal.

When to use delightful animation

Just like any other design element animation should contribute the user flow. Delightful animations are pleasurable for the user without detracting from the usability of the app. There are two cases when implementing delightful animation into your digital designs can strengthen UX:

  • Engaging and entertaining. Entertaining animation draws attention to our products by creating a strong first impression. It can make our products more memorable and more shareable.
  • Baking emotion in design. Showing the human side of your business or product can be a very powerful way for your audience to identify and empathize with you. The aim of emotional design is to create happiness. You want people to feel happy when they use your product.

Let’s look at a few ways animation can help create delightful moments:

1. Keep users interested during loading

Loading time is an unavoidable situation for most digital products. But who says that loading should be boring? When we can’t shorten the line, we can certainly make the wait more pleasant. To ensure people don’t get bored while waiting for something to happen, you can offer them some distraction: this can be something fun or something unexpected. While animation won’t solve the problem, it definitely makes waiting less of a problem: fine animation can distract your users and make them ignore long loading times.


Credits: Dribbble

2. Make a great first impression

First impressions count: people judge things based on how they look. Good animation throughout the onboarding flow has a strong impact on how first-time users will engage with the app. A good first impression isn’t just about usability, it’s also about personality. If your first few app screens look a little different from similar products, you’ve shown the user that your entire product experience will likely be different too. For example, animating an illustration for a new feature can educate the user about the feature in a memorable way.


Credits: Dribbble

3. Make your interfaces feel more alive

Creative animation can make your user experience truly delightful: they can transform familiar interactions into something much more enjoyable and have the power to encourage users to actually interact. Attention to fine movements can increase the level of usability and therefore desirability of the product.

4. Incorporate emotional interactions

Focusing on user emotions plays a huge role in UI interactions. As Aarron Walter said in his book Designing for Emotion: “Personality is the mysterious force that attracts us to certain people and repels us from others.” Using animation you can establish an emotional connection with your users, and remind them that there are real humans behind the design. An example of animation from ReadMe is full of emotions.

5. Help user recover from unexpected errors

‘Errors’ happen. They happen in our apps and they happen in our life. Sometimes they happen because we made mistakes. Sometimes because an app failed. Whatever the cause, these errors — and how they are handled — can have a huge impact on the way user experiences your app. A well-crafted error handling can turn a moment of failure into a moment of delight. When displaying an unexpected error, use it as an opportunity to delight with animation.


Credits: Dribbble

6. Make a complex task feel easier

Animation is able to transform a complex task into an inviting experience.  Let’s take a MailChimp case for inspiration. What makes MailChimp awesome is its smooth functionality wrapped in cheeky humor and friendly animation. When you’re about to send out your first campaign, the accompanying animation shows how stressful it is. Mailchimp brings empathy to the design: by combining animated cartoons with tongue-in-cheek messages like “This is your moment of glory,” MailChimp softens the nervousness of sending your first emails.

7. Breathe fun into the interactions

People love to discover treats in interfaces just as they do in real life. The joy is more than the treat, it’s the discovery of the treat and the feeling that someone took the time to think of you.


Credits: Dribbble

People will forget what you said, people will forget what you did, but people will never forget how you made them feel.—Maya Angelou

Never underestimate the power of delight to improve the user experience. The difference between products we love and those we simply tolerate is often the delight we have with them.

Of course, before your application can create an emotional connection with the user it must get the basics right.  Thus, make your product a joy to use by connecting feelings with features!

Source

How to Stress Test a WordPress Website

One thing they don’t tell you about starting a blog or business site is that someday your website is going to reach its limit. Hosting companies don’t have any interest in informing you about this, and the plugin and theme developers are simply trying to make more sales. So it’s tough to tell whether or not a plugin will conflict…. Continue Reading

The post How to Stress Test a WordPress Website is written by Brenda Barron and appeared first on WPKube.

The Best New Portfolio Sites, April 2017

Hey readers. I’d go for some sort of April fool’s joke, but I’m having a hard time competing with reality these days. I did, however, manage to coin a new term for a design trend that I’ve been seeing a lot.

You can find that about three websites in. So what are you waiting for? Go (ethically) steal some ideas!

Hugo Brook

Hugo Brook’s portfolio doesn’t bother with imagery, and for good reason. Hugo is primarily a developer. The emphasis is placed on describing the tools he uses, and linking to live site’s that he’s worked on.

The monospaced typographical approach fits the theme, and the vertical navigation is an interesting touch.

CreatLive Studios

CreatLive Studios puts their work front and center in a fairly typical masonry layout. Bonus points for the use of yellow. Things get really good, however, when browsing through their individual projects, and on the Services page. These are the parts of the site where their particular style really comes into play.

Hula Hoop

Hula Hoop’s portfolio uses a combination of familiar hipster typography and asymmetry, resulting in an aesthetic I’m going to start calling “post-business”. It’s a style that aspires to be professional, yet stylish, with aspirations to artistry.

It’s not a bad look, but I’m starting to feel that it’s not nearly as original as people hope. Still, Hula Hoop uses it well, and combines it with a bold red color scheme. I mean it…all the text is red. You’d think that wouldn’t work, but they pull it off.

Patrick David

It’s not every day that you get to see a site’s grid (or part of it) incorporated into the finished product. Patrick David seems to have done just that in his one-page portfolio. Heck, while I’m making up names for design styles, I’m going to call this one “programmer-chic”.

I keep making up names like this, I’m going to have to start a dictionary site.

Rakesh

Rakesh has taken the rock star approach to marketing in that I haven’t been able to find his last name yet. His site looks fantastic, though. There’s a huge emphasis on typography in this mostly-monochrome sites, and it never starts to feel stale as you browse through it.

Mashvp

Mashvp is classically minimalist, with lots of white space and large type. There’s not much that stands out on its own except that strangely hypnotic “swinging” letter M on the home page. Put the whole thing together, though, and you get an eye-pleasing site that gets the job done.

Brooke Promnitz

It’s hard to make a site look professional and playful at the same time, without it looking tacky. Brooke Promnitz has done it. Everything from the color choices to the typography gives off a fun-loving vibe, but still makes you seriously consider hiring her.

Shantell Martin

Shantell Martin is an artist, and that definitely show in her site. It’s wild, it’s playful, and then it gets all minimalist and asymmetrical as your browse deeper into the site. Now, I’m not sure why they mixed some of the navigation into the animated illustrations on the home page. It’s easy to miss in there, even being as big as it is.

Still, this is all about finding new design ideas, and this site has plenty to share. (Hint, click on the logo. It’s worth it.)

Prashant Sani

Prashant Sani has combined that aforementioned programmer-chic aesthetic with a fair bit of animation, and a lot of geometry-themed imagery. It’s bold, it’s stark, it’s very nerdy. The navigation feels a bit over the top for a one-page portfolio, but it’s a great-looking site overall.

Drexler

I am on a roll today, because I get to make up another term. Drexler’s home page has inspired me, and I’m calling it the parallax collage. Go, scroll down that page. You’ll see it pretty quickly.

Meanwhile, the rest of the site doesn’t let up, because the portfolio section has an honest to God marquee. I mean, okay, it uses the aside element, but I thought marquees were basically dead. A relic of the Geocities era, and Yahoo’s old home pages. Shows how much I know.

Sam Williams

It’s minimalist, it’s dark, it’s actually kind of low-key for a video portfolio. After all of the over-the-top video portfolios I’ve seen, I’m okay with this.

Art Processors

This portfolio might feel like a museum website, and it’s supposed to. Art Processors make multi media experiences for museums, to help show off the exhibits, and inform the visitors. Therefore, the site uses a lot of muted tones, subdued typography, and a lot of white space. It all fits together perfectly, given their clientele.

Basic

Basic does everything from branding, to websites, to video production. To accommodate all of that, they keep their aesthetics fairly simple, and animate the heck out of everything. Between the solid type, and the heavy use of video, they’re showing off. And I can’t say it didn’t work on me.

Vyctoire

Vyctoire is pleasantly minimalist, and highly animated. It almost feels like it’s been a while since I’ve reviewed a site that was more like a presentation, but here we are. That’s mostly on the home page, though.

So while this site won’t be winning any accessibility prizes, I still enjoyed browsing through it. The animation is done in a tasteful, almost understated way. The whole thing just looks great.

subsign

subsign isn’t anything special in terms of layout or type, but there’s a vibrance to the whole site that I can’t help but enjoy. As much as I love my minimalist, mono-or-duo-chromatic designs, I also gotta love a site that just goes all out with the color and life. It it a little distracting sometimes? Sure, but when you need to do actual reading, they do tone it down quite a bit.

Parallax

Parallax’s site is extremely minimal and uses no JS whatso… I’m kidding, obviously. It’s called “Parallax”, so it’s got more animations than you can shake a stick at.

Even without the animation, though, this would be a visually impressive site. It takes that post-business feel to a whole new level. They use every layout trick in the book to keep you staring, and it worked on me.

Brand Almanac

Okay, I know I said that using yellow well is an easy way to impress me. Brand Almanac might be taking it a little far with that home page. That said, Brand Almanac is now one of the most easily memorable sites on this list, not least because it was the last thing I saw before I lost my sight.

Okay, slight exaggeration. Still, I’d call it a bold choice… perhaps even a daring risk.

Sebastian Graz

Sebastian Graz brings us a portfolio that embraces asymmetry like many others, but without the nearly compulsory post-modern or artsy feel that many others employ. It gives me the sense that he’s not showing off. He’s just showing you his work, and having a little fun on the way.

Source