Tag Archives: series


Using Low Vision As My Tool To Help Me Teach WordPress

Using Low Vision As My Tool To Help Me Teach WordPress

Bud Kraus

When I say that I see things in a different way, I’m not kidding. It’s literally true.

For almost 30 years, I’ve lived my life with macular degeneration, a destruction of my central vision. It is the leading cause of legal blindness in the United States and I’m one of those statistics.

Macular degeneration is a malady of old age. I see the world much as a very old person does. You could say that I am “hard of seeing.”

Since my condition is present in both eyes, there is no escape. Facial recognition, driving (looking forward to driverless cars), reading, and watching movies or TV are difficult or impossible tasks for me.

Since my peripheral vision is intact, I have no problem moving about without bumping into things. In fact, if you met me you would not immediately know that I have a serious vision impairment.

Sharing this is not easy. It’s not just that I don’t want to be branded as that blind WordPress guy or to have people feel sorry for me. I don’t like to discuss it because I find it is as interesting as discussing my right-handedness. Besides, I’m hardly the only person who has a disability or illness. Many people have conditions which are far worse than mine.

I have discovered that for most people technology makes things easier. For others, like me, it makes things possible.

I focus on what I can do, not what I can’t do. Then I figure out a way to do it better than anyone else. I use what I have learned from my disability as a tool to help me communicate.

Everyone works with WordPress differently. Me, even more so. Here are some of the adjustments I’ve made as a WordPress instructor and site developer.

1. How I Do It: Zoom/Talk/Touch

Let me show you how I really work with WordPress as I zoom in and out and let the machine talk to me.

What you don’t see here is how I use space and touch to know where objects are on a screen. It’s easy to understand this for mobile devices, but the same is true — especially for me — when it comes to knowing how far I need to move the mouse to do something. When a major change takes place on a site or in the WP Admin, it takes me time to re-orient myself to a new UI.

My visual impairment has improved my sense of touch for everything including finding and interacting with screen objects.

2. I’m Prepared

I can’t wing it. When I teach in class or do a presentation I need to know exactly what I’m going to say because I can’t read notes about what I will demonstrate. I need to have order.

The same holds true for working with clients or doing live webinars. Everything I do is structured.

I think of stories that have a beginning, middle, and end. When I teach or speak in public, I take you on a journey. I know where I will start, where I will finish, and how I got there.

Being a prep freak has made me better at everything I do.

3. I Recognize Patterns

Since I can recognize consistent shapes, I learned how to teach and use HTML and CSS. But a deep understanding of languages like Javascript and PHP are just out of my range because they are free-form and unpredictable.

Take HTML. Its hallmark is that it is a symmetrical, containerized markup system. Open tags usually need to be closed. The pattern is simple and easy for me to recognize:

<tag>Some Text Here</tag>

CSS is much the same. Its very predictable pattern make it possible for me to teach and use it. For example:



Think of it this way. I can read most fonts on a screen given proper illumination and magnification. Handwriting — which is so unpredictable — is impossible to read.

My abilities give me just enough skill to create WordPress child themes.

Since vision and memory are so closely connected, you could say I have a memory disability more than any other. Pattern recognition — an aid to memory — makes it possible to work with things like code.

4. A Little Help From My Friends

If I need it, I get assistance. If a class size is large enough, I’ll get someone to sit with a student who needs attention. If I do a presentation with a laptop — something I have a hard time with — I’ll have someone work the laptop. When I need someone to spell check and work over my words, I have a friend that does that too.

5. WordPress — More Than Alt Tags

You’d think that, given my disability, I’d be an expert on accessible web design. I’m not. However, 16 years ago when user agents and assistive technologies were more hope than reality, I taught classes at Pratt Institute in New York City on design which worked for the greatest number of people on the greatest number of devices.

Sound familiar?

To be sure, WordPress has a lot of built-in accessibility awareness, either in its core or because of its enlightened plugin and theme developers. It has an active group, Make WordPress Accessible, that ensures WordPress is compliant with the WCAG 2.0 standards.

