Archive

Archive for June, 2016

Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns” (Pre-Release)

June 28th, 2016 No comments

Accessibility has always been a slightly unsettling realm for web developers. Surrounded with myths, misunderstandings and contradicting best practices, it used to be a domain for a small group of experts who would “add” accessibility on top of the finished product.

Pre-release: Inclusive Design Patterns written by Heydon Pickering

Today we’re privileged to announce our brand new book on inclusive design patterns, written by Heydon Pickering, with dozens of practical examples of accessible interface components and inclusive design workflow, applicable to your work right away. With this book, you’ll know exactly how to keep interfaces accessible from the very start, and how to design and build inclusive websites without hassle and unnecessary code.

The post Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns” (Pre-Release) appeared first on Smashing Magazine.

Categories: Others Tags:

An Introduction To Redux

June 28th, 2016 No comments

Redux is one of the hottest libraries in front-end development these days. However, many people are confused about what it is and what its benefits are. As the documentation states, Redux is a predictable state container for JavaScript apps. To rephrase that, it’s an application data-flow architecture, rather than a traditional library or a framework like Underscore.js and AngularJS.

An Introduction To Redux

Redux was created by Dan Abramov around June 2015. It was inspired by Facebook’s Flux and functional programming language Elm. Redux got popular very quickly because of its simplicity, small size (only 2 KB) and great documentation. If you want to learn how Redux works internally and dive deep into the library, consider checking out Dan’s free course.

The post An Introduction To Redux appeared first on Smashing Magazine.

Categories: Others Tags:

How to Blur Backgrounds in Adobe XD

June 27th, 2016 No comments
Dansky_Learn How to Quickly Blur Backgrounds in Adobe XD

In this tutorial, we’re going to learn how to quickly blur backgrounds in Adobe Experience Design CC (Adobe XD).

The Steps (1-8)

1. Create a New Artboard. For this tutorial, we’ll be using the iPad artboard, with the orientation being adjusted to Landscape in the Property Inspector.

2. Select the Rectangle Tool, Left-click and Drag to create a four-sided shape that is the same width and height as your artboard.

3. Next, Drag the image that you would like to blur, from your desktop or folder, into Adobe XD and on to the shape that we created in Step 2.

blur-backgrounds-adobe-xd-1

4. Repeat Step 2 and create a second four-sided shape, that again, is equal to the width and height of your artboard.

5. Select a Fill colour of white or #FFFFFF for this new shape, and in the Property Inspector, select the tick box Background Blur – this will blur the image behind the shape.

6. The options that appear underneath (from top to bottom) are Blur Amount, Brightness and Opacity. The Blur Amount adjusts how ‘blurred’ your image underneath the selected shape will be, and goes up to +50. The Brightness adjusts how light and dark affects your image, and can be adjusted as low as -50, and as high as +50. The Opacity adjusts the amount of transparency for the shape created in Step 4, and how visible your image underneath is. Opacity ranges from 0-100%.

blur-backgrounds-adobe-xd-2

7. Selecting a different Fill colour and adjusting the Opacity slider below, allows any colour to display transparently over the image as an overlay.

8. The Background Blur effect can also be toggled on/off at any time in the Property Inspector.

blur-backgrounds-adobe-xd-3

Download Adobe Experience Design CC (Adobe XD).

Read More at How to Blur Backgrounds in Adobe XD

Categories: Designing, Others Tags:

MOO’s Chad Jennings: Meaningful Design Starts with People

June 27th, 2016 No comments
Chad Jennings Web Design Ledger Interview

“There will always be a new technology, such as virtual reality, or in the case of paper and packaging, the internet of things. That will certainly change the medium, but the hardest part will always be to create meaningful products and services. For me, this always starts with a person”.

Chad Jennings Web Design Ledger Interview

Chad Jennings, VP of Product Design at MOO

