When it comes to ecommerce, email marketing is one of the most powerful tools to increase conversions, meaning more sales and more subscriptions. Today we’ll go over an insightful infographic found here that has a few important points which may be hard to understand at first glance, and a couple of points I find contention with. Be sure to read the breakdown below the infographic! The infographic was originally posted on soundest.com. Let’s break it down Insight #1: Bigger businesses generate more orders (but have lower open rates?) Smaller businesses (5,000 member lists) enjoy an average open rate of 21.38%…
Data visualization has become an important part of our everyday life, allowing us to quickly assess information. And with so many chart types out there to choose from, it should be possible to effectively solve almost any task, whether it’s exploratory (i.e. researching and analyzing data to better understand it for yourself) or explanatory (i.e. reporting and communicating data to end users).
However, variety can also cause confusion, making it difficult to clearly understand the purpose of each form of data visualization.
The command line is increasingly becoming a part of every web developer’s workflow. With tools like Grunt, Gulp and Bower leveraging the increase in productivity that comes with working in the command line, we are seeing it become a much more friendly and comfortable place for beginners and experts alike.
This article provides insight into some of the best tools to use in your day-to-day workflow in the command line and gets you started with a totally customized setup. Also, please make sure to check out my series on how to become a command-line power user1, available for free, of course.
Getting The Right Terminal
Before we can start using ZSH, Z and related tools, getting the right terminal application up and running would be extremely helpful. The default Terminal and Powershell applications on OS X and Windows leave much to be desired.
For OS X users, iTerm 22 is recommended as a replacement for OS X’s default Terminal. iTerm 2 introduces some features that are missing in the regular terminal, including commands you would regularly use in your text editor. This includes pane splitting, custom color schemes, paste history, fine-grained control over hotkeys, together with dozens3 of other handy preferences that you will find useful as you become more comfortable in the terminal.
On Windows we have the built-in PowerShell. Most users find this quite different to the interface of the typical UNIX servers used to host websites; it’s also rarely addressed in online tutorials. For this reason, it’s recommended to use an emulator that provides a closer experience to a real UNIX command line, like Linux and OS X do.
You have a couple of options here. The easiest would be to install Cmdr4, which provides Git integration, custom prompt and color schemes out of the box. For most, this will be more than enough to get started with all major web development tooling. It cannot, however, do any of the ZSH and Z that we will be exploring below.
For a full-blown UNIX emulation, there is Cygwin5 which allows us to run all UNIX commands as well as to work with Oh-My-ZSH. It’s not for the faint of heart, but if you are fairly comfortable with Windows, it might be worth trying out. Alternatively there is the all-in-one OH MY CYGWIN6, which might speed up your installation process.
Use ZSH and Oh-My-ZSH
When you start a terminal application, whether it be on your server or your local computer, it is running a shell called Bash. Bash is by far the most popular shell and comes with pretty much every UNIX-based operating system. There are, however, alternatives to Bash that make using the terminal faster and more comfortable for web developers.
One of the most popular shells with web developers is the Z shell, or ZSH. Along with that, we use a ZSH framework named Oh-My-ZSH7.
Installing Oh-My-ZSH is very simple. Simply run the following command and restart your terminal:
curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh
Now, each time you start a terminal session, you will be using ZSH rather than the default Bash!
Before jumping into the next few sections, we need to know about ZSH settings. These are stored in a .zshrc file located in your home directory. It’s a hidden file, so you might not see it in your home directory, but you can view it by running open ~/.zshrc from the terminal. Swap out open with your favorite editor command, such as nano, subl or vim.
Now, we aren’t making any changes to this file just yet, but leave it open. Whenever you make a change to this file, you need to source it in order for the changes to take effect in your terminal. To do this, you can either close the current tab and open a new one or run the source ~/.zshrc command from the terminal.
Customizing what your terminal looks like is one of the best things you can do. Not only does it make you look like a bad-ass coder, but it can greatly improve readability via different colors. It can also improve productivity by displaying important information related to file path, Git status and more!
Prompts are the line(s) of text shown when you are about to type something into the terminal. Your prompt provides useful information related to your project, such as the current version of Ruby, Node.js and so on, the current status of your Git repository, the outcome of the last run task, as well as the current working directory.
You can customize your path into oblivion, but chances are that someone has created a prompt that already suits your needs.
Your ZSH theme is set in the few lines of your .zshrc file. Look for something like ZSH_THEME="robbyrussel" — this is the default theme that comes with ZSH. I recommend setting this to ZSH_THEME="random", which will randomly assign a theme each time you open a new terminal tab or run source ~/.zshrc. Run this a few times until you find one you like; you can find the current theme name by running echo $ZSH_THEME.
You can browse all the ZSH themes and prompts in the wiki10. Because there are hundreds of themes, not all of them come with ZSH by default. Any you want will need to be downloaded and placed in ~/.oh-my-zsh/themes; Because this is a hidden directory, you can access it by running open ~/.oh-my-zsh/themes.
Here are a few popular themes:
Note: Many of these themes require a patched font to display the arrows and Git icons. You can download the fonts on GitHub20; then, make sure to set them in your iTerm2 settings.
Now, the prompts define the standard color to be used, but we’ll use iTerm2 themes to customize what those colors actually look like. By default, the themes come with your basic red, green, yellow and blue, but we can tweak those to be the exact variants that we want.
You can edit the colors or even make your own theme in “Preferences” → “Profiles” → “Colors,” or grab one of the existing themes already out there.
So, now that our terminal is looking great, what can we actually do with ZSH and related tools? Probably one of the most useful features of ZSH is that it enables us to list and tab through files and folders. If you have ever tried to perfectly spell the name of a file, struggled with the case or fought with an impossibly long list of folders with spaces in it, you know the pain and limitations of Bash.
Folder and file tabbing works with any terminal command: cd, trash, cp, open, subl, etc. But for the purposes of this tutorial, let’s use cd for folders and open for files.
Go ahead and type cd (note the space after cd), and hit the “Tab” key twice. You can now use your arrow keys to move over, up and down through the files and folders. To select a folder, hit “Return.” You can now hit “Tab” and “Tab” again to discover subdirectories or hit “Return” to run the command.
This also works for completing file and folder names. Let’s say I’ve got two folders, css/ and /Capitalize. If I type cd c and then hit “Tab” twice, I’ll be able to cycle through all of the folders that start with C. You’ll noticed it’s case-insensitive. This is extremely helpful when you have many files with similar names.
Finally, this also works with command names whose names you might not totally remember. For example, if you’re working with MongoDB, 13 commands are associated with it: mongod, mongodump, mongoexport, mongofiles mongoimport and so on
By typing mong and hitting “Tab,” you’ll see all available commands that start with mong.
ZSH allows you to extend built-in functionality by adding plugins, and it actually ships with a bunch of fantastic ones. To enable a plugin, open your .zshrc file and scroll down until you see the spot where active plugins are defined. To add a new one, just type the name between the parentheses, making sure to include a space between each name.
Z isn’t part of Oh-My-ZSH, but it’s the perfect companion for anyone who heavily uses the command line. The idea behind Z is that it builds a list of your most frequent and recent — “Frecent” — folders and allows you to jump to them quickly in one command, rather than having to tab through a nested folder structure.
To install it, make sure Z is included in the plugins list from above. While this works for most, some users have trouble getting this to work. If that is the case, download download Z30 and put it in your home directory so that it’s located at ~/z.sh. Then, in your .zshrc file, include the following and then source your .zshrc file again.
# include Z, yo
Once it is installed, continue with your regular traversing of directories with your cd command. Z is watching where you frequently and recently have been, and is building a weighted list of directories.
After a few hours of moving around, you can use the z command followed by a word that is in your directory. It uses fuzzy matching to figure out what folder you are trying to get to, and it’s almost always right!
z styles might bring you to ~/Dropbox/projects/0202-coffee-shop/styles.
z pizza might bring you to ~/Dropbox/projects/0300-pizza/.
z pizza styles might bring you to ~/Dropbox/projects/0300-pizza/styles.
z 303 might bring you to ~/Dropbox/projects/0303/candy-store/.
For a full list of advanced Z commands, visit the GitHub repository31, or watch the Command Line Power User video on Z.
More, More, More!
As developers, we know how important it is to sharpen our tools and continually add new ones to our workflow. The command line is one of the best tools you can master as a developer. With this article, we are just scratching the surface of what we can do with the command line. Check out Command Line Power User32 for all 11 free videos about getting comfortable with the command line.
There are only a handful of fundamental patterns that create all of the natural diversity around us. Nature’s patterns perform three basic tasks that get the work of the universe done by moving, storing and connecting energy.
Nature communicates within an interconnected and intricate system of checks and balances to weave patterns and processes together for perfect and purposeful outcomes. Nature is the ultimate economist when it comes to creating so much from so little. Everything gets used in this supremely elegant system. Nothing is wasted. And all of it happens in the moment. We covered Symbols, Metaphors And The Power Of Intuition1 in the first post of the series last week; this week let’s take a closer look into nature’s patterns.
“Man invented things by imposing a shape on nature. Man discovered things by revealing the pattern of nature.”
– Alan Fletcher
The essential property of a pattern is repetition. Because they are continuous, they read like a story. Human beings learned the language of nature to survive. The periodic migration of herds, the transit of constellations across the sky and the distinct features of different terrains are all examples of patterns that create expectations upon which we depend. Designers use patterns based on nature because they are reliable. Biomimicry is relevant not just to product and industrial designers. Bio-inspired graphics yield more communicative power to a logo by relating it to a pattern that all human beings inherently know.
This three-part series explores fundamental creative strategies for designing effective logos. The first part5 showed how to use symbols, metaphors and the power of intuition. The second part shows how to use nature’s patterns in logo design.
The Relationship Between Natural Patterns And Design
Natural patterns establish relationships between dynamically opposed, seemingly unrelated or invisible forces — everything that compels good communication. A designer’s understanding of this can be carried into the planning of a logo’s “genetic material” to integrate universal relationships, giving the logo a wider reach. Intuitive sensing is free of cultural associations and the encumbrances of language because it uses imprints far older than civilization. It is a direct route to establishing a connection with your audience.
Awareness of how patterns work in nature helps a designer choose the most appropriate visual elements to describe a client’s unique qualities while simultaneously using easily understood, universal concepts. When the audience’s initial glance is bridged with relevant visual information, a profound opportunity to get into the details of the communication is established.
Essential natural patterns combine in ways that are stable and efficient enough to be practical within the limits of three-dimensional space. These basic patterns underlie processes that are pervasive from micro- to macro-scales throughout the universe. As movement is the fundamental principle of life, we’ll begin there.
Patterns Of Movement: Branching And Meanders
Patterns of movement transfer energy from one place to another and occur in a variety of circumstances. The linear patterns of tree branches and roots, rushing rivers, blood veins and neural circuitry, streams meandering through pastures, and brain and intestinal convolutions are all examples of energetic transference.
The branching pattern transfers energy from leaf to plant in the same focused manner it moves impulses through our nervous system, while the lackadaisical meander distributes energy over a broad area in an easy roll-and-turn motion, much like brain or intestinal convolutions.
The purpose of the branching and meandering patterns are implied by their forms: A point of origin is connected to its destination point in a line. Our bodily fluids carry air, water and nutrients through an intricate system of tubes from the outside in and the inside out; sunlight is converted into energy in a plant’s leaves and transported throughout its branches, stems, trunks and roots; waterways meander and branch into the contours of the earth to provide nutrients and water to plants and animals; and lightning transforms carbon and nitrogen into compounds that plants can assimilate from soil.
The two basic patterns of movement have specific differences but are equally efficient for the tasks they perform. Branching patterns are direct, angular and no-nonsense, while meanders roll and relax into their destination. There’s a reason for that — nature always has a good reason — branching is concerned with the task of getting energy urgently from one place to another, while meanders distribute energy in curves that slowly and evenly wind their way to an eventual destination with greater coverage (a clue as to when to use angles and when to use curves as dominant shapes for different clients).
The Branching Pattern in a Logo
The logo for ISTEC (Ibero-American Science and Technology Education Consortium…sometimes acronyms are essential for certain clients!) has multiple cultural and technological references that provide information instantly about the organization. ISTEC is a non-profit that procures technology software, hardware and training from large tech companies in the United States and delivers them to universities in Central and South America, as well as Spain and Portugal. The corporations that provide the tech services have access to the best students graduating from these programs, providing a back-and-forth exchange.
The underlying template of the branching pattern intuitively suggests movement to describe the process of exchange, an appropriate metaphor for a tech-transfer business that moves the energy of current (or urgent) technology from one place to another. The overall square shape of the logo further substantiates the client as stable and reliable, an important consideration when representing new technologies and establishing cross-cultural relationships. (More on shapes in part 3, “How Geometry Influences Logo Design.”)
The conceptual process for this logo shows specific references to the client in both cultural and technological terms, and the design is further supported by integrating the branching pattern to address its purpose of tech transfer.
The Meander Pattern in a Logo
The meander transfers energy just as a branching pattern does, but with a significant difference: it displays no real urgency and has a certain amount of fluidity and freedom. Duffy+Partners created an identity to brand the Islands of the Bahamas with distinctly atypical and vibrant characteristics of form and color. A meander isn’t a typical pattern to use in logo design because it is so loosely organized, but in this case — as a descriptor of travel, fun and spontaneous island-hopping — it works perfectly.
The designer’s process shows the conceptual development of blending the island chain with the bright flora typical of a Caribbean destination as appropriate visual cues for this logo.
At first glance, the logo doesn’t look like a meander, but think a little deeper, as in below the surface. Island chains are connected below the ocean’s surface (maps were also referenced by the designer in the conceptual roughs). The bright colors, random shapes and underlying meander pattern all fit and support the idea of a relaxing, fun-filled tropical vacation.
Stacking And Packing Patterns: The Hexagon And Other Tessellating Shapes
The stacking and packing pattern accomplishes two primary objectives in nature: it stores and stabilizes energy for later use. Drying mud, bubbles and cracking cement all tend to break at approximately 120° angles. There’s a reason for that. Nature is primarily composed of spherical atoms, molecules, germs, viruses and cells, which achieve the tightest fit when packed with their own kind — a hexagon made up of approximate 120° angles.
Spherical objects make up the bulk of physical space and have the tightest fit in a six-around-one configuration. The hexagonal pattern results when the objects are compressed by heat, gravity and pressure in physical space. This perfect-fit pattern, called a tessellation, has neither empty space nor redundant overlaps, just like pieces of a puzzle. Because of its perfect fit, it is the most efficient and stable mode of energy storage. Only two other shapes can achieve a periodic, or regular, tessellation: four-sided and triangular figures.
Classic examples of the stacking and packing pattern: Breaks in a cement sidewalk at approximately 120° angles from the molecular scale up display a self-similar pattern. The beehive is perfectly formed for extraordinary strength and economy of space — a shape also adopted by architect Buckminster Fuller for the ultra-energy-efficient geodesic dome.
Stacking And Packing Patterns In A Logo
Stacking and packing patterns are a perfect fit for businesses that want to communicate security or storage. Angled shapes in general are included in this group (the triangle, rectangle and square are discussed further in part 3 of this series). An angled shape sits squarely on its bottom, and the corners provide exact points of measurement. This suggests reliability and precision, which, in turn, imply transparency and honesty. When something can be accurately measured it is said to be “true” or “trued up.”
Angled shapes are favored by banks and other organizations in the financial industry for this reason, as well as contractors and others who want to imply those qualities in physical space. (Keep in mind that today’s technology allows decimal points to be manipulated at will: Reinforcing the idea of security is very important — most particularly with digital currency.)
The logos of HSBC, Chase Manhattan, the NYSE and many other financial players use angular templates in their design to reinforce their message of security and stability.
Connection And Regeneration Patterns: The Helix And Spiral
The helix and spiral have similar shapes but different purposes, much like the meander and branching patterns. A helix’s diameter never expands or contracts but remains a constant distance from its center, enabling it to penetrate substantial structures or stand up to formidable forces. The spiral, on the other hand, follows an ever-expanding path in a geometric progression of self-similar curves. As you may have guessed, each has specific — but related — purposes.
The Helix Pattern
The helix is a concentrated form of energy designed for a serious and intentional purpose. In nature, the singular helix is the underlying pattern of the concentrated power of funnel clouds and waterspouts. We apply this principle to tool design to create the drill, which penetrates strong structures so they can be bound together for longevity, or a corkscrew that grips and extracts a plug from an ultra-tight fit. When paired, the back and forth twisting motion of two helices weave a complementary relationship that bring together and balance opposites. The double helix pattern points to the immense power necessary to funnel the genetic blueprints of DNA into a new generation.
The Helix in a Logo
The helix communicates information about cooperation between opposites, intense strength at minute sizes and longevity that spans generations. It was the template pattern I chose to describe an acupuncture clinic. When you understand how patterns work you can validate your initial intuitive choice as the right one. Intuition is the genius of our senses and helps us to make choices that are inherently correct. (See the first part of this series, “Symbols, Metaphors and the Power of Intuition.”) Understanding this information also helps sell your idea to the client because the logo has been “trued up” to the story it needs to tell — and it’s easy to explain.
Several years ago I created this logo for an alternative healthcare clinic with a concentration in Chinese medicine. The founders were already traditional Western medicine caregivers and expanded their services as licensed acupuncturists. I used a caduceus to incorporate both traditional Western medicine and the “qi” (chi) — or the balancing of energy in Eastern medicine. This was one of those logos that didn’t need a lot of conceptual thought. The solution presented itself in my first sketch (a reminder to collaborate with your intuition to get “inside” access to workable ideas). The hybrid caduceus-chi logo addresses the two healthcare modalities, and the underlying pattern of the helix alludes to the (literally) penetrating nature of acupuncture to achieve effective results by stimulating the energetic meridians of the body.
The Spiral Pattern
The spiral is a pattern of creativity and regeneration with the purpose of connecting energies together. This is geometrically described in the construction of the logarithmic spiral, or a spiral that grows geometrically at a progressive rate. The connecting circles that create a phi spiral demonstrate this fact in form.
A phi spiral is constructed when a series of ever larger and geometrically progressive circles are connected at their points of intersection. This particular construction is based on the Fibonacci sequence.
The progressing spiral is a pattern of growth in nature, and it is the only pattern that is also a shape (see more about the spiral in part 3, “How Geometry Influences Logo Design”). This pattern expresses new life as it unfurls into the world. It is common in developing embryos and sprouting seeds.
The Spiral in a Logo
A helix and spiral were both included in the logo design for Valle Encantado, a small farming group that grows food for their communities. The helical tendril curling up the handle of the spade defines the handle and represents the intense work of digging and growing, while the logarithmically progressing spiral points to the creativity of producing food to support the community. Other graphical elements are used in the design to more specifically address the client (see part 1, “Symbols, Metaphors and the Power of Intuition,”27 for more about them).
Patterns exercise #1: Walk the nature talk
Get your sketchbook and pencils and go on a walk.
Focus only on natural forms (not buildings, sidewalks or anything else manmade) Try to identify each of the five basic patterns discussed in the article: branching, meander, stacking and packing shapes, and the spiral and weaving (helix) patterns. As you find them, sketch them and identify what pattern you think is dominant in the forms you are observing, as nature typically weaves several pattern processes together.
Look a little deeper What does their form tell you about the kind of work they do (moving, storing, connecting)? Can you identify what the pattern is doing in the context of how it is used?
Patterns work together Can you find more than one pattern working together? How do they interact or support one another?
Patterns exercise #2: Expressing pattern as design
To be an effective logo designer, you must learn to identify and extract valuable information. This pattern exercise is designed to give you a true working context of observation, interaction, refinement, extraction, elimination and reordering, while using critical thinking skills in all stages of the process. Choose any form from nature that intrigues you (animal, plant, mineral, any of the elements), and use this exercise as an opportunity to learn more about it in an immersive experience.
Create a realistic drawing Draw your subject as accurately as you can with your choice of media (pencil, colored pencils, pen, etc.). If the subject is too detailed and you find it overwhelming to draw the entire object, pick a part of it and focus on that.
Explore your subject in three dimensions Take an aspect of your subject (or the whole subject, if you care to), and create a three-dimensional representation of it. You can do this with paper folding, craft materials or natural materials. Observe the primary movements or shapes of patterns to help define a three-dimensional representation that accurately conveys the pattern. Origami is not difficult to do, and you can find all sorts of instructional videos on the Internet of how to create different folded forms.
Create a detail Find an aspect of the object to detail. This could be an edge, a shape or the overall pattern refined as a simplified detail. (Note: You might want to research micrographs of your subject as well. Seeing it at different scales or dimensions will give important clues to help identify the dominant pattern.)
Stylize the form From the previous parts of the exercises, identify the dominant pattern you are working with and stylize it as black-and-white vector illustration, created in Illustrator as a repeating form.
The process of distilling general information into specific communication provides value for your audience. When you develop your awareness of the universal meanings of the basic patterns of nature, you can effectively integrate them as simple strategies for good logo design.
Integrating patterns appropriately reinforces the message at every level — beginning with the first glance, which queues the audience’s intuition and interest. Combined with effective symbolism and metaphors, pattern templates bring more communicative depth to your logo. Another sound design strategy is the use of basic geometric configurations in logo design, coming up next in part 3, “How Geometry Influences Logo Design.”
Every element on a web page exerts a visual force that attracts the eye of the viewer. The greater the force, the more the eye is attracted. These forces also appear to act on other elements, imparting a visual direction to their potential movement and suggesting where you should look next.
We refer to this force as visual weight and to the perceived direction of visual forces as visual direction.
With the MLB World Series fever in full swing, it’s a good time for online sports marketers to tap into the craze and increase online sales and bookings.
The top 5 MLB teams make for a collective valuation of $8.2 billion with the New York Yankees right at the top with a massive $2.5 billion valuation. If you look at the annual spend of Americans on sports each year, the number touches an eye-popping $25 billion. Even the number of baseball tickets sold each year in the US is just a quarter shy of a billion.
Yet, most sports websites have a conversion rate of 1%. That means, for every 1,000 visitors coming to the website, only 10 end up buying. That’s some massive waste of the traffic! In this infographic, we share the secret sauce of successful marketers and what you can do to increase your online sales and bookings.
It’s our great pleasure to support active members of the Web design and development community. Today, we’re proud to present FlowType.JS that allows a perfect character count per line at any screen width. This article is yet another special of our series of various tools, libraries and techniques that we’ve published here on Smashing Magazine: LiveStyle, PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin, CSSComb and Jelly Navigation Menu. — Ed.
Welcome to another interview in the series called “How I Work.” These interviews revolve around how leading thinkers and creators in the Web world design, code and create. The goal is not to get into the specific nuances of their craft (as that information already exists online), but rather step back and learn a bit about their habits, philosophies and workflow for producing great work.
You’ve made your first app! Now what?
Anyone in the app business knows that marketing an app is tough. And according to a recent article on TechCrunch, “Getting a mobile app noticed in the increasingly crowded mobile app market is more difficult than ever.” Some titles and concepts are truly unique. Angry Birds?
Further Reading on SmashingMag: How To Launch Anything Key Ingredients To Make Your App Go Viral So You Want To Crowdfund Your Startup App?
This special is the first in our series of Smashing Specials — extended articles and studies dedicated to a specific topic. The special features current WordPress theme trends for 2012, covering past trends, new developments in theme design and trends in the theme development.
2011 was a great year for WordPress, with some excellent new updates that saw the introduction of a drag-and-drop uploader, distraction-free writing, the HTML5 Twenty Eleven theme, and movement towards a fully responsive dashboard.