While I stress the use of the Alt attribute (it’s misunderstood as an SEO signal), I rarely discuss features such as keyboard shortcuts and tabindex. Though I’m a stakeholder in ensuring that the WordPress admin is accessible, no one would mistake me for an expert in recognizing and knocking down all barriers to access in web design.

And What About Gutenberg?

WordPress will be rolling out its new content editor, Gutenberg, in 2018 replacing its well known but aging WP editor. It features a block editing system akin to what SquareSpace, WIX, and MailChimp use.

Gutenberg has a cleaner, sleeker user interface. Many of the user options are hidden and appear only after certain mouse over actions occur. This doesn’t seem to be much of an issue for me. What is distracting is that in certain instances the Gutenberg interface will cover up parts of the page copy.

A bigger issue is how keyboard shortcuts will work. Beyond the needs of disability communities, many power users prefer shortcuts. Currently, many but not all of Gutenberg’s functions are available as a shortcut. Equally troublesome, there are no indications of shortcuts in the menus or as tooltips. Nor is there any way to easily see all shortcuts in a single list.

7. Look Ma’, No Script! Creating Videos For My Online WordPress Course

I need to memorize just about everything. While creating my training course, “The WP A To Z Series,” I could not use a script for my screen capture videos. When creating videos I have to know the material cold. I try to make you wonder if I’m reading when I’m not. The result are videos that have a personal feeling to them which is what I wanted (and the only thing I could do).

8. I Never Use More Than I Need

If I need help — be it with tech or with a human — I ask for it. If I don’t need it, I don’t ask. I get and use as much help (human and tech) as I need and never more.

Since I don’t need JAWS, a popular screen reading program, I don’t know JAWS. I don’t need speech to text software, so I don’t use Dragon Dictate.

And that is the point.

People with — or without — disabilities work with tech in ways that will help them accomplish tasks in the most efficient matter. If something is overkill, why use it?

My Way Is Probably A Lot Like Your Way — Or Is It?

Turns out, I use WordPress a lot like everyone without a disability uses it. At least I think so. Sure, I have to zoom in to see things and I don’t care for radical changes in design. But, once I understand a UI, finding or manipulating things after a redesign is similar to the challenge a blind person faces in a room where the furniture has been moved or replaced.

As you saw in my video, I need text to speech software to make it easier to understand what is on the screen. And zooming in and out is as common to me as a click is to everyone. All this takes a little more time but it’s how I get things done.

As you may have surmised — and what I can’t stress enough — is that a disability is a very personal thing in more ways than one. The things I do in order to teach and work with WordPress are probably very different from what another person does who also has macular degeneration. It’s the idiosyncrasies that make understanding and working with any disability very challenging for everyone.

Smashing Editorial
(mc, ra, yk, il)


Using Low Vision As My Tool To Help Me Teach WordPress

Becoming A UX Leader

Becoming A UX Leader

Christopher Murphy

(This is a sponsored article.) In my previous article on Building UX Teams, I explored the rapidly growing need for UX teams as a result of the emergence of design as a wider business driver. As teams grow, so too does a need for leaders to nurture and guide them.

In my final article in this series on user experience design, I’ll explore the different characteristics of an effective UX leader, and provide some practical advice about growing into a leadership role.

I’ve worked in many organizations — both large and small, and in both the private and public sectors — and, from experience, leadership is a rare quality that is far from commonplace. Truly inspiring leaders are few and far between; if you’re fortunate to work with one, make every effort to learn from them.

Managers that have risen up the ranks don’t automatically become great leaders, and perhaps one of the biggest lessons I’ve learned is that truly inspirational leaders — those that inspire passion and commitment — aren’t as commonplace as you’d think.

A UX leader is truly a hybrid, perhaps more so than in many other — more traditional — businesses. A UX leader needs to encompass a wide range of skills:

  • Establishing, driving and articulating a vision;
  • Communicating across different teams, including design, research, writing, engineering, and business (no small undertaking!);
  • Acting as a champion for user-focused design;
  • Mapping design decisions to key performance indicators (KPIs), and vice-versa, so that success can be measured; and
  • Managing a team, ensuring all the team’s members are challenged and motivated.