Chad Jennings, VP of Product Design at MOO, has throughout his nearly 20 years in the business arguably helped shape user-experience design into what it is today. From the beginning, the ever-evolving internet of things has ignited Chad’s creativity and approach to his work. Chad’s initial love of design came by way of computers – finding the design of interfaces much more of a draw than the underlying workings of the machine itself. He went on to study user-centered design at the Illinois Institute of Technology in Chicago and began his UX/UI career working at firms Method and Smart Design. From here, he went on to found Blurb.com, an experience that would help shape his approach to designing physical products that are sold in a digital marketplace. Today, Chad finds himself in London leading product design for MOO, a brand loved by creative businesses and professionals for its customer-centric approach.

Throughout his career, Chad has watched design tools and mediums evolve but believes the core inspiration behind design remains the same – people. Chad and the product design team at MOO work tirelessly to keep customer desires as the driving force behind their work, approaching things with a human touch that can be hard to achieve online. Read on to see how Chad and the MOO team come together to create their designs, and why he believes you should “eat a lot of cake”.

 MOO's Farrindgon, London office

MOO’s Farrindgon, London office

Let’s start from the beginning. You’ve worked for and co-founded some exciting companies over the course of your career. In doing so, you’ve managed an array of different teams (product, design, marketing, content, etc.) How did you end up in your current role at MOO?

I moved to San Francisco in ’99, and after stints building my own design chops and helping to form interaction design practices in the agency world at Method and Smart Design I had the amazing opportunity to co-found Blurb in 2005. Richard Moross, MOO’s founder and CEO launched MOO around the same time and so we crossed paths as part of the first wave of Web 2.0 companies. MOO and Blurb had many parallels including a brand loved by designers and photographers. In fact, both companies saw massive early growth in part because of our partnerships with Flickr, one of the first major photo-centered social networks.

So I admired MOO, especially the amazing brand Richard and the team crafted. I’d recently moved to London and when Richard asked me to lead Product at MOO, it was an easy decision. I also oversee physical product design and UX, which I love, as it keeps me grounded in the beautiful world of tactile design and artifacts. That said, I was also drawn to MOO for the opportunity to innovate in the digital space, most recently with the launch of Monogram, our iOS app to help you show your work, pitch your business, and share what you do.

What ultimately led you to focus on UX/UI?

I grew up a bit of a computer geek, coding BASIC, creating low-res games and playing text adventures on my Apple IIc (yes, I’m old). I started out studying computer science, but found my interest in the interface and psychology of how people used the computer, more than the underlying code. I love pinball and similarly was much more into the game design than the mechanical bits underneath. I was lucky enough to find my way to the Institute of Design at the Illinois Institute of Technology in Chicago which was one of the first programs to teach user-centered design. I found my calling there which brought together technology, business and design into what we now refer to as UX. Steve Jobs once said “design is not just what it looks and feels like. It is how it works.” I think that is more important today than ever before.

MOO is the second company you’ve worked with that makes beautiful physical products that are sold exclusively online. How did your experience of co-founding Blurb influence how you approach UX/UI as a whole and your job at MOO?

Blurb actually had two designers on the founding team; myself and Brian Burkhart, now at Gensler. Brian’s background was in book packaging and graphic design. We were joined early by Alysha Naples, currently leading interaction design at Magic Leap. Our collaboration in defining a new brand and the physical and digital product experience at the same time was key to Blurb’s early success. Truly outstanding user experiences are seldom individually led, especially at Blurb and MOO, which are both characterized by fairly complex service design problems encompassing; e-commerce, design tools, a two-sided marketplace, packaging, and customized, on-demand premium physical products. That experience continues to influence me, and at MOO we’ve built a design-centered culture that draws really talented creative thinkers and makers. As a leader of both product management and UX, my job is to help clearly define customer problems and let the teams iterate on elegant solutions. I also believe user-centered methods drive easy-to-use, delightful products that have helped both Blurb and MOO stand out in rather competitive markets.

What are the challenges you face designing physical products that are sold online?

