Video backgrounds are growing in popularity. Now with the first services offering HD videos for free commercial use popularity will increase further and faster. Pexels, known for its free imgaes, has entered the market that before had only had Mazwai as a source for free video material. Other than Mazwai where backlinks are mandatory, Pexels offers its material under CC0. While we will also show you the two competitors the focus of this article will be on best practices examples of video use as a header element or as a full-width background covering the whole viewport of your browser’s windows.. Free Video Services 1. Pexels Video Pexels Video offers HD and Full HD videos for completele free of charge and use in commercial projects also. All material is licensed as Creative Commons Zero (CC0). You need not place any backlinks nor name the authors (but you still can, if you want). 2. Mazwai Mazwai has quite a few high-grade videos in stock. These are all licensed under Attribution 3.0 Unported (CC BY 3.0). This means you’ll at least have to name its authors. A correct backlink would e.g. look like this: Video: Zuerich Airport by Niklaus Gerber/Mazwai.com, License: CC BY […]
* You might also be interested in the following articles:
A web designer’s reputation in all things social is not overwhelmingly positive. I guess we could agree on that. A designer’s humor is a bit special, too. Sometimes as special as in “Noone else will understand that”. This cartoon definitely belongs in that category. Besides having to have some experience in design you’ll also need to be just that little bit older than most people in the industry are today. But as soon as you meet these preconditions, you’ll enjoy this.
* You might also be interested in the following articles:
More and more people use mobile devices like smartphones or tablets rather than Notebooks or PCs to surf the web and read their favorite websites. Even though responsive web design is a step in the right direction – because it makes web content readable on any device – many people prefer a mobile app where articles can be enjoyed even better. Today we will, show you WordPress plugins that help you build a true mobile app for your WordPress website. WordPress on mobile is easier than you may think… Why You Should Turn Your WordPress Website into a Mobile App If you operate a profit-oriented WordPress website or have many visitors, you’ll be facing the problem of how to set apart from the competition and generate added value. An app is a perfect solution for readers who demand high standards and want to stay informed about their favorite website at any time and place. I’m one of them, and I consume websites on my smartphone. As I prefer apps to responsive websites, I’m always happy as soon as a site offers an app. But this is just my opinion. How to Build an App It’s not very difficult to turn […]
* You might also be interested in the following articles:
No designer creates wow work 100% of the time. There’s no question that creating good design takes significant exertion, but generating the wow factor in your work can also be fairly effortless.
Many designers follow their intuition during the creative process and incorporate universal symbols and metaphors simply because it “feels right.” Intuition — accessible to all people and most especially useful to those engaged in creative pursuits — guides designers towards solutions that align with a universal knowing.
“There are three responses to a piece of design — yes, no and WOW! Wow is the one to aim for.”
– Milton Glaser
Adding a universal quality to a logo provides the broadest communicative reach, what almost all identities are intended to accomplish. The intellectual exercise of connecting the dots of “thinking” is not irrelevant in design, of course — particularly when it comes to branding — but by combining the intuitive immediacy of symbols and metaphors with strategic thinking, you integrate essential information that helps your logo stand out and be remembered.
This three-part series explores fundamental creative strategies for designing effective logos. The first part shows how to use symbols, metaphors and the power of intuition.
Design’s Intuitive Process
“Intuition (is) perception via the unconscious.”
– Carl Jung
There will always be those who dismiss the non-quantifiable, but many of history’s most important thinkers have given intuition its due, including Albert Einstein, Buckminster Fuller, Carl Jung, Ray Bradbury and Steve Jobs — even Alan Turing, the infamous WWII logician and cryptanalyst, understood mathematical reasoning to be based in “intuition and ingenuity.” Great thinkers and futurists from all walks regard intuition as having a key role in the problem-solving process. Fortunately for the many designers who rely on wisps of inspiration to help materialize creative solutions, intuition is not some foreign object lodged in our process. It’s as natural as breathing. Intuition is the medium many creatives swim in, while intellect provides a formula to execute and deliver on the finished product.
As a medium, intuition is readily accessible to anyone, although it is best honed with use (try the exercise at the end of this article). As an inherent ability, it doesn’t typically get the same validation as an “educated” intellect. Culturally, we are trained to accept that only through the process of formal education (and a lot of it at significant expense) are we able to arrive at viable solutions. While I’m not here to debase a good education or strong intellectual skills (they are fundamental to anything human beings do or create), I do want to make a compelling case for the useful and reliable qualities of intuition in good design. Balancing the two can help you create a logo that appeals to a wider audience. And that’s important in a globally connected world.
Our worldwide, interconnected technology affords any business, large or small, access to a global audience. On the flipside, this access produces an inordinate amount of background noise that has to be constantly managed. Complicating things further, today’s stressed economy demands smaller budgets with smarter thinking. Experience has taught me that the addition of a sensual experience to a logo — the integration of feeling with thinking — provides an immediate and intuitive connection. This sidesteps the need for the brain to do interpretative somersaults. Or to throw a lot of money at the logo to make it stick via redundancy. Small-budget logos that use this method get a relationship-driven response from their audience that any big-budget client would envy. By engaging the subconscious, symbols and metaphors are an optimal way to reach and hold the audience’s attention longer, and that results in better recall later.
Symbolic communication adds an immersive aspect to design. Symbols came long before written language was invented. Symbols and metaphors both expand information into meaning, but each is distinct in how it works. Symbolic communication is succinct, immediate and tightly packed, while metaphoric communication links specific elements within the design to more precisely define who the client is — sometimes unexpectedly (and even delightfully!) so.
The Symbolic Principle In Logo Design
Describing a symbol with words is like trying to capture a star in a jar, but I’ll do my best here. Symbols are whole and complete entities, while words are made up of fragmentary letterforms. Symbols are processed intuitively and immediately, while a word must be understood first in its particular language, and then be related to a visual (and words expanded into sentences must also be strung together in sequence for meaning). We process the two concepts very differently.
Symbols are immediate, while words must be associated with an image to be understood.
Symbols are immediate, while words must be associated with an image to be understood. The yin yang symbol is instantly understood as two opposites contained within a whole, but words require the additional step of visualizing the symbol before it becomes meaningful.
Symbols reference patterns and imagery common to all human beings. You could describe a symbol as a seed or egg that expands into meaning with the viewer’s participation — in the same way that seeds and eggs expand into new organisms once fertilized by an outside source. Although a tree looks quite different than the seed from which it originally grew, it has the seed’s “container” shape at its core. Human beings have a bellybutton at our center — our essential birthmark — linking us to the circular egg from which we developed.
Circles and spheres tend to manifest as original source: Molecules, cells, eggs, seeds and planets all carry this archaic shape (more on this and other geometric shapes upcoming in part 3, “How Geometry Influences Logo Design”). Symbols are the archetypes of human communication. The etymology of the word “archetype” is arche-, original, and type, kind, coined by Swiss psychoanalyst and symbolism master, Carl Jung. As original kinds, archetypes — in their pristine state — are limited in number but universal in function and meaning. Archetypal symbols are the foundation of the human systems we invent and the structures we build.
“The soul never thinks without an image.”
– Aristotle
Abstract archetypal symbols — such as the shape of a circle — contain knowledge that resides in the collective unconscious (another Jungian term) of all humans. Snakes and apples are examples of more complex symbols that are layered with cultural meaning. The basis of the symbol is existential (for example, a spiral rather than a coiled snake) but it becomes significantly more complex with the addition of cultural context. Because different cultures have varying distinctions, it is important to research the interpretation of your chosen symbol to ensure it supports the meaning you want to convey within the culture(s) in which it will be used.
3 Examples of symbolic integration in human systems and structures, from left to right: the yin yang symbol, the stable base of the pyramid, and Lady Liberty. (Images: Rickard Blomkvist4, SueC5 and Xavier Marchant6) (View large version7)
Examples of symbolic integration in human systems and structures are the yin yang symbol where opposites completing the whole, the stable base of the pyramid that points to the unknowable and infinite universe, and the sacred number seven incorporated into Lady Liberty’s feminine principles of abundance and inclusion. The seven-sided heptagon is the only polygon of the first ten geometric shapes that cannot be precisely created via regular geometry tools, setting it apart.
Symbolic Versus Letterform Logos
Symbols are perceived sensuously and unconsciously (and, therefore, immediately) while words are actively thought about before the subject makes the connection to an image of a thing or idea. Symbols remove the thinking step by being directly perceived, one of the reasons why symbolic logos are more effective than wordmarks. Symbols also communicate universally, while wordmarks are constrained by the limits of language. However, words and symbols can be effectively used together to expand meaning and impact.
Eclipse logo. (Design: Jeff Kimble) Health Plus logo. (Design: Maggie Macnab)
Symbol Use in a Logo Design
Symbolism was the primary communication tool for a logo I designed in the mid-’80s for an Arabian horse farm. In the first exploratory sketch, I focused on the relationship between mare and stallion, the intimacy of which was implied by touching faces. The second sketch shows this concept progressed into the relationship between mare and foal, with the foal protected under the mare’s shoulder.
8 The original sketches for Maddoux-Wey Arabian Horse Farm show the process for the final design. (Design: Maggie Macnab) (View large version9)
The original sketches for Maddoux-Wey Arabian Horse Farm show the process for the final design. Symbolism condenses and simplifies a logo’s communication and provides universal relevance. The visual simplicity of a symbol also supports the flexibility that a logo needs in order to work in multiple future applications.
I scrapped my first attempt as unworkable, but had I not gone through that first step, I don’t know that I would have recognized the opportunity to rotate the design 180° in the second sketch. (Future opportunities are an important reason to preserve and refer back to your process.)
Because of the Arabian’s delicate bone structure, I was able to create a perfect fit between face and shoulder. This relationship was further emphasized when I enclosed the design in a circle, creating a symbolic yin yang effect (which references my first sketch of the opposites contained within the whole in the mare and stallion relationship).
The simplicity of this logo categorizes it more closely as a symbol, or a universally recognized image that expands into a personal relationship with the viewer. Another benefit of the symbolic logo is its inherent timelessness, remaining relatively unaffected as styles change. The simplicity of a symbolic design has clearly defined negative and positive space, making for broad flexibility, which is essential for many future applications. Symbols are optimal choices for long-term branding, and they help a logo retain its relevance (and, therefore, value) over the long haul.
The Arabian logo in the real world. (Image: Adam Bennett)
The Arabian logo has been printed, foil and blind embossed, used as jewelry design, applied to signage and, most recently, engraved on a granite memorial to commemorate the life of Claire Davis, an equestrian teen killed in a tragic high-school shooting in 2013.
Using Metaphors In Logo Design
Metaphoric logos expand information just like symbolic ones do, but they go one step further by making connections between distinct concepts. This helps to further distinguish specifics about the client and adds interest to the design by creating relationships that are unexpected or unusual. They are memorable because they contain the aha! component.
One example is the Elefont logo, every possible opportunity was taken to create a simple but powerful logo that grabs your attention on multiple levels: symbolic, metaphoric and semantic.
Valle Encantado is a farming and traditional craft-making partnership in the South Valley of Albuquerque, New Mexico. There were several opportunities to create metaphoric links between the client’s name and purpose in their logo. The primary one was to use the “V” letterform as a reinforcement of the name and with a reference to farming in the character’s negative space. Activating both filled and empty space (a principle of the “closure gestalt”) maximized the logo’s communication.
The “V” also represents the Roman numeral five, one of those happy accidents you want to look for to leverage a logo’s communication. This helps connect the design to the hands-on work of farming and community endeavors. In branding the organization, the logo was further reinforced with the slogan “Cultivating Community” to tie it together. (The spiral and helix also played an important role in this logo’s communication, and a discussion of how they were used is coming up in part 2, “Using Nature’s Patterns in Logo Design”).
Metaphoric logos can be tricky to create, but if you really delve into your client’s purpose and name and the potential ways in which they can be visually related and expanded upon, multiple aspects can be resolved into one coherent, tightly packed concept. I’ve used this method to create distinct and recognizable logos for over 30 years because it works for my clients and works for me: Logos designed decades ago continue to bring new clients (and many have been plagiarized and settled out of court — protecting your original work is also important). Logos that communicate simply and deeply benefit everyone: the client, the audience and the designer who created them.
Some Final Thoughts on Creating a Good Logo
Use symbols and/or metaphors as the core communication of your logo
Symbols and metaphors help establish a relationship between the client and logo, and logo and audience. If you design a wordmark, augment its communication with a relevant visual component. Secondary design considerations — color combinations, stylistic textures or typographical applications — might need updating over time, but if the logo is symbolic at its essence, secondary revisions can be made to the logo without negatively affecting the brand. Symbols help the brand hold up as styles and trends change.
Archive and refer back to your conceptual process
I have often referred back to sketches later in the design process and discovered something I hadn’t seen previously. Sometimes different thought tracks can be merged to create a more sophisticated or complete concept. Concepts you scrapped for one client might work for a future client. Respect your creative process and save it for later review. Train yourself to be a conduit between the past and future to maximize your creativity.
Design in black and white
On the practical side, if your logo works in black and white, it will work in any future medium or application — from full color to blind emboss. From a symbolic perspective, the more simply you define the meaningfulness of your logo between the negative and positive space, the more distinct and defined the symbolism of your concept will tend to be. Whenever possible, optimize the communication of your logo by utilizing the empty space as well as the filled (the closure or completion gestalt, which leads the eye without completed lines or forms).
Make sure the logo scales
Create your logo as a vector so that it has the flexibility to scale without issue. Because logos are the core component of an identity system, they have to be ready for any extreme. Logos need to scale from minuscule sizes on a website all the way up to a gigantic billboard and still retain legibility. If it doesn’t hold up at small sizes, remove superfluous information. If anything is lost, make sure it isn’t critical to the communication of the design. If it looks bulky or awkward at large sizes, review how you might alter the drawing of the logo for better flow and form.
Balance the logo
Look at your logo upside down, reflected and rotated. Optimally, it should appear balanced in any configuration. This process reveals imperfections that aren’t noticeable when the logo is right-reading, and it might help you discover ways to extend the logo into branding applications, such as a repeating background pattern.
Detect subtlety
Your job as a designer is to find solutions no one else can. Develop your instincts for subtle communication on all levels: visual, symbolic, metaphoric, word play and intuition. The following exercise will help with that.
Exercise: Intuition and Synchronistic Design
Problems aren’t negative occurrences. They’re opportunities to flex your creativity and problem-solving skills and to connect with the deepest parts of yourself. This exercise will bring more awareness to how you source information through and beyond yourself to come up with a solution that has the most possibility. The most important part of this exercise is to pay attention to how the inside relates to the outside.
Evaluz Luna’s quandary of connecting head with heart in design. (Illustration: Evaluz Luna, Santa Fe University of Art and Design)
This drawing by student Evaluz Luna shows her quandary of connecting head with heart in design. The top of the head and ribcage were cut out by hand and the ribbon threaded through, creating a dimensional work that further enhances her intention of connecting the subconscious aspect of creativity to real-world design practice.
Think of a design problem you’re working on or a personal issue.
Sketch an image that helps to represent the problem for you. (This is not about drawing skill!) Whether your sketch is abstract or realistic, it should have a relationship with the problem that is meaningful to you.
Tell yourself that you want help in finding a resolution or relationship with this issue or project and that you are open to any ideas that might lead to a viable solution.
Over the next few days, be conscious of what is around you, what comes up in dreams or what happens in other situations when you are not actively thinking about the issue (in the shower, for example). External manifestations will arise spontaneously if you take care to notice them. In particular, pay attention to anything that comes up more than once, even if it doesn’t seem to be related to the problem at hand.
If a common image, number or other instance of a tangible “thing” recurs in separate and unrelated events, delve into what the relationship is between it and your issue. Consider your emotions as you explore (they give clues, too). Are you anxious? Comforted? What is the relationship between the problem, you and the recurring event or object? Is the relationship related to a past experience?
Understand that sometimes an unrelated issue blocks resolution to the current problem. It is particularly important that you respect whatever your subconscious reveals and try to interpret the relationship to the current problem as honestly as you can.
Conclusion
Logo design is a challenging yet satisfying balancing act. Good logos are smart but not condescending. They’re accessible and simple but have enough depth to be interesting. They’re immediate and intuitive but memorable when out of sight. And they’re both timely and timeless.
Designing a good logo is the utmost in creative problem-solving. The process makes you really think succinctly about how relationships work. The practice of logo design develops your skills of intuition to recognize obscure but effective solutions and teaches you to discover connections that aren’t apparent on the surface. These are basic tenets for any problem-solving endeavor — not just logo design — and these methods can be extended into personal issues as well. As nature artist Andy Goldsworthy says, “Everything has the energy of its making inside it.” As I tell my students, learn to design a good logo and you’ll learn to design a good life.
Coming up next: “Part 2: Using Nature’s Patterns in Logo Design.” Our life experience is fundamentally based in nature. We often forget this as we develop and grow through our pervasive human-made systems, but nature is the ubiquitous experience of us all. Because human beings are natural life forms at our essence — not machines and not technology — nature is an inherent part of our creative process. By leveraging the forms and processes of natural patterns in logo design, you enhance the communication of your logo by enhancing its connection to our inherent source.
Constantly looking for great fonts? If so, you should check out this Mighty Deal. Dozens of possibilities to support your next Material Design or other modern geometric design project are there to explore. This great font family at this great price is a no-brainer. As with any Deal of the Week make sure to be quick to decide as it is for a limited time only… This fabulous modern typeface includes 34 different fonts, made up of nine uprights, nine italics, and a bonus 16 icon sets! Easy to read, Panton is a great choice for using on everything from T-shirts to posters, thanks to its real softened geometric nature. Make it your go-to font for headlines of any size, or even for text blocks too. Highlights With a whopping 34 different fonts, the Panton Font Family is a wonderful choice for adding a unique typeface to your arsenal. Choose from nine unique weights to seamlessly tell your visual story: Thin, Extra Light, Light, Regular, Semi Bold, Bold, Extra Bold, Black, and Heavy. Each of the nine weights comes in a upright standard style, as well as an italics style, offering even more choices. Add some real fun with 16 different […]
* You might also be interested in the following articles:
Here we are, halfway through the aught 10s and 2015. And the year still has quite a few conferences in store for us. 2015 has some surprises left in it. What consequences will speakers draw from the Google I/O? What’s coming in the IoT departments near you? With so much happening in the industry, conference organizers have done their best to keep you up to date. Take a look at some of the great conferences that will close this year’s conference year.
Conferences are about gathering information and knowledge, but they’re also opportunities to get to know other like-minded folks in the web design community. Keep in mind that there’s always a benefit to attending any event, and a strong chance that you’ll be exposed to a large amount of new information, so be prepared to absorb the latest techniques brought to you by distinguished authors and speakers.
Also, I’d like to thank everyone for leaving comments in the previous round-up — they were truly helpful. I admit, I may have missed or forgotten to mention a conference (or two) in today’s round-up, but please don’t hesitate to leave a comment below in the comments section and I’ll be sure to add it to this list as soon as possible.
M-Enabling Summit: Conference and Showcase8 “The M-Enabling Summit is the only program exclusively dedicated to promoting mobile accessible and assistive applications and services for senior citizens and users of all abilities[…] With its theme of ‘Smarter Living for All,’ the 2015 M-Enabling Summit will provide a platform for empowering mobile technologies and focus on next-generation innovations and breakthroughs for users of all abilities.”
Future Insights Live 201510 “Future Insights: bringing you the future, today! Future Insights Live is THE event for web designers, developers, project managers, creative directors and entrepreneurs who want to be on top of their game and engage in pushing the web forward.”
FrontEnd Summit 201512 “As the web changes for the better, so do our tools. While keeping on top of industry changes is part of the job, fighting our tools that can help us do our job faster and better shouldn’t be. In this special FrontEnd Summit, we deep dive into tools–some common like text editors and some relatively new to the scene like Grunt and Sketch–to see how they can help stay on top of cutting edge.”
JSCamp Romania 201514 “JSCamp Romania goal is to gather experts from across the field of front-end development, to bring you up to speed on the latest open-web technologies. Learn more about server-side JavaScript, client-side HTML5 web and mobile apps, and generally about best practices and tips&tricks in JavaScript and front-end development in general.”
SMX Advanced 201516 “Influencing industry developments is an essential mission of SMX Advanced, which connects search marketers, decision makers from the search engines, and other key industry stakeholders. You’ll participate in conversations orchestrated to debate thorny issues and move the industry forward.”
droidcon Berlin 201518 “droidcon is a global developer conference series and a network focusing on the best of Android. The idea behind droidcon is to support the Android platform and create a strong network for developers and companies.”
UXLx: User Experience Lisbon 201522 “Come to sunny Lisbon for 20 hands-on workshops to hone up your skills and 11 inspiring talks from thought leaders in the field. After hours, mingle with fellow UX Professionals from all over the globe and explore one of the world’s most beautiful cities.”
UX STRAT Europe 201524 “UX STRAT conferences are carefully curated for UX / CX leaders and experienced professionals who want to develop a more strategic approach to their product and service design programs. UX STRAT presentations are case studies about how leaders within the experience design field organize, analyze, innovate, and communicate.”
UX Lausanne 201526 “UX Lausanne is the first Western Switzerland event dedicated exclusively to User Experience Design & how to design delightful user experiences. Opportunity is given throughout a human-sized two days program (conference and workshops) to densify local and international connections, as well as sharing innovations and ideas in a delightful atmosphere.”
Spark Conference28 “It only takes a spark of curiosity to ignite genius. It only takes a spark of passion to ignite teaching. It only takes a spark of motivation to ignite community. It only takes a spark. A generalist technology conference.”
webinale 201530 webinale is the conference for digital professionals, trendsetters and makers on the World Wide Web. It is the optimal crossover platform for knowledge, inspiration and experience across all fields of Web technologies.
YGLF (You Gotta Love Frontend)32 “The first international conference of its kind to be held in Israel, will take place in Tel Aviv from June 8th through June 9th, 2015. To kick off the inaugural edition of this annual conference, the world’s top leaders in the field of front-end development will be among the featured guest speakers.”
Advatera Digital Leadership Forum34 “The digital leadership forum brings together digital, marketing and communication managers from large and mid-size organizations. It will be an inspiring event with a great selection of guest speakers sharing their thoughts and practical case studies including Heineken, Swisscom, Roland Berger and Beiersdorf.”
Layers36 A new design conference for the Mac and iOS community, Layers is “a 3-day conference during WWDC to talk about design, celebrate our industry, and eat snacks. Like a party, but for learning.”
QCon New York 201538 “QCon starts with 2 days of tutorials on Monday and Tuesday, June 8-9 followed by the full 3-day conference from Wednesday, June 10-12. The conference will feature over 100 speakers in 6 concurrent tracks daily covering the most timely and innovative topics driving the evolution of enterprise software development today. The setting is the beautiful, centrally-located Marriott at Brooklyn Bridge in New York City.”
#dareconf underground40 “At #dareconf underground you’ll learn how to encourage your team to adopt these behaviours using simple techniques rarely seen in design teams. Taken from fields like facilitation, coaching, conflict resolution, and improvisational theatre, these techniques don’t rely on telling people what to do. They work by discovering the group’s common purpose and creating a space where everyone can learn together.”
Topconf Bucharest 201542 “Topconf Bucharest is a premier international software conference designed for Developers, Product owners / managers, Architects, Project Managers, Methods- and Process-Experts. Our speakers are authors, experts and practitioners across various areas of software development.”
UX Scotland 201544 “A great, practical UX conference in the heart of Edinburgh. Now in its third year we expect UX Scotland 2015 to be even bigger and better than our 2013 and 2014 events. This year’s event dates include 10 June – a pre-conference day.”
NodeConf Adventure46 “NodeConf is the longest running community driven conference for the Node community. Each year has featured the industry’s leading speakers and been a launching point for everything from NodeBots to NodeSchool. This is a special year and will feature the latest in io.js, IoT, and deployment technologies.”
RubyNation 201548 “The RubyNation Conference will once again bring the best of Ruby to the Mid-Atlantic. Join 270 ruby friends for two days of Ruby and related technologies in the Nation’s capital.”
UX Burlington50 “UX Burlington is a single day, conference-style gathering, focused on what it really takes to build a great user experience on the web. Talks will cover design, development, content, research, and process.”
Web Design Day 201552 “Beginning in 2009, Pittsburgh Web Design Day has aimed to bring the best of the Web Design to Pittsburgh in a fun, intimate and affordable event. Organized by G. Jason & Val Head of Refresh Pittsburgh and Viewsource Events, Web Design Day is designed to inspire the wonderful community of folks from Pittsburgh and beyond who work to make the web a better place.”
DAHO.AM 201554 “daho.am is back for another one day conference — 2015’s edition will be bigger and better, not just in size, but also with regard to the speakers we’ll be hosting. As the only conference of its kind in Munich, it’s designed to connect experts within the industry and share experiences amongst developers and tech enthusiasts. We once again look forward to welcoming both local developers and those from further afield, with all talks being held in English.”
CSS Day 201556 “CSS Day is a one-day advanced CSS conference. Our attendees have been working with CSS for years now. They know it inside-out. So we asked our speakers to treat the really geeky CSS stuff – and that’s what we’ll deliver.”
Balanced Team Summit 201558 “Balance is action guided by incremental adjustments, rather than an achieved state. At the 2015 Balanced Team Summit, we will explore and share the latest techniques and innovations of Balanced Teams in different sized organizations in the software industry and beyond. Throughout it all, we’ll be considering the question, “What does it mean to be a balanced team?””
GIANT Conference 201560 “GIANT Conference exists because creativity and community go together like a guitar and amp. GIANT is an event for people who do rad work. We’ll talk about rad work at a technical level, and we’ll talk about rad work in abstract levels. We’ll talk about doing rad work over drinks and music and just a generally good time. We’ll have people talking about rad work who you’ve heard of and people you haven’t. That’s because we think inspiration comes from all over, and rad work happens in all kinds of professions.”
SmashingConf New York 201562 After the great success of last year’s New York conference, we’re bringing the SmashingConf back to the Big Apple. The rules haven’t changed: “2 days, one track, 18 brilliant speakers, and hands-on, practical and useful talks.” As always we have phenomenal speakers lined up.
DWX Developer Week 201564 For the third time the DWX – Developer Week will bring the fields of .NET, Mobile and Web development, soft skills, makers and Internet of Things under one roof in Nuremberg. The participants will get to see 200 experts in the field, some 250 lectures and practice their craft during the workshop day.
NDC Norwegian Developers Conference 201566 “The speaker line-up is big this year! We have over 150 international speakers ready to supply delegates with the latest and greatest trends in the software industry” and „NDC Oslo kicks off with the Pre-Conference workshops on 15 June.“
GOTO Amsterdam 201568 “GOTO Amsterdam is a practitioner-driven enterprise software development conference designed for team leads, architects, and project management and is organized “for developers by developers”. As software developers and architects ourselves, we wanted to craft the ultimate conference.”
Front 201570 “Front is an annual product and design conference held in Salt Lake City. Targeted at designers, product managers, UX, entrepreneurs, and technologists, this three-day event of talks, panels, and workshops, will bring together some of the best talent, thought-leaders, professionals, and artists from around the Wasatch Front to collaborate, network, and inspire each other to create amazing products. Join what will become a major scene for the industry, in the state and across the nation.”
enterJS 201572 enterJS tackles all JavaScript related challenges facing businesses in a series of talks and workshops. It is focused on helping developers, administrators, project managers and technology deciders design the most professional web experience.
Responsive Day Out 3: The Final Breakpoint74 Responsive Day out 3 is an “affordable, enjoyable gathering of designers and developers sharing their workflow strategies, techniques, and experiences with responsive web design.”
TYPO3camp Berlin 201576 Expect thrilling sessions and great social events in one of the hippest cities in the world. TYPO3camp Berlin is a chance to network with other TYPO3 enthusiasts.
Web Standards Day78 Set in St. Petersburg the Web Standards Days conference features many industry experts, discussing various cutting-edge web-standards subjects.
Dynamic Languages 201580 “The DLC is a cross-language event aimed at Open Source Dynamic Languages, we hope to bring together all the languages in an open forum to discuss and present the manner in which these languages approach and solve tasks at the cutting edge of development technology.”
MediterráneaJS82 “MediterráneaJS – a two-day not-for-profit conference about JavaScript and digital technology. Organised by BarcelonaJS for the community.“
jQuerySF 201584 “The theme of this year’s conference is Rebirth and a celebration of new and old technologies and companies coming together to breathe new life into web development. Speakers will deliver high utility talks, including tools and information attendees can immediately put into action.„
Design The Future: Web Conference at Penn State 201586 “We believe the web is a diverse and interdependent ecosystem, in which all elements–graphic design, code, content strategy, UX and UI development, accessibility, information architecture, instructional design, online marketing, and all other interactive technology–should integrate seamlessly to foster high quality interactive experiences. This conference brings together professionals from all of these fields not only to learn more about their own craft, but also to gain a better understanding of how these elements must work in harmony.“
Solid: The O’Reilly Internet of Things Conference88 “Hardware, software, sensors, and physical things are coming together in uncharted waters. To succeed, you’ll need to build teams that cross disciplines in ways never before attempted. Envision new business models. And recognize the “crazy” ideas that are now entirely possible. Learn how at Solid.”
IoT Cloud World Forum 201590 “IoT Cloud World Forum 2015 is the world’s leading global internet of things & cloud computing conference focused IoT Cloud Platform, based in London UK Europe. The event covers IoT Platform & Cloud Services Vendors, IoT Enterprises, OEMs and Mobile Operators & Service Providers from across the globe.”
Code 201592 “Code is two day, one track conference, featuring World leading experts in JavaScript and developing for the Web platform. Produced by Web Directions, and curated by John Allsopp, we’ve got over a decade’s experience in professional events for the Web industry, and John has over 20 years experience developing for, teaching and writing about Web technologies.”
Edge London 201594 Edge London 2015 is a “day of group discussion and debate on advanced web technologies for developers and browser vendors, raising funds for CodeClub. Edge has no conventional talks. Instead, we run two types of session: highly structured panel debates with pre-curated questions, which use tools to surface the most relevant opinions in real time, and more intimate breakouts where everyone sits together and works through a topic in more depth.”
ReactEurope96 “For more than a year now, React.js has changed the way we think about client-side applications through concepts such as the virtual dom, one-way data flow, immutable data structures and isomorphism. ReactEurope is the occasion to meet the core team and other awesome members of the community to learn, socialize and have fun in the beautiful city of Paris with great food, entertainment, connectivity, prizes and more!”
CascadiaCSS98 “CascadiaJSFest is a three-day, community-driven conference on the cutting edge of JavaScript and CSS. Browser, server, OS – we cover it all.”
App Promotion Summit London 2015100 “In 2013 we believed that app & game promotion deserved its own dedicated event. APS is a high quality, progressive and interactive conference.”
PHP South Coast Conference 2015102 “Taking place on the south coast of England in Summer 2015, where community members from around the world will come together to learn and share information about the latest trends and technologies in professional PHP development.”
Forward 3 Web Technology Summit106 “Multiple tracks will cover an abundance of technical topics including JavaScript, real-time communication, web MVC components, functional programming, scala, clojure, UX, data visualization, and more.”
AnDevCon Boston 2015108 Get up to speed on the most recent innovations in Android development in 70+ sessions. “Learn what all the 2015 Google I/O announcements mean for you!”
Design And Content Conference110 “At the Design and Content conference we’ll team up and learn from industry leaders how we craft experiences and tell stories that shape the future of the web. A day of workshops, two days of talks, and some amazing extras.”
Prototypes, Process & Play112 “Learn design leadership skills from Adaptive Path, Public Good Software, Google Ventures, and the Chicago Bulls–just to name a few! We’ll gain from the wisdom and experience of brilliant professionals who have been there, done that, and have shown others how to do it, too.”
Laracon US 2015114 “Laracon US is an annual gathering of people who are passionate about building amazing applications with the Laravel web framework.” Learn from 10 industry experts at the Kentucky Center in the Heart of Louisville.
MidwestJS116 “Midwest JS is a premier technology conference focused on the JavaScript ecosystem. Midwest JS is a premier technology conference focused on the JavaScript ecosystem. There will be a variety of talks from wellknown speakers in the community in a typical presentation format.”
TypeCon2015: Condensed118 “TypeCon is an annual conference presented by the non-profit Society of Typographic Aficionados (SOTA), an international organization dedicated to the promotion, study, and support of typography and related arts. Since the inaugural conference in 1998, TypeCon has explored type for the screen, printing history, Dutch design, type in motion, Arabic calligraphy, the American Arts and Crafts movement, experimental typography, webfonts, and much more.”
re:develop 2015120 “An affordable one day conference packed with great speakers right on the doorstep of Britain’s top rated beach. We’ve got 9 great talks scheduled for you. With a focus on methodologies and experiences you’ll take away plenty of inspiration and practical advice to approaching development projects more effectively. Each speaker will share their own takes on popular dev subjects, with every talk giving you insight on how to get to the best out of yourself, your team and the tools you work with.”
The Conference 2015 by Media Evolution122 “During two days we explore complexity and trends in the digital world of ours. You can expect everything from brain scientists and activists to marketing experts and cool makers who’ll cover topics like storytelling, design, gut feelings, robots and so on. In the end, it all comes down to exploring our three main themes: Human behavior, new technology and how to make it happen.”
HybridConf 2015124 HybridConf is a “web design and development conference based around bringing designers and developers together in a relaxed environment where they can learn, collaborate, and make new friends. Our core purpose is to bring you an awesome and diverse lineup. Listen to our fantastic speakers talk real world issues, motivation, communication, products, idea-creation, and so much more.”
Laracon EU 2015126 “Laracon EU is the official European Laravel event. Come learn about the state of the industry while networking with like-minded and diversely experienced developers.”
Frontend Conference Zurich 2015128 “The Frontend Conference in Zurich is a two-day double-track conference. The conference is an excellent platform for Swiss and European researchers, developers and designers to present their projects, latest research and technologies in the fields of Web technologies, Web design and UX/HCI (Human Computer Interaction).”
Write the Docs Europe130 “Join 200 people for a two-day event to explore the art and science of documentation. You can look forward to learning more about documentation systems, tech writing theory, information delivery, and more. Write the Docs brings everyone who writes the docs together in the same room: Writers, Developers, Designers, Support Folks.”
Full Stack Fest132 “Full Stack Fest is a programming event in Barcelona held during Sept 1 -5 2015, divided in two two-day single-track conferences: Barcelona Ruby Conference and Barcelona FutureJS.”
New Zealand PHP Conference 2015134 “New Zealand PHP Conference is one of the most important IT events in the region and will feature renown presenters, along with other expert speakers, presenting two concurrent tracks including over 22 talks exploring PHP trends and other topics to both inspire and challenge you.”
ColdFront 2015136 ColdFront is Copenhagen’s cutting-edge single-day conference. It will feature 10 talks by industry leaders such Lea Verou, Jeremy Keith and Smashing Magazines’s own editor-in-chief.
DjangoCon 2015138 “DjangoCon has something for everyone, from the person who develops Django applications for a living, to the person who just tinkers in their spare time. Whether you’re a Django expert, just started working in Django recently, or are interested in learning, we have talks and tutorials for you. DjangoCon is a great place to learn, exchange ideas, and meet great people.”
UX STRAT USA 2015140 “UX STRAT conferences are carefully curated for UX / CX leaders and experienced professionals who want to develop a more strategic approach to their product and service design programs. UX STRAT presentations are case studies about how leaders within the experience design field organize, analyze, innovate, and communicate.”
UX Cambridge 2015142 UX Cambridge “is a community-driven, practical User Experience conference for software, mobile and web applications. The conference will consist of inspiring & practical keynotes, workshops, tutorials, case studies and experience reports as well as lots of time for informal networking and discussions. Connect and learn from your peers and leaders in the industry in a comfortable and exciting space and take away skills you can immediately use in your work.”
MOBX 2015144 MOBX is the “annual conference for Mobile User Experience, small screen Interaction Design and usable interfaces on smart devices. This conference is for all you creative minds out there who deal with User Experience, interfaces and interactions in mobile contexts. MOBX is for all those who love small, mobile interfaces and smart experiences, good usability and consistent behaviour.”
The Lead Developer Conference146 “When you’re busy leading a team, coding and maintaining standards, how do you find the time to stay ahead of new technologies and develop yourself as a technical lead? The Lead Developer is a new conference featuring practical advice from experts on leading and motivating your team and high-level sessions on new and disruptive technologies.”
SmashingConf Freiburg 2015148 “Our mission; to explore real-life web design problems, projects and techniques in a way that’s relevant and applicable to your work straight away. A single track with 16 speakers means a focused, well-curated learning experience, and an intimate environment of just 300 attendees ensures a friendly atmosphere!”
SpringOne 2GX 2015150 “This is a one-of-a-kind conference for application developers, solution and data architects. The sessions are specifically tailored for developers using the popular open source Spring IO Projects, Groovy & Grails, Cloud Foundry, RabbitMQ, Redis, Hadoop and Tomcat technologies. Plus you’ll meet and learn from open source leaders who drive innovation for these technologies.”
The Mobility and Modern Web Conference152 “The third annual Mobility and Modern Web Conference will take place September 16-18 2015 at the University of California, Los Angeles. Presented by the UCLA Office of Information Technology, in association with higher ed and corporate partners, it will feature two days of exciting sessions, followed by a day of hands-on workshops, covering the latest trends of mobile and the modern web.”
Generate London 2015154 “Generate conferences are presented by net magazine – the world’s leading print and digital publication for web designers. Established in 1994, net magazine has been at the heart of web design and development for over two decades, and boasts an unparalleled list of contributors and supporters. A source of inspiration, education and networking opportunities, this year’s Generate will be packed with more top content from world-class speakers.”
Berlin Expert Days 2015156 BED Con 2015 is an web conference dealing with all practical aspects of information technologies. This is a not-for-profit event designed to deliver the most up-to-date information to its visitors, and offers a platform to exchange ideas.
From The Front158 From The Front is back in Bologna with an amazing line-up of speakers. This year’s theme is “Frontend in Wonderland”. See talks by Anna Debenham, Tim Kadlec and many more industry leaders.
MobileUXCamp DC 2015160 “MobileUX Camp DC brings together people from the fast expanding mobile user experience (UX) community in DC and the rest of East Coast. Join other mobile enthusiasts, user experience designers and anyone interested mobile UX and it’s future.”
SmartWeb Conference 2015162 “SmartWeb is a conference organized for web designers & developers, UX designers, and web entrepreneurs. During the four session program, attendees will discover the latest trends in modern web and mobile development, and meet their peers and great people from web industry. SmartWeb presentations will be covering the need-to-know topics of the moment, such as Responsive Web Design, HTML5 & CSS3, SASS, JavaScript, and generally include best practices, tips and tricks and much more.”
MakingWeb 2.15164 “MakingWeb 2.15 is a 2-day conference filled with inspiration and cutting-edge knowledge for people working within the field of front-end and web design hosted by IGM. At MakingWeb, participants with different backgrounds will expand their knowledge together with the best in the industry and are at the same time able to build new networks in a pleasant social environment. MakingWeb will focus mainly on the tools, workflow, webdesign and trends of the trade.”
Reject.JS 2015166 “Reject.JS is an annual, community-driven full day JavaScript conference happening in Berlin at September 24th, 2015. We provide an inclusive event that gives newcomers as well as long-time members of the community a relaxed space to meet, exchange experiences and make new friends. Together we explore tech and community topics and give a glimpse of Berlin’s flourishing tech scene.”
PHPConf.Asia168 The “Inaugural pan-Asian PHP conference happening in Singapore this September”. Rasmus Lerdorf, the creator of PHP, will start the conference up as keynote speaker.
EuroIA 2015170 “EuroIA is Europe’s premier Information Architecture and User Experience conference. In 2015, we’ll have our 11th summit. Start with us into the next decade of growing our community.”
Over The Air 2015172 “Over the Air is a unique tech-agnostic event for and by the developer community, featuring technical workshops where attendees can roll up their sleeves and tinker with new mobile & web platforms, operating systems, APIs & open hardware. The tutorial sessions feature real business cases, new insights and a healthy dollop of inspiration.”
Fluxible 2015174 Fluxible is “the UX party disguised as a conference. Like last year, Fluxible will take place in the Communitech Hub and Tannery Event Centre, in the heart of downtown Kitchener.”
CSSconf EU 2015176 “In late September 2015, CSSconf EU will unite the CSS community in Berlin, Germany. This is your chance to meet top-notch engineers, great web designers, world-class speakers and anyone who cares about CSS. With this one-day, one-track conference, CSS. CSSconf EU is one of the core events of WWWTFFest – yes, you read that right: an entire TechFest celebrating the WWW. An entire week full of community-driven conferences, hackathons, workshops, and social events.”
NCDevCon 2015178 “The NCDevCon Conference is held annually on the Centennial Campus of NC State University in Raleigh, North Carolina and covers a wide variety of web development and design topics including Web / HTML5 / CSS, Mobile, Javascript / jQuery and ColdFusion.”
#dareconf London 2015180 “To design digital experiences you need to collaborate with people from different disciplines and backgrounds. You can’t make others take part—they’ll only choose to if it meets their needs. To understand those needs you can learn to use facilitation, coaching, and listening techniques. Practising these techniques will enable more trust and harmony in your work. Attend the third annual #dareconf if you want to: learn facilitation, coaching, and listening techniques in presentations and workshops, reflect on challenges and opportunities at work and choose how to apply what you’ve learned, connect with other people who want to collaborate with their teammates.”
code.talks 2015182 With 1,500 attendees code.talks is one of the biggest web development conference in Europe. Learn from a large array of speakers about every subject in and around the web and meet your peers.
Rebase184 “Great design happens at the points of intersection – between art, science and technology. Rebase is a conference for designers who like to connect the dots. Over two days of events, talks and workshops, you’ll engage with designers from across disciplines, learn meaningful skills, and build lasting connections.”
Mobiconf 2015186 “Mobiconf is an international conference with a strong focus on mobile apps development but not only. During the conference we also plan to cover many mobile-related topics, just to mention UI/UX, apps business and mobile apps project management. This event is your chance to meet well-known speakers representing mobile brands from all over the world who are specialists in their area.”
Voxxed Days Belgrade188 “We are proud to present the first Devoxx event in the Balkans – Voxxed Days Belgrade! Two-day and a two-track event in Serbia’s exciting capital will make you want more. Developers, Startup lovers, Geeks, and those of you who find tech as a true inspiration, welcome aboard!”
Midwest UX 2015190 “A 3-Day gathering of the pioneers, developers and creatives driving a thriving Midwest UX community. This fifth annual conference highlights what’s next in UX through a mix of inspiring talks, hands-on sessions and workshops.”
Made by Few192 “Made by Few is a single-track, two day conference. The conference focuses on individuals who design and create web/mobile applications and sites. At Made by Few 2015, there will be a total of 8 speakers – 4 speakers presenting each day. The speakers will be a mix of designers, illustrators, developers, and entrepreneurs.”
Paris Web 2015194 Paris Web, the Francophone Conference of people doing the web , will be held from 1 to 3 October 2015. It explores the themes of Web accessibility, digital design and open standards. The conferences and workshops Paris Web are organized by the non-profit organization Paris-Web.
WebCamp Zagreb 2015196 “WebCamp Zagreb is a tech conference built by community for the community. With nearly 800 web developers & designers attending last years conference, the concept of sharing experiences and knowledge across different communities in South East Europe becomes even more apparent. This year we are targeting more talks in English.”
World Usability Congress 2015198 “It‘s its application-oriented, economic and holistic approach that makes the World Usability Congress one of a kind on a global scale. We talk about Usability, User Experience (UX) & Customer Experience Management (CX).”
Productized Conference 2015200 “The Productized event is a 3 day annual gathering that brings top speakers, industry thought leaders and experts to Lisbon to share their insights on how to turn ideas into well designed products, aiming to inspire through talks and workshops in areas such as Product Design, Product Management, Service Design and Hardware Startups.”
Forge Conference202 “Home to America’s original makers, Philadelphia has tons of great people, meetups and groups, but Forge Conference is the flagship event for those making an impact in the digital space. The conference brings together extraordinary speakers and practitioners from around the country in user experience, design, development, and digital product management. There’s an intimacy to the event, and to the talks, which are focused on sharing stories and lessons learned from some of the most talented and passionate people in the industry.”
Node.js Conf Italy204 Node.js Conf Italy is “about production node.js usage, mad science built in node (in the past we had a talk on node.js submarines!), cool modules and new approaches.” Organizer “WEBdeBS is a group of people sharing a strong passion for everything related to the web (but not only).”
Connect.JS 2015206 “After a stellar inaugural ConnectJS in 2014, we are expanding from 4 to 8 tracks, with twice as many sessions and over 800 people for 2015! With 2 more tracks on Web & JavaScript plus dedicated 2 day tracks on PHP and Ruby/Rails, we’ll have tons of great sessions to choose from – whether your build for the web, server, or mobile.”
ASCEND Digital Marketing Summit208 “ASCEND brings together the brightest minds in the industry to learn the strategies and tactics it takes to create successful, results-driven marketing campaigns. We’ve carefully curated our selection of talks to bring you 2-days of practical insights and anecdotes, from content marketing, conversion optimization and more. You’ll walk away with the skills you need to build a better business and become the ultimate digital marketer. Plus, a ton of valuable connections from all of the networking opportunities.”
HTML5 Developer Conference210 “HTML5Devconf is the largest gathering of technical software developers, designers and decision makers in the world focused on Internet software technologies such as JavaScript, HTML5, CSS, node.js and other cross platform web, mobile and server technologies.”
SmashingConf Barcelona 2015212 “A brand new Smashing Conference. In a brand new, special location. With the same guiding principles that we care about — a lot. Connecting with the community. Practical lessons learned. Pragmatic insights from people who’ve learned a thing or two from their very own experiences. Two days, 16 speakers, lots of networking. Sound like a good recipe to you?”
Interact London 2015214 “Interact London is a bespoke event that explores the importance of design and the roles that User Experience and Information Architecture play in today’s digital society. The speakers and talks presented represent a mix of ‘philosophy and practice’ from some of the most accomplished thinkers and practitioners in their fields. Interact London is a forum for people to talk about design, the role it plays in the digital world and those who believe that design can make a difference.”
AngularConnect216 “Coming to London this October, AngularConnect is a two-day, multi-track conference featuring talks from the world’s leading Angular experts, including the core Angular team from Google. We’re expecting up to 1000 developers, making this the largest Angular conference ever! Learn from your peers, get involved in interactive sessions, and contribute to the Angular project.”
Webdagene 2015218 “Webdagene is Norway’s (probably Scandinavia’s) leading conference for web communicators with 800 attendants in 2014. The conference is hosted and organized by Netlife Research, a Norwegian design and user experience consultancy. Webdagene is a 3-day conference with 1 day of workshops/tutorials and 2 days of keynotes and presentations. Web editors, marketers, communicators, content strategists, digital managers and designers are the primary audience for the conference.”
HighLoad++ 2015220 “HighLoad++ is one of Europe’s biggest and most famous professional conferences on the development of high-loaded web-projects. The conference has been held annually in October since 2005. It usually takes place in Moscow; from year to year we choose the best Moscow conference centers for our guests’ convenience.”
WebTech Conference 2015222 The WebTech Conference deals with a plethora of technical and methodical concepts, that are import for successfully working in the web today. Besides discussing HTML5 and JavaScript the conference will also feature presentations on modern architecture and methods, such as agile methodology, continuous delivery and DevOps.
Aggregate Conference 2015224 “Aggregate presents Content Derby. Two days of sessions discussing content as a practice. The first #GGRGT was a conference that melded tactics with community. We’re doing that again, but with a specific focus on content as practice. Everything from getting content from one place to successes (and failures) of implementing particular tactics. Lessons learned. How you overcame challenges.”
CSS Dev Conf 2015226 “CSS Dev Conf is the place to learn techniques for everyday workflows to cutting-edge specifications landing in browser nightly builds. CSS Dev Conf features some of the most well-known people in CSS making sure you get you get practical, actionable content.”
FullStack 2015228 “FullStack is a three day, multi-track conference for full-stack developers. The first two days will consist of talks, discussions, and extended IoT workshops. The third day will include a series of workshops so that you can gain some hands-on experience with the ideas and skills you picked up during the conference. We received lots of ideas, talks and feedback in response to our Call For Thoughts this year and some hot topics, including JavaScript, ES6, Angular, Node, Microservices and IoT are clearly emerging.”
Future of Web Design San Francisco230 “We proudly bring you the 1st ever Future of Web Design, San Francisco – the event for web designers and developers who want to be on top of their game in usability, responsive design, CSS, and front-end development. With a healthy blend of inspirational sessions and practical advice, #FOWD is the design and developer conference to take your skills to the next level and meet like-minded individuals ready to make the web awesome together.”
Amuse UX Conference232 “If you are a UX practitioner, product manager, frontend developer, designer or market researcher of digital products or simply interested what’s happening on the other side of the screen this conference is for you. Come and see how UX is done by the greatest players, get inspiration from their successes and failures and network with other professionals like you.”
REVOLVE Conference234 “REVOLVE Conference is a two-day gathering of creatives from across the country. This special event offers the creative inspiration to rekindle your passion for your work plus the tactical, take-home information and resources you need to achieve and advance in your career. Learn from platform-changing thinkers and disruptive innovators from the creative industry through practical sessions that address the challenges you face today.”
Droidcon London 2015236 “Want to find out about all the latest Android advances, listen to expert speakers, see fantastic new technologies, and meet the international Android community? Then come and join Droidcon London, the largest Android developer conference in Europe!”
beyond tellerrand 2015238 “The name beyond tellerrand expresses the aim, that everybody involved wants look a bit further, look beyond the edge. It also reflects the global perspective of the event. The expression is a mix of the English word “beyond” and the German phrase “Über den Tellerrand schauen,” which means “Think outside the box”.”
Future of Web Design NYC 2015240 “We proudly bring you the 9th annual Future of Web Design, NYC – the event for web designers and developers who want to be on top of their game in usability, responsive design, CSS, and front-end development. With a healthy blend of inspirational sessions and practical advice, #FOWD is the design and developer conference to take your skills to the next level and meet like-minded individuals ready to make the web awesome together.”
Thunder Plains Developer Conference242 “Thunder Plains is a web and mobile developer conference organized by theOklahoma City Javascript User Group. The conference focuses on JavaScript and related technologies in a wide variety of different use cases and platforms that make the web all the more interesting.”
GWTcon 2015244 “A conference like GWTcon is all about new ideas, getting a renewed perspective on old topics, encouraging discussion and getting to know new people. A whole day focused on GWT and its ecosystem.”
Frontiers of Interaction 2015: FrontiersX246 “From mobile payments to improved customer experiences; from wereables to the internet-of-things; new and better digital applications and improved in-branch technologies. This is what you will find at FrontiersX, workshop and staget presentations with the most innovative CEOs from traditional banks and CEOs from the most disruptive start-ups in the global fintech arena.”
NationJS248 “Bringing the best of development with JavaScript and the Web Platform to the Mid-Atlantic.” Enjoy 2 days and 21 sessions with expert industry speakers.
Collaborate Bristol: UX/Design/IA250 “Collaborate Bristol is a UX, IA and Design conference in celebration of World Usability Day 2015. The conference returns for the third year running, aimed at encouraging sharing, learning and networking within the digital community. The event returns, but with the grand new location of the Arnolfini, offering a unique chance to network with peers and learn from top brands and internationally renowned speakers.”
Ampersand 2015252 “Ampersand is an affordable one-day event for knowledgable web designers and type enthusiasts. Ampersand 2015 will be a fabulous day of nitty gritty details in all aspects of web typography, presented by experts in typeface design, layout, typesetting, performance & optimisation.”
Full Stack Toronto Conference: #fstoconf15254 “Full Stack Toronto Conference hosts speakers from around the world and across the stack! We organize things a bit differently too, all of our sessions are workshop-style where you can expect to leave with actionable items to continue your career growth, we keep the sessions free of commercial content so you don’t feel like you have been pitched to, and we leave ample time for you to network with your peers to learn about how they approach similar problems. This year we are excited to bring you the same commitment to awesome content and opportunities paired with improvements from your valued feedback.”
QCon San Francisco 2015256 “QCon empowers software development by facilitating the spread of knowledge and innovation in the developer community. A practitioner-driven conference, QCon is designed for technical team leads, architects, engineering directors, and project managers who influence innovation in their teams.”
5th Global Innovation Forum258 “The 5th Global innovation Forum focuses on innovation, design, creativity, R&D, new product development and future trends. An excellent platform for pure knowledge sharing and establishing new valuable contacts. You can expect a tremendous agenda, experienced speakers, key messages, global players and intense networking.”
Apps World 2015260 “Developer Conference & Exhibition: Now in its 6th year, Apps World has grown to be the leading global multi-platform event in the app industry. Following on from the success of the 2014 show, this year’s event is set to be the biggest yet with over 350 exhibitors and over 12,000 attendees across the app ecosystem including developers, mobile marketers, mobile operators, device manufacturers, platform owners and industry professionals registered for two days of high level insight and discussion.”
IoT World Forum 2015262 “IoT World Forum 2015 is the leading Internet of Things Conference 2015 and the world’s leading IoT Event focusing on IoT applications, IoT Solutions and IoT Companies for all verticals including automotive, healthcare, asset and fleet management, manufacturing, security, retail point of sales, smart grid, smart metering, smart home and consumer electronics industry.”
MODXpo 2015 Munich264 “Come join like-minded MODX professionals and have an amazing exchange of ideas about the role of MODX in the future, MODX development techniques, workflow, web technology in general, and some good ‘ol fashioned fun!”
AnDevCon Santa Clara 2015266 “AnDevCon is the technical conference for software developers and engineers building Android apps. Offering mobile app development training, embedded Android secrets, and Android app development tutorials and classes, AnDevCon is the biggest, most info-packed, most practical Android conference in the world.”
App Promotion Summit Berlin 2015268 “After three groundbreaking conferences, the leading app marketing event is returning to Berlin. Discover from the top industry practitioners how to take your mobile app and game marketing to the next level. We are delighted to be returning to Berlin this November. App Promotion Summit Berlin 2015 will once again bring developers, media companies, app studios and brands together with the mobile ad networks, cross promotion exchanges, software providers and agencies that can help them succeed in mobile app marketing.”
Here are a few links that will help you keep up with newly scheduled design and development conferences being shared through Lanyrd, sorted by category:
If you’re planning to attend any of these events, we’d love to hear your thoughts in the comments section below! What are you most excited about? What are you looking forward to learning and experiencing?
Our next events list will be published in the middle of next year, so keep your eyes (and ears) open! And by the way, the Smashing team is constantly organizing a series of workshops279, as well as the Smashing Conferences280 — it would be wonderful and a great honor to meet you personally someday!
While designing babylon.js v2.0 (a library for building 3D on the web), I recently found myself wishing that more APIs were fluent – that is, I wish the community could more easily read, understand, and build upon the work while spending less time in the tech docs. In this tutorial, I’ll walk through Fluent APIs – what to consider, how to write it, and cross-browser performance implications. A fluent API, as stated by this Wikipedia article, is an implementation of an object oriented API that aims to provide for more readable code. jQuery for instance is a great example of what a fluent API allows you to do: 1 2 3 4 $(‘
‘) .html(“Fluent API are cool!”) .addClass(“header”) .appendTo(“body”); Fluent API lets you chain function calls by returning this object. We can easily create a fluent API like this: 1 2 3 4 5 6 7 8 9 var MyClass = function(a) { this.a = a; } MyClass.prototype.foo = function(b) { // Do some complex work this.a += Math.cos(b); return this; } As you can see, the trick is just about returning the this object (reference to current instance in this case) to allow the chain to continue. If […]
* You might also be interested in the following articles:
We all aim to be as agile as possible in today’s fast-paced web design world, while also remaining thoughtful of the end user and those we work with. After Effects is a great tool that enables us to quickly visualize and test robust animation patterns throughout a web design, share those with the development team and clients, and even test variants with users to get quick validation on a design before it goes into production.
Web design transitions and animations, like parallax scrolling, hidden navigation, swiping, pull to refresh, transformations or really any UI transition, are great to prototype in After Effects. In this article, we will be scratching the surface of how to fit After Effects into your UX workflow, and we’ll share details, advice, experience and links that you could use as influence and thought starters in your next project.
I like to think of motion in UI as a new type of aesthetic in design — a visceral aesthetic3. Users might not be aware of it until they experience an interface that lacks it. This visceral aesthetic mimics how objects in real life actually move. This all stems from basic principles of physics. Physics is defined as4 “the natural science that involves the study of matter and its motion through space and time, along with related concepts such as energy and force. More broadly, it is the general analysis of nature, conducted to understand how the universe behaves.” In our case, our universe is the screen.
Real-world physics principles can improve UX.
What Is After Effects?
Over the past year or so, you may have noticed a ton of really cool UI animations dancing around the interwebs. You may have said, “That looks cool! How did they achieve such accurate transitions like that without any code?” Well, the answer is probably After Effects. For those who do not know, After Effects is Adobe software that, from its inception, has been used to build complex title animations and special effects for film. Designers realized its power and started using it to show complex interactions and animation quickly and iteratively.
The photo below might look intimidating, with all of those layers and little diamonds (keyframes). A keyframe in animation is points that define the start and end of any transition. The points are called frames because their position in time used to be measured in frames on a strip of film.
If you remember Flash programming or “tweening” in Flash, then this concept should sound very familiar. Keyframes provide complex animations with very simple logic. And if you’re a developer, you could have some real fun creating robust keyframe animations through the software’s expression engine7. Again, similar to Flash, which allows users to tween via keyframes or write custom code via ActionScript, After Effects has a built-in JavaScript-based engine that allows for more streamlined animation, without requiring you to create tens or hundreds of keyframes by hand.
An expression is a little piece of software — much like a script — that evaluates to a single value for a single layer property at a specific point in time. Whereas scripts tell an application to do something, an expression says that a property is something and tells that specific layer or property to animate or transition in a certain way. Expressions prove very useful when you’d like to test a particular animation across multiple elements very quickly.
After Effects is similar to tweening in Flash.
Benefits Of After Effects
Speed Up Project Timeline
Explaining a complex UI animation to clients is really hard. Most of them cannot picture it. I even have a hard time picturing a UI animation when reading someone else’s documentation. When clients see a slick and finessed animation style in After Effects, they are thrilled. It gives them a clear picture of how the end product will look and function.
This kind of exploration of functionality through prototypes can be done in various phases of the design process. Showing a client some basic exploratory animations and transitions during the project’s discovery phase could get them really excited about the possibilities and make them want more for their website or application. We normally use After Effects as a way to validate functionality and visual design choices. No matter in which phase of the project cycle you choose to implement After Effects prototyping, be sure to have a clear end goal and know that this form of prototyping is supposed to be rapid. The goal might be to showcase the most complex pieces of functionality and finetune them for developers, or simply to show the client something shinny and sexy. Either way, the process should be rapid.
This rapid way of visualizing animation is also great for testing different designs with users. At this point in a project, most design decisions are based on the analytics of existing websites (if any), personas drawn from the user base and a lot of assumptions. So, this process enables us to easily create a few variations of the same design element, showing how it moves, and presenting that to users and asking for feedback in a survey or with one-on-one questions. By simply letting the user view the animation on a device, they can quickly judge which feels more natural and is most appealing. You can also bring this into a more traditional approach to testing by incorporating the animation as a GIF in a clickable prototype on whatever web platform you are using. Most rapid prototyping web tools support GIFs nowadays.
There are many ways to animate the same UI element.Here is another version of the animation above that could be used to get quick user feedback.
Paper-based (wireframe) transitions — of menus, button states, off-canvas containers or whatever else — might seem like an easy solution. But once you’ve annotated them for the developer and seen them in motion, you might quickly change your mind and say, “Actually, the menu looks weird sliding in from the left. Could we try sliding it in from the top? And could the link items in the menu list come in delayed right behind one another?” This turns into a back-and-forth between developer and designer and a matter of trial and error on both parts.
Avoid this by taking a few elements from your website in any form, whether they be boxes and arrows or visual comps, and making a few variants of how the elements could animate. Once this is complete and while the visual designers are making their last-minute tweaks and cleaning up their files for development, these different animations could be worked into quick prototypes in Invision8 or a comparable web-based prototyping tool, and they could be sent to stakeholders or actual users for testing. We could then take the results of these quick usability tests and tweak our functional document to reflect our findings, along with a GIF of the most effective menu variant.
To accompany the GIF file, we would add our functional documentation, as well as the easing curve that was applied and the duration of the animation. Because these attributes of the animation seemed to perform best among the variants, we can start to apply these to other functions and elements of the website to create a consistent visceral feel throughout the experience. Yes, other elements will have slight variations due to their different purposes, but again, the answer to that comes with testing.
By introducing this into your lean UX or agile workflow, the back-and-forth discussion about animation between the development and design teams can be chopped down tremendously, and the development team will feel more confident in its direction and will feel less of a cognitive load while programming and reading through the documentation. If you’re interested in how to go about translating custom After Effects easing easing curves to CSS3 keyframe animations for delivering more precise documentation to your developers, check out this article by Ryan Brownhill on the subject9.
As mentioned earlier, this visceral aesthetic mimics how objects move in real life. Objects in the real word don’t move at a constant speed throughout the duration of their movement — they ease in. For instance, if you launch your computer mouse across the desk, it will not move at one constant speed and then come to an abrupt stop. In the digital word, we mimic the movement of real objects using easing curve functions.
An easing function usually describes the value of a property given a percentage of completeness. Different frameworks use slightly different methods, but the concept is easy to grasp once you get the idea. It’s probably best to look at a few examples.
The Easing Functions Cheat Sheet3513 enables you to go through and check out how each individual curve puts objects in motion, and then grab the function in either CSS, SASS or JavaScript to be leveraged in your After Effects project. If you’re looking for something a little more automated and less custom, you can download Ease and Wizz14, a great script for After Effects that comes loaded with multiple curves; when keyframes are selected, you can apply a curve’s expression to those keyframes.
Visualizing cubic-bezier curves compared to a linear curve
Integrating With Different Program Workflows
Photoshop or Illustrator to After Effects
This is probably how most designers on your team will be turning your wireframes into visual beauties. Because After Effects is a Adobe product, Photoshop (PSD) and Illustrator (AI) files are extremely compatible. You don’t need any special exporting specifications for PSD files. Just save a file and import it. And for AI files, all you have to do is make sure that you “Release Layers to Sequence” before saving the file.
A great aspect of taking PSDs into After Effects is being able to edit text. This way, if you are going for more high-fidelity animation testing and some copy happens to change in the comps, making a change in the animated prototype becomes really easy.
If you haven’t enabled text, there is always the option of live updates. The beauty of working within Adobe programs is that most of them communicate very well with each other. So, when you make a change in a PSD or AI file, it should reflect in your After Effects composition. You may have to restart the After Effects project to see the changes reflected properly, though.
Try to limit animation GIFs to six seconds — that is, not the entire transition, but rather the entire video you will be exporting. While I sometimes use After Effects to show more complex flows that end up being two to three minutes long, that is not ideal because the file’s size will be too big and the file’s structure over-complicated. Doing quicker micro-interaction animations is most efficient and effective.
When presenting these animation videos to clients, I’ve found that just hitting the play button does not quite get the reaction I had hoped. I have recently been showcasing animations to clients in GIF form or leaving them in video form and allowing the client to use the video scrubber, which creates an interaction that mimics the functionality of grabbing a scroll bar with the mouse and sliding down the page. This, of course, does not work in all situations, but it is a really effective when dealing with page-scrolling animations or parallax effects or when you need to hide the navigation on scroll.
Sketch to After Effects
We’ve recently started using Sketch 3 at work, and it’s a great tool. It speaks with native CSS units of measurement, and hundreds of repositories on GitHub have plugins for it, and it fosters collaboration with the functional design team and visual design team if they are working in the same program. My only gripe is that it is not very compatible with After Effects. I figured out a few workarounds that ultimately didn’t prove to be very efficient. However, Issara Willenskomer has found a clever way to easily convert Sketch files into either PSD or AI15 files for easy animating in After Effects.
Exporting Canvas From Sketch
When exporting your Sketch file for AI, select the artboard(s) that you’d like to animate, select the format of SVG in the tools panel on the right, and then click “Export your file name” at the bottom of that panel. Now, you’re ready to open Illustrator and import the SVG file.
Once you’ve selected and opened the exported SVG in Illustrator, you’ll notice that all of the layers are lumped together. By default, when Sketch exports SVG files, it groups all of the layers, so you’ll need to ungroup them. Once the layers are ungrouped and in their individual layers, they are technically still living within the same layer. When prepping any AI files for animation in After Effects, you’ll need to use the special “Release Layers to Sequence” feature within the Layers panel. Make sure that the parent layer is selected when doing this. Once the layers have been released, you’ll notice that they have all been assigned their own color. At this point, you can select all of the files that have been released and move them above that parent layer.
18 Import the exported file to Illustrator and use the “Release layers to sequence” feature. (View large version19)
Order and Organize Layers
It’s time to organize this big mess to make it easier to edit. This is where logic comes into play. Think about how these layers will be animated, and simplify as much as possible. For example, if a ton of layers are in the background but you don’t need to animate those layers, you can group them in Illustrator so that they are imported as a single layer, or give them intuitive labels so that you can pre-compose those layers in After Effects. The pre-composition route will allow you to actually animate them later on, if you decide to do so.
Order and organize your layers so they’re easier to edit.
Import Illustrator File to After Effects
The most important part of the importing process, and where most people get frustrated, is the little drop-down menu where you must select “Composition – Retain Layer Size.” If this is not selected, the AI file will be imported as a flat file, without editable layers.
Pre-comps will help you organize complicated After Effects projects. This is really important if a project is being touched by multiple people or if you expect to hand off a project to an interaction designer. The advantage of animating PSD documents over AI and Sketch documents is that if the layers are in a folder within Photoshop, that folder will be converted into a pre-comp. If you’re not animating a PSD, then once you’ve done your due diligence in the chosen UI platform, you can easily pre-compose layers by holding Shift, selecting the layers to pre-compose (i.e. group), right-click and hit “Pre-compose.” Now, you can animate the entire group or double-click into that pre-comp and animate individual layers.
22 Pre-comps will help you stay organized in complicated projects. (View large version23)
Ease and Wizz
Ease and Wizz is a powerful expression engine that has popular preset easing curves. Open the Ease and Wizz UI panel in After Effects by going into the “File” menu item and then into the Scripts section. This script panel can be conveniently placed wherever best fits your workflow. Once the script panel is where you’d like it, you can set keyframes on a selected layer, select those keyframes, choose an easing curve from the Ease and Wizz script panel, and then apply that curve. The easing curves can be applied with a few clicks, and they add a feeling of real-world physics to your UI animation that the basic linear easing cannot.
Once you have applied the Ease and Wizz curve to your keyframes, you’ll notice they have turned from the normal diamond keyframe shape into an hourglass. This means the easing curve has been applied. Another indicator is that the coordinates of the animation have turned red. From here, you can go in and customize the easing curve of your UI animation if you wish.
The way Google presents its material design micro-interactions is fantastic. They’ve taken simple shapes that resemble UI elements and quickly done motion testing on them. This way, both functional and visual design work in tandem, speeding up the redesign workflow. In Google’s words29:
“”Perceiving an object’s tangible form helps us understand how to manipulate it. Observing an object’s motion tells us weather it is light or heavy, flexible or rigid, small or large. Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.”
This method could be very effective if you do not have a dedicated interaction designer on staff. Once the client has approved the wireframes and the designers are putting the finishing touches on the visual UI, you could quickly take a few key pieces of the experience and animate and test them. When you show the client the visual design, these reframe animations could play a supporting role.
The high-fidelity approach takes a little longer because you have to wait for the visual designers to put their spin on the UI, but the results are great. Clients will be amazed at the level of finesse and attention to detail. This approach also gives you a great artifact to share with the various online GIF communities.
Conclusion
One last thing to keep in mind is how to stay on track when using this form of visualization of functionality in your workflow. As mentioned plenty above, this is meant to be rapid, not its own phase of the project. It supplements the discovery, functional or visual design phase. Clients will likely ask for changes to the animations, and sometimes they’re reasonable requests, but I wouldn’t take these animations into multiple rounds of revisions. If it gets that far, you’ll know that the train has gone off the tracks.
Unless your project is structured beautifully, certain animations are a pain to tweak. Just let the client know what your intentions are for the animations, and let the tweaking and finetuning happen in the code of the final product. Until then, you are simply painting a functional and visual picture for the client and developers, giving them a clear view of your vision.
I hope now you have some ammo to take back to your team and make a case for injecting this software into your web design workflow. Granted, it’s not necessary for every web project, but it’s an MVP (most valuable player) in certain projects. Below are some inspirational resources and reference material related to GIF animations to get you started creating magical UIs in After Effects.
Next in our infrequent series of typography setups is splendid multi-faceted 3d typography. For sculptural type artists opt in favor of Cinema 4D or Zbrush, while for creating an illusion of dimension, designers move heaven and earth resorting to all sorts of tools and material. From rendering in Cinema 4d as a primary instrument for building a simulating environment to manipulations with Illustrator’s toolbox for polishing up the overall appearance and finishing off the composition, there is a lot of work to be done to achieve the desired result. Conditionally, 3D typography can be split into 2 directions. The first includes all surrealistic works, and the second focuses highly realistic visualizations. Each one has terrific examples that can serve as a source of inspiration. Today we have covered both of them. Shape Typeface Creator: Jaroslav Hach Beta Project Creator: Fernando Matias Fillingraphy Creator: Ivan Loos Great Little Place Creator: Tobias Hall 3D Alphabet Creator: Craig Minchington February Update Creator: Peter Tarka Hola BCN Creator: Joaquim Puigdomenech How to Work Better Creator: a ma Transformer / X Y Z Typography Creator: Nguyen Sanh Wired Creator: Wes L Cockx A Dose of Neon Creator: Katt Phatlane AMP Creator: Like Minded Studio BASE steckt voller Möglichkeiten Creator: FOREAL Typography Manufacturing Creator: Omar. Aqil NIKE AIR MAX DAY […]
* You might also be interested in the following articles:
Web-based interactive experiences are widely used in the modern age for a variety of reasons, predominantly for the advertising of premium high-street products and services. After discovering the little-known clip-path property of CSS, I embarked upon a five-month interactive production journey of my own with a different purpose: to raise awareness of the struggles of 30 similarly little-known endangered species.
This article explores the inspiration for the project and aspects of how different parts were built, and I’ll dive into how you can use this greatly underrated line of CSS for your own projects.
In Pieces: 30 Species, 30 Pieces.
In Pieces1 is an interactive exhibition of 30 of the world’s most distinct but, sadly, endangered species. The experience is an informational reminder of the beauty we are in danger of losing every day, but it’s also a showcase of evolutionary distinction, because many of the species evolved in ways that make them genetically special. Users are told the stories and struggles of these unique lifeforms, as well as invited to dive into numerical data, download wallpapers and even obtain a poster featuring the entire collection — all completely viewable on mobile devices.
Inspiration: CSS Clip Paths And Animation
In Pieces started as experimentation and tinkering in code, not a grand plan for an interactive piece to help conservation, as romantic as that notion sounds. I remember reading about the polygon property of CSS’ clip-path in mid-2014 and learning of its amazing potential. A few months went by and I was surprised not to see it used much on the web, probably eclipsed by the attention given to SVG, canvas and WebGL. I felt that clip-path provided an opportunity to dive into something untouched and explore what could be made from it. At the same time, creating a project in pure CSS felt (rather ironically) cutting-edge.
If you’re not familiar with CSS’ clip-path or its polygon possibilities, Dirk Schulze has a great tutorial2. As one example, turning a regular div into a triangle is possible with a snippet of code:
The very first thing I wanted to see was whether the polygon property could have a conversation with CSS transitions, and how smoothly their first date would go. I was happy to see that the two were a natural union, especially when an easing curve is thrown in to add fluidity:
With this established, I wanted to think up a way that would make the polygon aesthetic matter and become some sort of visual simile — polygon animals seemed a natural visual area to explore. First, I want to get one thing straight: Polygonal species are not a new thing in terms of art direction. Hundreds of projects have used polygons to form animals, and they are easily findable on websites such as Behance (search for “polygon animals”3). This point is very important when I talk about the “idea.” I’ve seen some really nice comments on the project, and some have included references to “origami” or “polygon style,” but they miss the mark a little in that the idea is not a visual style, but rather about the formation of the species through “pieces” and the analogy that their existence lies “in pieces,” and thus they themselves are all “in pieces.” Without this aspect, the project simply becomes visual periphery.
I think there is something very romantic and interesting in linking a piece of new technology directly with an idea and in designing and developing it in a way that hooks into and works directly around that idea. This really gets to the core of what In Pieces is about.
Other ideas came quickly after this initial experiment, such as the discovery that one animal would require around 30 pieces, which led to the decision to create 30 species, and the idea to use the polygonal forms to create data visualizations of species’ numerical histories and other statistics. Let’s dive into some specific parts and see how they were achieved and how you can use them for your own interactive projects.
Creating the Polygon Animals
Each triangular piece was hand-coded from scratch, because no tool or framework existed to help me. If you inspect the code for the species, you will see that they are made of 30 divs placed on top of each other, nested in a series of parent divs. Each of the 30 divs in turn contains a child that is essentially one of the 30 pieces.
Illustration
Perhaps the simplest aspect of the project was how the original illustrations were crafted in Adobe Illustrator. It was a tough task to create all 30, but it was also the most straightforward part of the project, the main restriction being the number of polygons. The second figure below shows the asset that was produced in the tracing phase.
Vectors of scimitar oryx in selected state. Transparent PNG image example — used to trace over in-browser Here’s an image of the Golden Poison Frog in Illustrator’s outlines mode, which makes the illustration process look cooler and more considered than it was. But do note the deliberate overlaps.
Tracing
I then used these illustrations as flat PNGs in the browser to trace over — but with 30 illustrations to copy over to the code, I desperately needed a way to speed up the process, which consisted essentially of placing the 30 polygons in default positions and then individually moving each point to match the PNG beneath. Some online resources, such as CSS Plant Generator4 and Bennett Feely’s Clippy5, are available for us to map out clip-path points, but I needed something much more bespoke — so, I created it in the form of a JavaScript function:
$('body').on('click', function (e){
var mouseX = e.pageX;
var mouseY = e.pageY;
var shapesoffsetX = $('.polygon-wrap').offset().left;
var shapesoffsetY = $('.polygon-wrap').offset().top;
var polygonswidth=$('.polygon-wrap').width();
var polygonsheight=$('.polygon-wrap').height();
var shapesmouseX = mouseX - shapesoffsetX;
var shapesmouseY = mouseY - shapesoffsetY;
var mousepercentX = shapesmouseX / polygonswidth;
var mousepercentY = shapesmouseY / polygonsheight;
var finalmouseX = (mousepercentX) * 100 ;
var finalmouseY = (mousepercentY) * 100 ;
var normalisedX = parseFloat(finalmouseX).toFixed(3);
var normalisedY = parseFloat(finalmouseY).toFixed(3);
nodecount = nodecount+1;
if (nodecount < 3) {
nodescss = nodescss + normalisedX + '% ' + normalisedY + '% ,';
} else
if (nodecount == 3) {
nodescss = nodescss + normalisedX + '% ' + normalisedY + '% );';
alert(nodescss);
nodescss = '-webkit-clip-path: polygon( ';
nodecount = 0;
}
});
This JavaScript function is fired upon a click on the body. You might want to run a query of a particular variable switch, like I did, so that it fires only when you’re tracing polygons. Here’s a quick summary of what the divs and variables are referencing:
mouseX and mouseY
This picks up the position of the mouse at the point of the click.
shapesoffset
This is the distance of the div from the top left of the browser window.
shapesmouseX and shapesmouseY
This finds where the mouse is in the context of polygon-wrap.
mousepercentX and mousepercentY
This calculates the percentage value of the mouse’s position in the context of polygon-wrap.
finalmouse and normalised
These values turn these decimal percentages into usable CSS values.
nodecount
This is how many times the user has clicked on the screen, from 0 to 3, before looping back to 0. Because the pieces are triangles, three points are required for each.
So, what’s going on here? Essentially, this function enables you to click three times over the flat PNG to find percentage plots in the context of the div you’re plotting. As you click, a string variable is sequentially made up until the third click outputs the full CSS line within an alert, ready to be copied and pasted.
Alert presents a copy-and-pasteable line upon tracing three points, ready to be placed in CSS.
Further Processing
Once you have your code copied, it’s easy to paste, but I also needed to make sure that the appropriate shard was being colored while I did this. Copying every color from Adobe Illustrator and then pasting into Sublime seemed too lengthy a process, and there’s an app for that. I can’t recommend Sip76 enough because it directly copies the color you’ve picked to the clipboard, ready to be outputted to the code:
Sip76 is a handy app that enables global color picking.
I was able to output the code for all 30 pieces of each animal, one by one, using this tracing process. But there was still work to do — one of the big problems in rendering this style is the anti-aliasing between two shapes. If you fit two vectors perfectly alongside each other, you get a very faint but noticeable line running through, just as you do in Illustrator. So, I needed to very slightly overlap each vector via the Inspector and, thus, required a way to pinpoint which polygons were the troublemakers. This is where another of CSS polygons’ great advantages comes in: They automatically mask background images within the shape. So, I created repeating background images of all 30 numbers to track which polygons were which:
Repeating number images masked within polygons to indicate which shard to alter.
For me, polygon clip paths provide something special via masking like this. I used it to solve a problem (and later used it for the blood effect upon the “smash”), but ultimately I think extremely creative things can be done with the effect. One awesome potential lies in the fact that if you move a polygon, the image doesn’t follow the polygon — you’re altering the mask. If you mix the excellent performance that one polygon alone has when transitioning with a background image that can move simultaneously, then I think something really cool lies beyond. Maybe it will be the stem for a new personal project. Another thing to bear in mind is that you can mask elements, not just images. In fact, a few paragraphs down I go into a bit of detail on the “shimmering” effect on the species, which does exactly that.
I couldn’t find a way personally, but I’d bet with more digging you’d also find a way to make the polygons visually “outlines” (like the frog image a few paragraphs above). Again, this could lead to a supercool scientific look. It’s a tool with so much potential, and I’m excited to see new things made with it.
How The Species Change
In Pieces rests heavily on the addition, removal and alteration of class names, and the species themselves are no different. Changing the class name on one lone parent div to the respective species allows for the appropriate CSS changes to the elements inside it. The species are kept within an array, like so:
Anytime a new species is called into play, whether it be the next one, the previous or one directly selected, I determine what the current status of the species is via this code:
For reference, #animalchanger is the parent div that controls the species, which is set to a string variable from the array animalList. This line determines the index (i.e. integer) for the current species’ name in the array. This is used to create the variable newAnimal — the name of the new species, depending on which button the user has clicked. As an example, the “Next species” button would be this:
newAnimal = prevAnimal + 1;
Of course, a whole host of other stuff is going on simultaneous to this, but with the index of the new animal established, this is then pushed into the div’s class:
You now know how the polygons are created and that the alteration of the species’ polygons is processed via class changes to the parent div. Now to delve into the fun stuff, animation! As mentioned, everything is based on CSS, and the movement is no different; a wide variety of base transition settings are used to adapt the movement to the appropriate action taking place. Before we start with the CSS, I should mention that in the last coding example, another thing is calculated: the direction the user is going in (left to right or right to left).
This assigning of a “direction” class leads to the species flowing in the direction that you are browsing and is done via two SASS for loops, depending on which of the two classes is in play.
As you can see, there is a variety of speeds and delays for different properties. Sass’ for loop is utilized to alter both the transition’s duration and the transition’s delay, depending on which index the polygon has. For example, in a left-to-right movement, the 10th polygon will transition with a duration of .7 seconds and a delay of .4 seconds. The reverse direction is calculated simply by reversing the order — subtracting the index of the polygon from 31 instead.
Species Animation
Contrary to the impression of some, the species are not moved with CSS animations. The reason I veer away from CSS animation is that I don’t like the visible “cut” if the animation is interfered with halfway through. Instead, I’ve adjusted two classes that loop through two states: primary and secondary movement.
There is new CSS for each state, and the polygons simply move to a new place, change color or otherwise alter as an override. Importantly, as soon as the “animation phase” kicks in (after a species has completed its transformation), the transition durations and delays on the polygons from the previous code are overwritten to be synchronized and faster.
Below, you can see the two class sets in play: animalStates controls the movement of the Golden Poison Frog’s vocal sac, while animalStatesSecondLevel controls the sporadic changing of the eye through just one movement. This dual-layered approach to movement is seen across the set of species to create depth and disrupt visual repetition.
Species animations use a dual class set to create layered movements.
Shimmering
One of the quickest visual effects to implement on the website was the subtle shimmering effect that happens every few seconds across the species, adding an extra splash of 3D gloss to the mix. These shimmers take advantage of the excellent masking that clip-path gives you by default: Anything contained within an element that has a CSS clip-path applied to it will be seen only within the masked area. For the shimmer, I created a full-width and -height pseudo-element that lies within each shard.
The shimmer is created by each pseudo-element simply fading in and out with transition delays. This sequential fade creates the nice flowing effect. Consider how bad this would look if the separated delays weren’t present. I’m using RGBa’s alpha value to change the transparency of the pseudo-elements, rather than opacity: RGBa is a lot less processor-intensive. Using opacity in my initial experiments led to huge glitches, as I’ll explain shortly.
Fallback
Clip paths are supported by all major browsers except for Internet Explorer, but one factor takes Firefox out of the equation as well. Firefox supports the technology, but only as an SVG-referenced path, meaning that alteration of the coordinate would need to be done outside of CSS. I’m sure someone with more of a developer’s brain could find a way to get this working across all browsers, but what I value in this project is, first, that it’s unabashedly experimental and, secondly, that it works across most mobile devices with good performance. The latter is absolutely key: Outside of the normal CSS media queries you would expect, getting the project to work on mobile was very much like dealing with Retina devices.
The fallback I went with for In Pieces is a simple image slideshow of the species. The idea is still there: Visually it’s very similar, but with the transition effects taken away.
Working With “Retina” And Bugs
With the technology still prefixed, it’s no surprise that you might encounter a number of problems when using CSS’ clip-path, especially when transitions are involved. First, they despise being overlapped with elements transitioning between opacity values — sometimes you’ll get visual “static” showing up, like an old television set that can’t find a signal.
The same goes for large transformations. As mentioned, I use a heavy sandwich of parent divs to translate, rotate and scale the species. Without this nesting, transforming the polygons directly created huge problems, which at one point almost ended the project prematurely.
In principle, Retina devices have no problem with clip-path, and you will probably be fine if your use of them is simple (i.e. for a few objects). But with 30 polygons, I found problems that probably relate back to the overlapping opacity issue. For example, you may notice that on non-Retina desktop screens, I have a nice vignette around the species that make the visuals appear a little more complete. Whether this used CSS gradients or an image didn’t matter — Retina screens and Safari choked unless this was taken away. So, it’s maintained as a “nice to have” for Chrome on non-Retina screens.
Performance
So much is going on within the website that it’s no surprise I had to do a lot of tinkering to maintain good performance. As noted above, Retina doesn’t play as nicely (this tends to be the case across intensely interactive content) and needed some things taken away. But I also did a lot of neat tricks with CSS to get performance running more smoothly, and they can be taken away and used again. I’ve talked about Sass’ for loops — 30 objects all being transitioned with slight delays to add depth to visual movement. But when used properly, this can also improve performance.
Turtle transition almost complete — and only a few polygons moving at one time.
Imagine that you’re moving 30 objects at the same time; you are asking a lot of the browser, and it makes sense that this would create problems. If you have a speed of 0.199 seconds and a delay of 0.2 seconds on each object, you would fix the problem by moving only one object at a time. The fact that the same amount of total movement happens doesn’t matter: If the animation is done as a chain, performance is immediately improved by 30 times. Also, note that the “.99” kills any overlap in that instance. Of course, 0.2 × 30 would mean a total of 6 seconds, which would become draining to the user. So, in my case, I went for somewhere in the middle, with the number of shapes moving at once spread out, for a good visual but better performance. This is a great trick because it’s usable for so many things (it’s used across the website for delayed transitions) but also adds so much depth to the visual.
This approach was taken a little deeper in the introduction to the website — specifically on PCs. Unfortunately, I discovered quite late that PCs seemed to be very chuggy on the very first part of the website, which concerned me immensely. I tried a lot of things, but in the end the solution was a mixture of things — one of which was to alter the amount of crossover that transitioned elements had within their timelines. On PC, transitions are made faster to prevent overlap, and that helped a lot.
I know that the debate on the performance of CSS versus JavaScript animation is hot now, and I don’t wish to come across as someone who is saying that things should be done one way; we all have our quirks. For me, however, it was notable how little work I had to do to make mobile devices perform smoothly, and I do think that they seem happy to perform CSS-based animation — it was no different working with the polygons either.
How To: Main Menu
Main menu to select any species.
One of my favorite parts of the website is the main menu because of how it was built. I can imagine this technique probably has quite a lot of uses, and it is actually used again in the data visualization part.
The menu system looks like the height and width of the circle you see, but the entire div is actually anchored on a central parent div of no height or width. This div — positioned centrally — contains 30 separate divs for each species, and pseudo-elements within each are used extensively to give the little interactive touches upon opening and hovering. But all of that is pretty simple stuff — the part I want to delve into is how these were actually positioned. Below is a very simplified version of what’s going on:
Here, 30 div elements are being referred to here as div. I’m utilizing a Sass for loop to use each div’s central anchor (still the very center of the circle — each one is positioned absolutely on top of each other) to transform it from this center, depending on which child it is. Now, 12 degrees fits into 360 degrees 30 times; thus, 12 degrees is the value used to rotate each sequential div. The effect is completed by moving each div away from the center by 230 pixels.
Transformation offset and angle rotation based on Sass for loop.
Little Touches: Data Visualization
Data visualization: polar charts.
Tools such as D38 are really expanding what can be done with interactive data visualization, as we escape the constraints of squares, circles and rectangles to create tactile communication of information. But CSS polygons can be used in this way, too, very simply. In the data visualization charts in In Pieces, I use the same technique as I did for the main menu to position dates and numbers around the circular form, using a single div, while changing clip paths to sweep and move between shapes to tell a data-led story. Here’s a line of code used to generate a quick and easy polar chart, as used in the diagram above:
One thing you might notice in the piece is that the charts sometimes move from 8 data points to 4, 5 or 6. When doing something like this, you must maintain the same number of polygon coordinates to transition between. Much like in many other programming languages, if you have a different number of points, then CSS’ clip-path doesn’t know how to process movement, and so it simply pops the next state into place. For, say, a 6-point data chart, I just made the 2 “mute” data points have coordinates of 50% 50%, meaning that the points seamlessly zip to the center.
Little Touches: Type Scratchiness
Throughout the project, major headers rustle and agitate with life via a looping scratchiness within the type itself. This is done with another little fairly new CSS trick that I’ve kept my eye on for some time: masking imagery within text.
Scratchy typography animation.
Targeting only WebKit browsers, the following code is used to achieve the effect:
It essentially mixes the basic CSS text-masking technique now available to use in WebKit browsers with a CSS animation that simply moves the background image between a set of different places with quick-spurt movements, resulting in the scratchy effect. Simples!
Little Touches: Ambiguous Iconography And Tinkering With The Mental Journey
Iconography used in the information centerpiece.
One piece of feedback I got several times relates to the user interface’s readability — specifically, the icons, especially those linking to the desktop wallpaper and data visualizations. It was a rare case of being pleased by negative feedback because it was actually exactly what I wanted. Essentially, I believe that if you have an experience like this one (I’m definitely not speaking of corporate websites, product-selling websites, etc.), spelling everything out spoils a lot of the user’s journey of discovery. You could probably guess that the icon on the right indicates desktop wallpaper or “imagery,” for instance, but it’s certainly not clear — however, this is completely intentional. Users who click the icon get a surprise when they open the window, another layer of content. Would people have clicked if they already knew what it is, and thus would people ever know that these desktop wallpapers are just a click away? I think that cleverly tinkering with the way a user mentally explores a website is just as important as creating a completely clear path for them.
The same could even be said of the most important call to action on the entire website — “What’s the threat?” The button jumps out with a subtle animation to engage the user, but the terminology doesn’t really explain a thing about what’s to come — the “smash moment.” Psychologically changing how a user is presented with information alters how they read it, in a state of surprise and intrigue.
Final Thought
The reaction to In Pieces totally blew me away. We could have endless discussion about whether a WebKit-only website is suitable for client projects (and it’s a worthy argument to have) but actual hit numbers and public response has to take on importance. I think that CSS polygons have great potential for future projects, and I hope to see the technology used in crazier, more creative ways than what I have achieved.
I’ve had many moments while traveling of trying to get to the bottom of why the project worked out so well. The message is important, and I think it shows how a side project with a genuinely good cause can reach more people, because the general public is more intelligent than we in the industry sometimes give it credit for. I think a project with no commercial intention can be appreciated by a user in 2015, and I find that interesting when taking on client work.
I think it’s an interesting project for designer-developers to look at because there’s something about one or two people being in control of the whole thing that results in complete communication harmony. From concept to design to development, all of the parts speak directly to one another, and by the end they are holding hands in a circle rather than being separate things that are nice in their own right. The polygon style wouldn’t work visually without the technology behind it, and the technology wouldn’t be saying anything without the cause or message, and this concept would be nothing without the “pieces” element that the polygon style brings. I’ve mentioned to many friends that I don’t believe that the design, idea, development, sound or overall journey offered by the project is the best, each taken on its individual merit. But because they all communicate in unity, they become bigger than the sum of their parts. And I think that this potential provides a great opportunity for hybrid designer-developers.
Please note that Bryan’s code could have been written in different ways. The point of the article is to highlight the approach and the result of an experiment. – Ed.
Wallpaper for jQuery Adds Image or Video Backgrounds to Any Website…
Make it Stretch: Full Image and Video Backgrounds in Web Design
Looking Into the Crystal Ball: The Ultimate Web Design Trends 2015
Opposites Attract: Tips for Designing a Clean Yet Colorful Website![Cartoon: If Web Designers Were Butchers… [008]](http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2015%2F03%2Fteaser_noupe_butcher.png&w=250&h=200&zc=1&q=75 "Cartoon: If Web Designers Were Butchers… [008]")
![Cartoon: If Web Designers Were Prostitutes [004]](http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2015%2F01%2Fcartoon-series-standardimage_noupe.png&w=250&h=200&zc=1&q=75 "Cartoon: If Web Designers Were Prostitutes [004]")
![Cartoon: If Web Designers Were Pizza Boys [005]](http://www.noupe.com/wp-content/plugins/contextual-related-posts/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2015%2F02%2Fcartoonteaser_noupe.png&w=250&h=200&zc=1&q=75 "Cartoon: If Web Designers Were Pizza Boys [005]")
Valle Encantado Farmers logo” />