UX leadership is not unlike being bi-lingual — or, more accurately, multi-lingual — and it’s a skill that requires dexterity so that nothing gets lost in translation.

This hybrid skill set can seem daunting, but — like anything — the attributes of leadership can be learned and developed. In my final article in this series of ten, I’ll explore what defines a leader and focus on the qualities and attributes needed to step up to this important role.

Undertaking A Skills Audit

Every leader is different, and every leader will be informed by the different experiences they have accumulated to date. There are, however, certain qualities and attributes that leaders tend to share in common.

Great leaders demonstrate self-awareness. They tend to have the maturity to have looked themselves in the mirror and identified aspects of their character that they may need to develop if they are to grow as leaders.

Having identified their strengths and weaknesses and pinpointing areas for improvement, they will have an idea of what they know and — equally important — what they don’t know. As Donald Rumsfeld famously put it:

“There are known knowns: there are things we know we know. We also know there are known unknowns: That is to say, we know there are some things we do not know. But there are also unknown unknowns: the things we don’t know we don’t know.”

Rumsfeld might have been talking about unknown unknowns in a conflict scenario, but his insight applies equally to the world of leadership. To grow as a leader, it’s important to widen your knowledge so that it addresses both:

  • The Known Unknowns
    Skills you know that you don’t know, which you can identify through a self-critical skills audit; and
  • The Unknown Unknowns
    Skills you don’t know you don’t know, which you can identify through inviting your peers to review your strengths and weaknesses.

In short, a skills audit will equip you with a roadmap that you can use as a map to plot a path from where you are now to where you want to be.

a map that you can use to plot a path from where you are now to where you want to be

Undertaking a skills audit will enable you to develop a map that you can use to plot a path from where you are now to where you want to be. (Large preview)

To become an effective leader is to embark upon a journey, identifying the gaps in your knowledge and — step by step — addressing these gaps so that you’re prepared for the leadership role ahead.

Identifying The Gaps In Your Knowledge

One way to identify the gaps in your knowledge is to undertake an honest and self-reflective ‘skills audit’ while making an effort to both learn about yourself and learn about the environment you are working within.

To become a UX leader, it’s critical to develop this self-awareness, identifying the knowledge you need to acquire by undertaking both self-assessments and peer assessments. With your gaps in knowledge identified, it’s possible to build a learning pathway to address these gaps.

In the introduction, I touched on a brief list of skills that an effective and well-equipped leader needs to develop. That list is just the tip of a very large iceberg. At the very least, a hybrid UX leader needs to equip themselves by:

  • Developing an awareness of context, expanding beyond the realms of design to encompass a broader business context;
  • Understanding and building relationships with a cross-section of team members;
  • Identifying outcomes and goals, establishing KPIs that will help to deliver these successfully;
  • Managing budgets, both soft and hard; and
  • Planning and mapping time, often across a diversified team.

These are just a handful of skills that an effective UX leader needs to develop. If you’re anything like me, hardly any of this was taught at art school, so you’ll need to learn these skills yourself. This article will help to point you in the right direction. I’ve also provided a list of required reading for reference to ensure you’re well covered.

A 360º Assessment

A 360º degree leadership assessment is a form of feedback for leaders. Drawn from the world of business, but equally applicable to the world of user experience, it is an excellent way to measure your effectiveness and influence as a leader.

Unlike a top-down appraisal, where a leader or manager appraises an employee underneath them in the hierarchy, a 360º assessment involves inviting your colleagues — at your peer level — to appraise you, highlighting your strengths and weaknesses.

This isn’t easy — and can lead to some uncomfortable home truths — but it can prove a critical tool in helping you to identify the qualities you need to work on. You might, for example, consider yourself an excellent listener only to discover that your colleagues feel like this is something you need to work on.

This willingness to put yourself under the spotlight, identify your weaknesses, address these, and develop yourself is one of the defining characteristics of leaders. Great leaders are always learning and they aren’t afraid to admit that fact.

A 360º assessment is a great way to uncover your ‘unknown unknowns’, i.e. the gaps in your knowledge that you aren’t aware of. With these discoveries in hand, it’s possible to build ‘a learning road-map’ that will allow you to develop the skills you need.