MOO serves both creative professionals and creative businesses who may value quality design and premium print, but not have the skills to translate that vision into a brand. For professionals, the biggest challenge is communicating our quality and innovation through photography, copy and brand. We offer two types of free sample packs; one for business cards, and another containing all of our printed products. We also have our ‘MOO Promise’ that is important for an online physical product provider, and states – “We’ve never thought ‘satisfaction guaranteed’ was the most inspiring phrase. We’d like you to be satisfied of course, but we’d prefer it if you were absolutely thrilled beyond words with your order.”

We believe strongly at MOO that good design works wonders and high-quality design should not only be available to professionals or those that can afford an agency. For non-designers, our online templates and creation tools need to be extremely easy to use and represent what they will receive in print. This is not always easy, especially as we explore innovations such as Printfinity (our patented technology that allows you to print a different photo or design on every MOO Business Card, Sticker or Postcard in a pack) and our recent launch of gold foil, spot gloss and raised spot gloss.

Take me through a day in the life of the UX/UI product team at MOO. How do you bring together the different teams (project managers/engineers/other designers) to ultimately bring to life MOO’s products?

The answer to this question is ever evolving as each team, problem and context changes over the course of a product lifecycle. That said, at MOO we have a few foundations all teams build upon. First, we always try to start with our customer. Who are they? What are their desires and pains? What jobs do they want our product to do for them? We use classic UX tools, such as personas, to help reinforce that we aren’t building products for ourselves.

Next, all our product teams are built around a concept of cross-discipline “crews”. Crews vary in size from 5 people up to 15 people, but the goal is that each crew has everything they need to deliver and ship their product. Every crew tends to include product management, product design/UX, engineering, QA and in most instances a shared user researcher. We feel strongly this decentralized and embedded model of design org, where designers sit with their crew(s), is extremely important. It creates a strong feeling of ownership, allows for quick iterations, and design is part of the team. This is in contrast to the “agency” model which may be more efficient, but doesn’t empower strategic design or a co-ownership of the products. Peter Merholz, one of the co-founders of Adaptive Path, has a book coming out soon titled the “Org Design for Design Orgs” where he proposes a hybrid “Centralized Partnership” model. The entire team recently had a workshop with Peter and were trying to shift how we work a bit. Like I said, always evolving.

In addition, the crews are (mostly) organized by the user journey. For example, we have crews devoted to the “Browse”, “Build”, and “Buy” experiences instead of the underlying tech. This keeps us all thinking about the overall user experience. Finally, each crew and the entire Org uses OKRs, which stand for “Objectives and Key Results”. Simplistically, an objective is the dream – a stretch goal or product theme – and the key result is how you plan on measuring success. Every crew crafts and commits to these each quarter. We then share these and align regularly. Given we now have 10+ crews all working on their section of the user journey, this alignment is extremely important.

How do you approach the task of designing products that will be the face of thousands of brands while maintaining the quality and feel MOO is known for?

From quite early on MOO recognized that building a strong brand was extremely important as a differentiator. Creating that trust takes years and a consistent commitment to quality design is what many companies lose as they grow. For my product team, we’re so lucky that we can focus on building the best products and digital experience, because we know we have amazing product marketing and comms design teams that are ready to scream and shout (in a uniquely MOO way) about the products. We move fast, but if it doesn’t meet our quality level it will never see the light of day.

We also spend a lot of time and effort creating truly unique features to help our customers, and MOO, stand out from the competition. MOO started with mini-cards, invented (and patented) Printfinity, launched our one-of-a-kind Luxe line, and most recently launched our Tailored collection (gold foil and spot gloss), as well as our Business Cards+ with NFC embedded technology, and Monogram app.

For someone not familiar with MOO, how do you explain what sets the design of your products apart? In other words, why choose MOO?

There are many different elements that make MOO what it is today. We pride ourselves in being able to make great design accessible to all, whether that’s a single business owner operating from home, or a large enterprise with thousands of employees – and are constantly looking at technologies to help our customers achieve their design potential regardless of skillset. Design is at the heart of what we do, and that in itself sets us apart from our competitors. For design professionals, we offer a full upload option to bring their own designs to life, as well as plenty of inspiration on our site. For other customers, we have hundreds of stunning design templates that are easily customized on a user-friendly interface and can be ordered swiftly, as well as Printfinity. We strive to make things incredibly human at MOO, through little messages on cards and stickers included in our orders, the language we use when talking to customers on social channels and via email, as well as award-winning and down to earth customer service.

Do you have a favorite MOO product/project you’ve worked on recently?

Well, frankly, last year was a blast. We’ve begun a natural progression into the digital space, but are still making products true to the MOO brand and our mission. Last year we launched our internet-connected Paper+ platform. It features cards that are embedded with an NFC chip which triggers a digital action; like opening a webpage or starting a playlist, when tapped on an NFC-enabled device. Paper+ allows the user to change the action associated with each card at any time, even after printing, and see analytics of how it is used in the world. In March of this year we launched our first digital-only product, Monogram, which has really taken off especially with designers, photographers and artisan businesses. It’s an on-the-go portfolio app made from digital ‘cards’, allowing users to import images from their camera roll or Dropbox, as well as adding text and social links, and arranging the cards whichever way they choose. It’s a simple way to build new case studies and portfolios to present on a phone or share on the web. It is extremely important for us, as a business, that we continue to invent and we are always looking at how technology can help our customers and evolve our products.

Monogram app by MOO

Monogram, the iPhone app by MOO

What are the current challenges facing product UX/UI design? How do you see these challenges changing the industry?

I’ve now been designing interfaces for almost 20 years, and while the industry is always evolving, the fundamentals of quality design don’t really change much. There will always be a new technology, such as virtual reality, or in the case of paper and packaging, the internet of things. That will certainly change the medium, but the hardest part will always be to create meaningful products and services. For me this always starts with a person – their needs, pains and desires. Keeping the customer (or potential customer) as the driving force in design is always easier said than done. I commonly ask in our design and product manager interviews when was the last time the person spoke with a customer. In many instances, unfortunately, the answer is never or at least not in the past year. As UX as a discipline has grown and attracted new people, I find it is less and less user-centric which I strongly believe drives innovation and more importantly, simple, elegant easy to use products.

Where do you find inspiration? Who in the industry do you follow?

We moved to London from Bay Area (shout out to Oakland!) over three years ago and we continue to find London and Europe to be an unbelievably inspiring place to live and explore. The museums, galleries and events are endless (Tate Modern, V&A, the Barbican are favorites) – and in London most are also free. You can just wander (and let your mind wander) which is when I find myself seeing patterns and connections in my work. It may be a bit hokey, but I also find much inspiration from my nine-year old daughter. Children see the world with a largely unfiltered and curious mind. She reminds me to be optimistic and believe in the inherent goodness of humans to make the world a better place.

As for specific people in the industry it depends a bit on what problem I’m working on at the moment. Currently at MOO we’re working through how to best collaborate across teams and quickly grow the product and design teams while keeping quality and delight at the center of what we make. I mentioned Peter’s book above, and we’re also referencing Christina Wodtke’s book “Radical Focus” as we try to make OKR’s work for us. Richard Moross, MOO’s founder, is also an incredible leader. It’s rare to have a CEO with such an eye for design and advocate for design and user experience a true market differentiator.

What would you tell someone just getting started or looking to get into the design field?

Design is really about problem-solving. The more problems you solve (or attempt to solve) the better designer you become. I tend to tell new graduates to take a first job in a design consultancy (i.e. Method, IDEO, Smart Design) because it forces you to work on many design problems across a variety of industries. It also helps you hone your client management and storytelling skills. After a few years you’ll likely find moving in-house or to a start-up an easy and fulfilling switch, where you’ll be asked to focus (sometimes for years) on a market or customer. All those problems you solved and learned from early on coalesce into a powerful set of tools for building one of a kind brands and products. Also, don’t take yourself too seriously. Have fun. Hire people who are extremely talented and give them freedom run. Take breaks. Eat a lot of cake.