Build A Roadmap

With the gaps in your knowledge identified, it’s important to adopt some strategies to address these gaps. Great leaders understand that learning is a lifelong process and to transition into a leadership role will require — inevitably — the acquisition of new skills.

To develop as a leader, it’s important to address your knowledge gaps in a considered and systematic manner. By working back from your skills audit, identify what you need to work on and build a learning programme accordingly.

This will inevitably involve developing an understanding of different domains of knowledge, but that’s the leader’s path. The important thing is to take it step by step and, of course, to take that first step.

We are fortunate now to be working in an age in which we have an abundance of learning materials at our fingertips. We no longer need to enroll in a course at a university to learn; we can put together our own bespoke learning programmes.

We now have so many tools we can use, from paid resources like Skillshare which offers “access to a learning platform for personalized, on-demand learning,” to free resources like FutureLearn which offers the ability to “learn new skills, pursue your interests and advance your career.”

In short, you have everything you need to enhance your career just a click away.

It’s Not Just You

Great leaders understand that it’s not about the effort of individuals, working alone. It’s about the effort of individuals — working collectively. Looking back through the history of innovation, we can see that most (if not all) of the greatest breakthroughs were driven by teams that were motivated by inspirational leaders.

Thomas Edison didn’t invent the lightbulb alone; he had an ‘invention factory’ housed in a series of research laboratories. Similarly, when we consider the development of contemporary graphical user interfaces (GUIs), these emerged from the teamwork of Xerox PARC. The iPod was similarly conceived.

Great leaders understand that it’s not about them as individuals, but it’s about the teams they put together, which they motivate and orchestrate. They have the humility to build and lead teams that deliver towards the greater good.

This — above all — is one of the defining characteristics of a great leader: they prioritize and celebrate the team’s success over and above their own success.

It’s All About Teamwork

Truly great leaders understand the importance that teams play in delivering outcomes and goals. One of the most important roles a leader needs to undertake is to act as a lynchpin that sits at the heart of a team, identifying new and existing team members, nurturing them, and building them into a team that works effectively together.

A forward-thinking leader won’t just focus on the present, but will proactively develop a vision and long-term goals for future success. To deliver upon this vision of future success will involve both identifying potential new team members, but — just as importantly — developing existing team members. This involves opening your eyes to the different aspects of the business environment you occupy, getting to know your team, and identifying team members’ strengths and weaknesses.

As a UX leader, an important role you’ll play is helping others by mentoring and coaching them, ensuring they are equipped with the skills they need to grow. Again, this is where a truly selfless leader will put others first, in the knowledge that the stronger the team, the stronger the outcomes will be.

As a UX leader, you’ll also act as a champion for design within the wider business context. You’ll act as a bridge — and occasionally, a buffer — between the interface of business requirements and design requirements. Your role will be to champion the power of design and sell its benefits, always singing your team’s praises and — occasionally — fighting on their behalf (often without their awareness).

The Art Of Delegation

It’s possible to build a great UX team from the inside by developing existing team members, and an effective leader will use delegation as an effective development tool to enhance their team members’ capabilities.

Delegation isn’t just passing off the tasks you don’t want to do, it’s about empowering the different individuals in a team. A true leader understands this and spends the time required to learn how to delegate effectively.

Delegation is about education and expanding others’ skill sets, and it’s a powerful tool when used correctly. Effective delegation is a skill, one that you’ll need to acquire to step up into a UX leadership role.

When delegating a task to a team member, it’s important to explain to them why you’re delegating the task. As a leader, your role is to provide clear guidance and this involves explaining why you’ve chosen a team member for a task and how they will be supported, developed and rewarded for taking the task on.

This latter point is critical: All too often managers who lack leadership skills use delegation as a means to offload tasks and responsibility, unaware of the power of delegation. This is poor delegation and it’s ineffective leadership, though I imagine, sadly, we have all experienced it! An effective leader understands and strives to delegate effectively by:

  • defining the task, establishing the outcomes and goals;
  • identifying the appropriate individual or team to take the task on;
  • assessing the team member(s) ability and ascertaining any training needs;
  • explaining their reasoning, clearly outlining why they chose the individual or team;
  • stating the required results;
  • agreeing on realistic deadlines; and
  • providing feedback on completion of the task.