Read More at MOO’s Chad Jennings: Meaningful Design Starts with People

Categories: Designing, Others Tags:

Particles Animation: 20 Solutions from Codepen

June 27th, 2016 No comments
fluid simulation

Experiments with canvas, a basic HTML5 element that is used to produce graphics of various kinds and scale on a web page, are gaining more and more popularity nowadays. It seems that web developers have pinned their faith in this technology, even despite the fact that it suffers from the lack of proper browser compatibility. Intending to unlock various possibilities of this potent element the artists come up with pretty remarkable and occasionally unexpected results that strike the eye from the first seconds. One of such successful experiments that have found its practical application in website design is particles animation.

Using just the regular tools and, of course, a bit of magic of Javascript, primitive dots on the screen begin to move chaotically, bounce, dance, respond to gravity, form various shapes and even interact with users. What’s more with the help of the more powerful libraries like WebGL, Three.js or TweenMax they transform into real masterpieces that are able to grab the biggest piece of the attention pie in any interface.

If you take a look at elegant Deutser, energetic Activation Nodeplus or top-notch Void, you will notice that they have one thing in common: all of them are enriched with particles-inspired centerpieces that take the user experience to the next level. They are representative examples of the stream. Aren’t they outstanding? The feature is in trend these days, so why not to get acquainted with a dozen of solutions available over at Codepen to learn from?

We have included different implementations to reflect the diversity of the direction. Explore them,and tell us which one is your favorite?

Fluid Simulation

Creator: Jeff Thomas

gl particle sns icons


Creator: Kenji Saito

WebGL Particle Head

head made of particles
Creator: Robert Bue

Particle Fountain

particles fountain
Creator: Shawn G.

CSS Particle Animation

pure css particles animation
Creator: Nate Wiley

JavaScript Particles Animation

javascript particles animation
Creator: Roshin Jose

Particles.js – Javascript Library

particles plugin
Creator: Vincent Garreau

Particles in Space

particles in space
Creator: Dean Wagman

Text Particle

text particle
Creator: Gthibaud

Particles Snow

particle snow
Creator: Nat aliya Sayenko

Particle Swarm

particle swarm
Creator: Bas Groothedde

Particle Galaxy

particle galaxy
Creator: Sebastian Schepis

Vibrating Particles

vibrating circles
Creator: Prayush S

Giphy: Particles

particles gifs
Creator: Giphy

Particles.js: Stars Version

starry sky
Creator: Johan

Particle Button made with Canvas and HTML5

particle button
Creator: Ignacio Correia

Simple Particles Animation

simple particles animation
Creator: Alexander

40k Particles Animated

40k particles animated
Creator: Robert Lemon

Dynamic 3D Confetti Text Effect

dynamic 3d confetti
Creator: Rachel Smith

Particle Orb CSS

particle orb css
Creator: Nate Wiley

Categories: Others Tags:

Essential design trends, June 2016

June 27th, 2016 No comments

Designers are changing the rules for web design, thanks to creative problem solving. Auto-play sound, mixing real and illustrated images and even layering logos on top of photos are some of the hottest design techniques right now and all three concepts were considered taboo not that long ago.

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

1. Auto-play sound

Not that long ago, the rule was not to include sound on your website unless it was optional. And you definitely would not go the auto-play route.

Those tables have turned! What used to be a bandwidth hogging, obtrusive design feature is becoming quite commonplace.

Sound is being used particularly for a couple of different website types – for media-related content such as music, movies or news and for game or storyline type designs. The trick to using sound is that it needs to include a toggle on/off button for users that still want to interact with a website in silence.

Sound is that it shouldn’t come to a shock to users. Many sites, such as This Was Louise’s Phone, that use auto-play sound are using a buffer of sorts to show that sound content is loading. Combine this load action with a toggle switch and users can determine whether sound is for them or not before the site makes the first noise.