When outlined like this, it becomes clear that effective delegation is more than simply passing on a task you’re unwilling to undertake. Instead, it’s a powerful tool that an effective UX leader uses to enable their team members to take ownership of opportunities, whilst growing their skills and experience.

Give Success And Accept Failure

A great leader is selfless: they give credit for any successes to the team; and accept the responsibility for any failures alone.

A true leader gives success to the team, ensuring that — when there’s a win — the team is celebrated for its success. A true leader takes pleasure in celebrating the team’s win. When it comes to failure, however, a true leader steps up and takes responsibility. A mark of a truly great leader is this selflessness.

As a leader, you set the direction and nurture the team, so it stands to reason that, if things go wrong — which they often do — you’re willing to shoulder the responsibility. This understanding — that you need to give success and accept failure — is what separates great leaders from mediocre managers.

Poor managers will seek to ‘deflect the blame,’ looking for anyone but themselves to apportion responsibility to. Inspiring leaders are aware that, at the end of the day, they are responsible for the decisions made and outcomes reached; when things go wrong they accept responsibility.

If you’re to truly inspire others and lead them to achieve great things, it’s important to remember this distinction between managers and leaders. By giving success and accepting failure, you’ll breed intense loyalty in your team.

Lead By Example

Great leaders understand the importance of leading by example, acting as a beacon for others. To truly inspire a team, it helps to connect yourself with that team, and not isolate yourself. Rolling up your sleeves and pitching in, especially when deadlines are pressing, is a great way to demonstrate that you haven’t lost touch with the ‘front line.’

A great leader understands that success is — always — a team effort and that a motivated team will deliver far more than the sum of its parts.

As I’ve noted in my previous articles: If you’re ever the smartest person in a room, find another room. An effective leader has the confidence to surround themselves with other, smarter people.

Leadership isn’t about individual status or being seen to be the most talented. It’s about teamwork and getting the most out of a well-oiled machine of individuals working effectively together.

Get Out Of Your Silo

To lead effectively, it’s important to get out of your silo and to see the world as others do. This means getting to know all of the team, throughout the organization and at every level.

Leaders that isolate themselves — in their often luxurious corner offices — are, in my experience, poor leaders (if, indeed, they can be called leaders at all!). By distancing themselves from the individuals that make up an organization they run the very real risk of losing touch.

To lead, get out of your silo and acquaint yourself with the totality of your team and, if you’re considering a move into leadership, make it your primary task to explore all the facets of the business.

The Pieces Of The Jigsaw

To lead effectively, you need to have an understanding of others and their different skills. In my last article, Building a UX Team, I wrote about the idea of ‘T-shaped’ people — those that have a depth of skill in their field, along with the willingness and ability to collaborate across disciplines. Great leaders tend to be T-shaped, flourishing by seeing things from others’ perspectives.

Every organization — no matter how large or small — is like an elaborate jigsaw that is made up of many different interlocking parts. An effective leader is informed by an understanding of this context, they will have made the effort to see all of the pieces of the jigsaw. As a UX leader, you’ll need to familiarize yourself with a wide range of different teams, including design, research, writing, engineering, and business.

To lead effectively, it’s important to push outside of your comfort zone and learn about these different specialisms. Do so and you will ensure that you can communicate to these different stakeholders. At the risk of mixing metaphors, you will be the glue that holds the jigsaw together.

Sweat The Details

As Charles and Ray Eames put it:

“The details aren’t the details, they make the product.”

Great leaders understand this: they set the bar high and they encourage and motivate the teams they lead to deliver on the details. To lead a team, it’s important to appreciate the need to strive for excellence. Great leaders aren’t happy to accept the status quo, especially if the status quo can be improved upon.

Of course, these qualities can be learned, but many of us — thankfully — have them, innately. Few (if any) of us are happy with second best and, in a field driven by a desire to create delightful and memorable user experiences, we appreciate the importance of details and their place in the grand scheme of things. This is a great foundation on which to build leadership skills.

To thrive as a leader, it’s important to share this focus on the details with others, ensuring they understand and appreciate the role that the details play in the whole. Act as a beacon of excellence: lead by example; never settle for second best; give success and accept failure… and your team will follow you.

In Closing

As user experience design matures as a discipline, and the number of different specializations multiplies, so too does the discipline’s need for leaders, to nurture and grow teams. As a relatively new field of expertise, the opportunities to develop as a UX leader are tremendous.

Leadership is a skill and — like any skill — it can be learned. As I’ve noted throughout this series of articles, one of the best places to learn is to look to other disciplines for guidance, widening the frame of reference. When we consider leadership, this is certainly true.

There is a great deal we can learn from the world of business, and websites like Harvard Business Review (HBR), McKinsey Quarterly, and Fast Company — amongst many, many others — offer us a wealth of insight.

There’s never been a more exciting time to work in User Experience design. UX has the potential to impact on so many facets of life, and the world is crying out for leaders to step up and lead the charge. I’d encourage anyone eager to learn and to grow to undertake a skills audit, take the first step, and embark on the journey into leadership. Leadership is a privilege, rich with rewards, and is something I’d strongly encourage exploring.

Suggested Reading

There are many great publications, offline and online, that will help you on your adventure. I’ve included a few below to start you on your journey.

  • The Harvard Business Review website is an excellent starting point and its guide, HBR’s 10 Must Reads on Leadership, provides an excellent overview on developing leadership qualities.
  • Peter Drucker’s writing on leadership is also well worth reading. Drucker has written many books, one I would strongly recommend is Managing Oneself. It’s a short (but very powerful) read, and I read it at least two or three times a year.
  • If you’re serious about enhancing your leadership credentials, Michael D. Watkins’s The First 90 Days: Proven Strategies for Getting Up to Speed Faster and Smarter, provides a comprehensive insight into transitioning into leadership roles.
  • Finally, HBR’s website — mentioned above — is definitely worth bookmarking. Its business-focused flavor offers designers a different perspective on leadership, which is well worth becoming acquainted with.

This article is part of the UX design series sponsored by Adobe. Adobe XD is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype, and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

Smashing Editorial
(ra, il)

Taken from:

Becoming A UX Leader

Infographic: Seven Salient (and Strange) Email Marketing Insights

ecommerce stats

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%…

The post Infographic: Seven Salient (and Strange) Email Marketing Insights appeared first on The Daily Egg.

Link to original – 

Infographic: Seven Salient (and Strange) Email Marketing Insights


Understanding Stacked Bar Charts: The Worst Or The Best?

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.

View original:

Understanding Stacked Bar Charts: The Worst Or The Best?


Become A Command-Line Power User With Oh-My-ZSH And Z

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!

ZSH Settings

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.

Terminal Customization

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.

(View large version9)

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:

Agnoster12 (View large version13)

Cobalt215 (View large version16)

Bira18 (View large version19)

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.

(View large version22)

Color Schemes

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 think of these colors as variables we can tweak. (View large version24)

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.

The ZSH Cobalt2 prompt also comes with an iTerm2 theme25, and you can find hundreds of them26 with a GitHub search; Bastien Dejean’s repository27 in particular houses a few interesting ones.

File Tabbing

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 Plugins

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.

plugins=(git cloudapp node npm bower brew osx extract z)

Once you’ve added a plugin, you’ll need to either run source ~/.zshrc or open a new tab.

Some recommended ones are:

  • git
    Enabled by default with Oh-My-Zsh, this enables Git aliases, tab completion and descriptions of all Git commands.
    git + tab
  • cloudapp
    Enables uploading of files to CloudaApp right from the command line.
    cloudapp Archive.zip
  • node
    Opens the Node.js API for your current version in your browser.
    node-docs http
  • npm
    Adds autocompletion to npm, displaying all npm commands.
    npm + tab
  • bower
    Adds autocompletion for Bower commands.
    bower + tab
  • brew
    Adds autocompletion and descriptions for all Brew commands.
    brew + tab
  • osx
    Enables a number of Finder commands28 that are accessible via the terminal.
  • extract
    Unzip all types of compressed files.
  • z
    More on this in the next section!

View the entire list of plugins on the Oh-My-ZSH wiki29.

Using Z To Jump To “Frecent” Folders

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
. ~/z.sh

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.



  1. 1 http://commandlinepoweruser.com/
  2. 2 https://www.iterm2.com/
  3. 3 https://www.iterm2.com/features.html
  4. 4 http://gooseberrycreative.com/cmder/
  5. 5 https://www.cygwin.com/
  6. 6 https://github.com/haithembelhaj/oh-my-cygwin
  7. 7 http://ohmyz.sh/
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2015/07/01-cobald2-opt.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2015/07/01-cobald2-opt.png
  10. 10 https://github.com/robbyrussell/oh-my-zsh/wiki/themes
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2015/07/02-agnoster-opt.png
  12. 12 https://github.com/robbyrussell/oh-my-zsh/wiki/themes#agnoster
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/07/02-agnoster-opt.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2015/07/03-cobalt2-opt.png
  15. 15 https://github.com/wesbos/Cobalt2-iterm
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2015/07/03-cobalt2-opt.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2015/07/04-bira-opt.png
  18. 18 https://github.com/robbyrussell/oh-my-zsh/wiki/themes#bira
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2015/07/04-bira-opt.png
  20. 20 https://github.com/powerline/fonts
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/07/05-bira-opt.png
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2015/07/05-bira-opt.png
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2015/07/06-schemes-opt.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2015/07/06-schemes-opt.png
  25. 25 https://github.com/wesbos/Cobalt2-iterm
  26. 26 https://github.com/search?q=iterm+extension%3Aitermcolors&ref=searchresults&type=Repositories&utf8=%E2%9C%93
  27. 27 https://github.com/baskerville/iTerm-2-Color-Themes
  28. 28 https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins#osx
  29. 29 https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins
  30. 30 https://github.com/rupa/z/blob/master/z.sh
  31. 31 https://github.com/rupa/z
  32. 32 http://CommandLinePowerUser.com

The post Become A Command-Line Power User With Oh-My-ZSH And Z appeared first on Smashing Magazine.

Link – 

Become A Command-Line Power User With Oh-My-ZSH And Z


Effective Logo Design, Part 2: Using Nature’s Patterns In Logo Design

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.

Handprints. (Image credit: elnavegante3) (View large version4)

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.

Branching pattern, the nervous system, and the lackadaisical meander6
Branching pattern, the nervous system, and the lackadaisical meander. (Image credit: AlterYourReality7, www.visuallanguage.com8, Xavier Marchant9) (View large version10)

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 process of the ISTEC logo11
The process of the ISTEC logo. (Design: Maggie Macnab) (View large version12)

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 Bahamas’ identity design by Duffy+Partners
The Bahamas’ identity design by Duffy+Partners.

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.

Process of the The Bahamas’ identity design13
Process of the The Bahamas’ identity design. (Image credit: Duffy+Partners14) (View large version15)

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.
Spherical objects make up the bulk of physical space and have the tightest fit in a six-around-one configuration.

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 and the beehive16
Classic examples of the stacking and packing pattern: Breaks in a cement sidewalk and the beehive. (Image credit: Amy Walters17, Dainis Derics18) (View large version19)

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 and the NYSE20
The logos of HSBC and the NYSE. (View large version21)

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.

Natural helices of the waterspout, an example of human design mimicking nature’s pattern, and an artist’s interpretation of DNA’s double helix22
Natural helices of the waterspout, an example of human design mimicking nature’s pattern, and an artist’s interpretation of DNA’s double helix. (Image credit: NOAA23, Matthew Gough24, Sebastian Kaulitzki25)

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.

The Oriental Medicine Clinic logo was almost fully formed upon conception
The Oriental Medicine Clinic logo was almost fully formed upon conception. (Design: Maggie Macnab)

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.

A phi spiral. (Animation: Aldo Vidrio)

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.