Another trick when it comes to using sound is to start softly. You don’t want users to jump out of their chairs because your design opens with a heavy metal rift. All sound to crescendo from almost a whisper to full volume in the first few seconds.

Finally, it is important that sound (particularly when it plays automatically) is a vital part of the content that contributes to overall user experience. Don’t use sound just because you want to try something new; use it with purpose. Also keep this in mind – even with sound as part of the design, many users will access the content without it. Design wisely.

2. Mixing photos and illustration

It can be a tough technique to pull off but the line between photography and illustration has been crossed. Mixing real and hand-drawn elements can add an air of whimsy to a project that’s both fun and visually intriguing.

Do it without being cheesy to have a lasting impact on users. Here are a few suggestions:

  • Use illustrations for icons and buttons, and photography for dominant visual impact
  • Create a visual pattern that uses mostly illustration, but add in short video or image areas for emphasis
  • Add animated illustrated elements for a touch of something different near photos
  • Create a badge or logo that’s illustrated to use with brand photos or on packaging that will appear in brand imagery
  • Use illustration to help guide users through other visuals and tell a story

Taylor Made is a great example of this mix-and-match approach to photography and illustration. A financial planning company is not a place where you might expect to find this technique in action, but it is effective. Animated illustrations in the background of photos of people add interest to what could otherwise be a boring headshot. The animated hover stats grab user attention and encourage scrolling. Even more illustrations are used in the sites iconography to encourage clicks and add visual flair to text-heavy parts of the design.

3. Badges on top of hero images

Badges are everywhere you turn right now. From logo design to vintage retro typography styles that could be dubbed hipster favorites, these simple elements have become a staple part of minimal design styles. They are also a common option for designs that might be lacking in photography.

That’s shifting though as more designers are using badges with stellar photography in hero images. The trend is exemplified by a single hero image (typically not a slider) with a white or semitransparent badge on top. Badges are often centered horizontally and vertically, although placements can vary.

It’s a striking photo to logo (or text) contrast. What makes this work is that the big image draws users in. The badge serves as a focal point for what is often a somewhat weak or loose image. (That’s not to say the images used in this type of style are bad, but they do benefit from the help of a badge.)

This trend is an evolution of something we’ve seen for a while with hero image headers. Oversized, bold typography choices were the craze last year. This is a natural shift because of the popularity of badge styles and similarity between how oversized type and badges are used.

  • Both tend to be white or light type
  • Both tend to hammer home a single message to users
  • Both work in designs that don’t have a lot of competing visuals
  • Both are bold and daring because they only offer users one real point of entry
  • Both work exceptionally well with stock photography
  • Both styles offer a bold visual solution when you don’t have a lot of photo options
  • Both styles lend themselves to adding a touch of animation in other places (such as a hover state) to entice users because there are not a lot of other moving elements, such as video or an image slider

What’s nice about a great badge is that it can serve dual-duty as your brand mark as well. (This is a great option for small businesses or portfolio sites.) Create a badge with the idea in mind that it will be your logomark. Design color and white versions to mix and match depending on use. This added functionality is another reason why badges are so popular right now.

Conclusion

Are you brave enough to add auto-play music to your website design or mix real and illustrated imagery? Both of the trends come with an element of risk—and opportunity for payout. If you aren’t quite ready for these trends, incorporating a badge over a hero image is something that can work for almost any type of design outline. You can also make this adjustment on the fly and use it as needed.

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 Twitter; I’d love to hear from you.

The Hand Crafters Font Bundle of 15 Premium Font Families + Extras – only $17!

Source

Categories: Designing, Others Tags:

Things to Know (and Potential Dangers) with Third-Party Scripts

June 27th, 2016 No comments

The following is a guest post by Yaphi Berhanu, who helps people learn JavaScript. Yaphi comes heading a warning: you should know what you’re getting into when you allow a third-party script on your site. You’re giving them some mighty powerful access, and there is plenty of proof that not all of them have your best interest in mind.

The web is full of third-party scripts. Sites use them for ads, analytics, retargeting, and more. But this isn’t always the whole story. Scripts can track your behavior, your preferences, and other information.

Here, we’re going to look at the potential risks of these third-party scripts.

A third-party script might be a privacy concern

Third-party scripts can report back data that you weren’t aware of.

Documentation from Google, Facebook, and Wikipedia, tells us directly that these scripts can track behavior, sites visited, purchase history, demographics, IP address, location, and more. That part is generally known.

Some of the data Facebook can track, according to their documentation.

While standard third-party tracking is generally documented, there may be tracking we don’t know about.

For example, according to a study by researchers at Princeton and Stanford, 42% of the top sites (Alexa top 50 U.S.) present unique identifiers in plain text. That means eavesdroppers can track things like your email, username, full name, home address, purchases, location, history, IP address, and preferences. Just by clicking around the web, you can unknowingly allow someone to build up a huge profile of information about you. In fact, that same study discussed how the NSA piggybacked on some of Google’s scripts to track people.

Here’s a screenshot of an advertiser’s official implementation guide that explicitly gives people code to transmit email addresses to them as unencrypted plain text. They encrypt each address after receiving it, but it still gets sent as plain text, so the damage is done.


Implementation guide allowing emails to be sent in plain text.

A third-party script might be a security concern

Any time you include someone else’s external script on your page, there’s an inherent security risk because that script has full access to the front end of your site.

Here are some examples of what these scripts have done.

Leaking credit card info through unsanitized data

Security researcher Randy Westergren discovered that many major tracking scripts don’t sanitize data properly (thanks to my colleague Sam Ratcliffe for bringing this article to my attention). This allows attackers to inject any code they want, including code that can steal credit card numbers.

Here’s a screenshot of malicious code getting injected into an unsanitized URL:


An attacker could have inserted any code.

What made the above screenshot particularly tricky is that the vulnerability didn’t actually come from that script itself. Instead, it came from another third-party script’s unsafe implementation of yet another third-party script.

I ran a test on an affected site to see this vulnerability for myself (don’t worry; I didn’t use a real card number), and it proved easy to extract sensitive info:

Many of the advertisers have since fixed the vulnerability, but that leaves open the question of what other exploits are still out there.

Exposing private data with non-HTTPS scripts

Many tracking scripts in the wild use regular non-secure HTTP. This can let attackers grab people’s information, and it can cause security warnings that can scare away users on secure pages.

Here’s an example of an implementation guide that uses HTTP on a secure cart page.


Source

Code can change without you knowing

With third-party scripts, there’s always the danger that the code can change or disappear without you knowing it.

My colleague Brent Kimmel told me about a technique called subresource integrity, which essentially lets you make sure you get what you expect. At the time of this writing, it hasn’t gained full browser support yet, but keep your eyes open for it.

Also keep in mind that this technique works best when the original third-party script isn’t flawed in the first place.

Third-party scripts often load other third-party scripts of their own

When the third-party scripts you trust bring in scripts you don’t expect, this multiplies the potential for all of the security and privacy risks mentioned thus far.

Here’s an example of a third-party script loading other scripts:


It’s always a party when scripts bring their friends.

A third-party script might be a performance concern

Slower page loads

Third-party scripts frequently cause pages to load slower. For example, Business Insider’s actual site loads in about 1 second, while third-party scripts account for the majority of the 7 to 15 seconds of load time. The following screenshot shows the tail end of a long line of third-party scripts numbering in the hundreds:

To their credit, Business Insider appears to load most of their third-party scripts asynchronously, so the perceived loading time doesn’t take nearly as long as 7 to 15 seconds.

What happens when third-party scripts don’t let you load them asynchronously?

Some scripts don’t let themselves load asynchronously

When a script uses document.write, that prevents it from being loaded asynchronously. A lot of common third-party scripts use document.write, so they block the document and extend page load times unnecessarily.

Here’s an example:

Some scripts affect scrolling performance