From unfurling ferns to a mouse embryo, life displays its process of becoming in the spiral of creative regeneration.
From unfurling ferns to a mouse embryo, life displays its process of becoming in the spiral of creative regeneration. (Image credit: Alkalyne26, Seth Ruffins)

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).

Valle Encantado logo
Valle Encantado logo. (Design: Maggie Macnab)


Patterns exercise #1: Walk the nature talk

Get your sketchbook and pencils and go on a walk.

  1. 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.
  2. 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?
  3. Patterns work together
    Can you find more than one pattern working together? How do they interact or support one another?
Artist and Design by Nature student Robert Barberena, with one of his pattern sketches at Casa de los Tres Mundos, Granada, Nicaragua, 2013.
Artist and Design by Nature student Robert Barberena, with one of his pattern sketches at Casa de los Tres Mundos, Granada, Nicaragua, 2013. (Image: Alejandro Vasquez)

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.

Design by Nature pattern exercise, Santa Fe University of Art and Design.28
Design by Nature pattern exercise, Santa Fe University of Art and Design. (Student: Jimena Valdez) (View large version29)

  1. 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.
  2. 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.
  3. 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.)
  4. 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.
Example of a simplified and stylized natural pattern created in Illustrator.30
Example of a simplified and stylized natural pattern created in Illustrator. (Image credit: JuRitt31) (View large version32)


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.”

(il, ml, al)


  1. 1 http://www.smashingmagazine.com/2015/06/05/effective-logo-design-symbols-metaphors-intuition/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-01-handprints-opt.jpg
  3. 3 http://www.shutterstock.com/g/phc
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-01-handprints-opt.jpg
  5. 5 http://www.smashingmagazine.com/2015/06/05/effective-logo-design-symbols-metaphors-intuition/
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-02-branching-meander-opt.jpg
  7. 7 https://secure.istockphoto.com/profile/alteryourreality
  8. 8 http://www.visuallanguage.com
  9. 9 http://www.shutterstock.com/g/xavier
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-02-branching-meander-opt.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-03-istec-process-opt.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-03-istec-process-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-05-Bahamas-process-opt.jpg
  14. 14 http://duffy.com/
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-05-Bahamas-process-opt.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-07-sidewalk-beehive-opt.jpg
  17. 17 http://www.shutterstock.com/g/pixelbrat
  18. 18 http://www.shutterstock.com/g/dreef
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-07-sidewalk-beehive-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-08-hsbc-nyse-logos-opt.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-08-hsbc-nyse-logos-opt.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-09-helix-opt.jpg
  23. 23 http://www.noaa.gov/
  24. 24 http://www.shutterstock.com/g/tonmeistermat
  25. 25 http://www.shutterstock.com/g/eraxion
  26. 26 https://secure.istockphoto.com/profile/alkalyne
  27. 27 http://www.smashingmagazine.com/2015/06/05/effective-logo-design-symbols-metaphors-intuition/
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-14-jimena-pattern-opt.jpg
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-14-jimena-pattern-opt.jpg
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-15-stylized-pattern-opt.jpg
  31. 31 http://www.shutterstock.com/g/JuRitt
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p2-15-stylized-pattern-opt.jpg

The post Effective Logo Design, Part 2: Using Nature’s Patterns In Logo Design appeared first on Smashing Magazine.


Effective Logo Design, Part 2: Using Nature’s Patterns In Logo Design

Design Principles: Visual Weight And Direction

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.


Design Principles: Visual Weight And Direction


(Infographic) How Sports Marketers Can Increase Online Sales

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.

Click to get the full image worldseries_infographic

Embed Code:

The post (Infographic) How Sports Marketers Can Increase Online Sales appeared first on VWO Blog.

Read More: 

(Infographic) How Sports Marketers Can Increase Online Sales

Introducing Responsive Web Typography With FlowType.JS

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.

Continue at source:  

Introducing Responsive Web Typography With FlowType.JS


How I Work: IDEO’s Duane Bray On Creating Great Digital Experiences

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 might want to have a look at the first interview as well, which features Doug Crockford, Yahoo’s JavaScript evangelist.

Original link:  

How I Work: IDEO’s Duane Bray On Creating Great Digital Experiences