Third-party scripts often perform operations on the scroll event. Here’s a screenshot of a script running a loop on every scroll.

While this example alone won’t take down a site, it can contribute to a noticeable slowdown when multiple scripts are hammering the scroll event.

A third-party script might have unintended consequences

Third-party scripts can do all sorts of unexpected things to your pages. Here are a few.

Overwriting your variables

Some of the most widely used third-party scripts on the web use unnecessary global variables which can overwrite the variables on your site.

The following screenshot shows a script using two global variables to generate one random number (even using an unnecessary type conversion in the process).

Creating unnecessary risks by using eval

Since eval will run anything, it’s a prime target for attackers. Here’s an example of a tracking script with a function that uses eval on any arbitrary JavaScript. Interestingly enough, the function is actually called arbitraryJSCode.

While eval doesn’t necessarily destroy everything in all cases, it does pose risks, so it at least warrants a second look when you see it.

Changing your layout

Some tracking scripts insert tiny images and iframes at the bottom or top of your page, which can create a gap above your header or below your footer.

The following screenshot shows a tracking tag creating a gap at the bottom of the Comcast/Xfinity site.

Alternatively, a third-party script can simply malfunction as in the following screenshot with some ad code on Elite Daily’s site:

Setting you up for errors by tying functionality too closely to the DOM

The following example shows a tracking script whose functionality depends on specific DOM elements. A slight change to the site’s layout can break this code.

Recap

Third-party scripts can provide powerful functionality, but they also bring risks to privacy, security, performance, and page behavior. Now that you’ve seen some of the risks of third-party scripts, you’ll hopefully have an idea of what to expect when you encounter them.

If you have any questions, thoughts, or stories, feel free to leave a comment. It would be interesting to hear about people’s thought process when integrating them. Do you avoid them all together? Do you only allow sources you highly trust? Do you use an intermediary like perhaps Google Tag Manager or Segment? Do you vet the code yourself by reading it or watching DevTools closely?


Things to Know (and Potential Dangers) with Third-Party Scripts is a post from CSS-Tricks

Categories: Designing, Others Tags:

Whimsical, Surreal Illustrations with iStock’s Signature Artist – Iveta Vaicule

June 27th, 2016 No comments

Illustrations are at the forefront of communications these days, with everyone from small businesses to major brands using them to make a visual connection. Illustrations used to act as supporting elements to big beautiful photos on websites and campaigns, but now advertisers and designers are using illustrations more and more as the main vehicle for

Categories: Designing, Others Tags:

Popular design news of the week: June 20, 2016 – June 26, 2016

June 26th, 2016 No comments

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.

Apple Doesn’t Understand Photography

Material Kit: A Material Design Bootstrap UI Kit

7 Things You Didn’t Learn in Design School (but Use Every Day)

Do We Need Frameworks?

19 Things not to Say to a Graphic Designer

The Typography of Blade Runner

Adobe Announces Major Update to Creative Cloud

The Future of the Web

The Perks Workers Actually Want

What Designers at Apple Did with iOS

What if You Have no Talent?

Twitter Launches Engage

Infographic: Your Slack Usage

How to Design for Creative Agencies

Reimagining Google Fonts

Boords: Simple Storyboarding

Mozilla Open Design: Branding Without Walls

Particle Love

ProtoPie: Code-free Prototyping Tool for Devices

The Dark Side of your Design Heroes

Site Design: Rleonardi.com

Site Design: Independencedaymystreet.com

Phone Free Events

Site Design: Nycpride.org

80,000 Hours Career Guide

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

LAST DAY: Mega Theme and Template Bundle from NRGThemes – 97% off!

Source

Categories: Designing, Others Tags:

Comics of the week #345

June 25th, 2016 No comments

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Just checking in

A comfortable designer

Goodbye muscle mass

Can you relate to these situations? Please share your funny stories and comments below…

High Quality T-Shirts for Designers Created by the Design Community – only $17!

Source

Categories: Designing, Others Tags: