Guitar Tips: Eight Things You Need to Know About Arpeggios

Woman Playing Guitar --- Image by © Rick Gomez/Corbis
Woman Playing Guitar — Image by © Rick Gomez/Corbis

As you advance in your guitar studies, you’ll surely come across the term “arpeggio.”

Arpeggios are a great way to add color and complexity to your playing. You can make riffs out of them, use them in solos or even create melody lines with their fluid sound.

Nearly all of the greats use arpeggios. Yet, if you’re like a lot of guitarists, you might be shying away from them because you fear being overwhelmed by the “Twin Ts”: theory and technique. If you have a basic understanding of how chords work, though, it’s high time to get your feet wet.

Here are eight things you need to know to help demystify the arpeggio.

01. What an arpeggio is exactly The word arpeggio (ar-peh-jee-oh) comes from the Italian word arpeggiare, which means “to play a harp.” (If you can visualize harpists, they often articulate notes by plucking the strings one at a time.) Arpeggios, often called broken chords, are simply notes from a chord played individually instead of strummed together.

02. What arpeggios can do for you. Arpeggios create a fast, flowing sound. Besides using them for speed in playing, arpeggios add a kick to improvisation skills. Because an arpeggio contains all the notes of its chord, you can use them in your solos and link them to what’s going on in the chord structure beneath you to create cool sounding licks. Arpeggios always sound good over their matching chord in a progression, therefore, they generally form the melodic home bases and safe notes for improvising guitarists. This guitar chord chart will help visualize the notes of each arpeggio on the guitar neck.

03. Scales vs. arpeggios. Let’s clear up any confusion you might have between scales and arpeggios. Scales are a series of notes played one by one that fit sonically within a particular key signature (e.g., G major scale would be G, A, B, C, D, E, F#). Arpeggios, on the other hand, are a series of notes played one by one that consists of the notes within a particular chord (e.g., G major arpeggio would be G, B, D). Like a scale, an arpeggio is linear: it’s a set of notes you play one at a time. Unlike scales that contain some extra notes not always played in chords, arpeggios use only the notes found in a single chord. Both scales and arpeggios can be played in ascending, descending or random order.

04. Arpeggio shapes. As with scales, there are a variety of shapes to learn when playing arpeggios. There are generally five CAGED shapes for each arpeggio, except the diminished 7th, for which there is just one. Learn arpeggios in different positions on the neck so you become familiar with the shape of the arpeggio rather than concentrating on which frets to put your fingers in. Learn the shapes one at a time. Although you need to get all five of the shapes down—eventually—it’s far better to be able to play one perfectly than five poorly. Practice moving from one arpeggio shape to another, back and forth and back and forth.

05. Which arpeggios to learn first. The best guitar arpeggios to learn first are the major triad (1, 3, 5) and the minor triad (1, b3, 5). The major and minor triads are the most common and most used guitar arpeggios in all of music. While a triad contains only three notes, an arpeggio can be extended with chords like a major seventh, a 9th, 11th, 13th, etc., giving you endless possibilities.

06. Different picking styles. There are several ways you can play arpeggios—alternate picking, legato, hammer-ons and pull-offs, sweep picking and tapping are among them. (For the more experienced player, there also are lead techniques you should be confident with for playing arpeggios at higher speeds, such as string skipping and finger rolling.) Experiment with each way of playing these arpeggios to see which one works best for you and your particular style.

A note here about fingerpicking: While fingerpicked chords are technically arpeggios since the chords are broken up, the individual notes aren’t typically muted after they’re played and thus ring together. The listener can literally hear the entire chord from the vibrations of each individual note. Arpeggios typically only have one note playing at any given time and are a slightly different idea from broken chords.

07. Grab the arpeggio by the “root.” When you’re brand new to arpeggios, you always want to start and end on a root note (the note upon which a chord is built. Literally, the root of the chord.) This will help train your ears to hear the sound of the scale. Start on the lowest pitched root note, play up as far as you can, then go back down as low as you can, and then back up to the root note.

08. Form and speed. To play arpeggios, you should mute each note immediately after picking it by lifting the fretting finger. This will keep the notes from “bleeding” into one another and sounding like a strummed chord. Every note needs to sound individually. Start off slowly. Perfect your form before you add speed to the mix. You don’t want to develop bad habits that you will have to correct later.

For more on playing arpeggios, give some of these “how to play arpeggios” guitar lessons a try, as well as Ben Lindholm’s “10 Ways to Play Arpeggios.”

Kathy Dickson writes for the online guitar lesson site Guitar Tricks.


Effective User-Interface Prototyping Tools


1. Antytype
Antetype is the first design and layout software focused on visual design, built by UI designers for UI designers. It saves you a lot of time creating and optimizing high-fidelity detailed UI design prototypes. visit

2. Balsamiq
Balsamiq Mockups is a rapid wireframing tool that helps you Work Faster & Smarter. It reproduces the experience of sketching on a whiteboard, but using a computer. visit is a Web and Mobile mockups tool. Convert wireframes and designs into interactive Apps. visit

4.Fluid UI
Fluid Ui is a mobile app prototyping tool. It is fast, user friendly and intuitive. visit them on

Framerjs is a Prototyping tool for animation and interaction on desktop and mobile.

InVision is a prototyping tool created for designers, by designers. It allows you to quickly and easily create interactive mockups for your designs. Visit

Justinmind Prototyper is an authoring tool for software prototypes and high-fidelity website wireframes. visit

8.Axure Rp
Axure RP Pro is a wireframing, rapid prototyping, documentation and specification software tool aimed at web and desktop applications. visit

UxPin is a UX design App that creates responsive interactive wireframes and prototypes.

10.Marvel App
Marvelapp provides  the easiest way to turn your sketches, images and mockups into realistic mobile and web prototypes … “Marvel is my favourite  interactive prototyping tool I have been using it and the cool part is no coding required and all for free”. visit

Icons Speaks Louder in your design (Visual Design)

A picture is worth one thousand words. This aphorism means even more when we apply it to icons: save, open, and print are just a few of the many actions we associate with a simply sketched image. The “hamburger” menu icon is newer to the icon family, and yet it is now nearly as ubiquitous as its namesake food. Yet when UX designer James Foster conducted a series of A/B tests, he found it suffered in clarity compared to the simple word “menu.”

James Foster began A/B testing to satisfy his curiosity: would the full hamburger test better than the simple “three lines” menu icon? It did. He then compared the full hamburger to the word “menu” surrounded by a border, and that tested even better – 12.9% better. The test led him to the conclusion that the hamburger icon is not as universally understood as a square button—like box with the name of the item.

For those of us with less time on our hands, we can’t spend days running A/B tests on every icon and word combination. Even if we could, the tests alone might not provide a clear answer; plenty of designers and developers have struggled over whether icons or text are “better” with no clear decision. This article will do the heavy lifting for us, compiling research on when icons are the better choice, and when the written word will best suit our needs.

Icons for space constraints

The primary reason a designer might choose icons rather than text is simple: icons take up less space. This has risen to the top of the priority list for many designers as our screens and devices get smaller, and responsive design gains traction.

Google is one of the largest companies to have recently updated their applications to make more use of icons. In their developer guide, they include an explanation. They state that an icon is a “quick, intuitive representation of an action, a status, or an app.” They go on to provide advice for ensuring that icons will be legible across myriad devices, such as using vector images and designing the images on a large art board. Their reasons for supporting iconography are clear; icons are intuitive, and they are small, both of which are valuable assets on the growing number of mobile devices with limited screen space.

Google creates applications used the world over, and they create simplistic icons to reduce the need for a learning curve. On the other side of the spectrum, more complex icons have value in very niche situations – but accordingly, these more complex icons will have a longer learning curve. A company like Microsoft needs beginner users to immediately understand an icon’s meaning, and therefore might include text in addition to an icon. Other companies with internal applications will go so far as to train users to recognize new or unusual icons. A learning curve is not a negative thing in this situation, and even more so if the trade off is to communicate complex ideas in a limited space.

With all this in mind, icons are best used for the following situations:

  • Companies with time to train employees on icon meanings
  • International applications where language barriers preclude the use of text
  • The very young and not yet literate, which are becoming a common tablet audience
  • Small screen spaces requiring multiple and complex buttons

Words for simplicity

In spite of their convenient size, many designers have found that icons are not the most effective communication tool. Among other issues, icons can have different meanings for different cultures, and sometimes no meaning whatsoever – a true usability problem. UX Myths counts “icons enhance usability” as one of their disproven myths. They said:

“Many researchers have shown that icons are hard to memorize and are often highly inefficient. The Microsoft Outlook toolbar is a good example: the former icon—only toolbar had poor usability and changing the icons and their positioning didn’t help much. What did help was the introduction of text labels next to the icons. It immediately fixed the usability issues and people started to use the toolbar.”
UX Myths, “Myth #13: Icons Enhance Usability

Part of the issue with icons is the speed with which we are developing new features. Popular icons may go out of style, or the image may change meaning over time. In addition, the world is getting smaller, and different cultures recognize icons to mean different things. Something as simple as a check mark means “correct” in Britain, but “incorrect” in Sweden.

Obviously, using text for an international application will suffer from language barrier complications, so text is not necessarily preferable to icons. However, when creating applications for a single culture with diverse age ranges and technical abilities, text is often the best choice. For example, most computers now use icons for basic functionality, but include roll over text for older users. Many applications also choose the most important functionality and provide text instead of icons for those 5—10 buttons.

With this in mind, text or text and image together is likely the best choice for the following situations:

  • Applications used by multiple cultures with different meanings for iconography
  • Older or less technically savvy audiences
  • Applications with a few very important actions or buttons
  • Applications needing a very fast learning curve

10 Tips To Get Started With Responsive Design

If your website doesn’t read well on those devices, you’re losing a huge chunk of mobile users. It’s time to embrace responsive design. Getting started can get complicated, but here are some tips to help.

1. Go Mobile First


Before you plan your design for desktop or laptop screens, think about the user experience on a mobile device. A lot of designers are embracing the mobile first movement. Why? Because mobile is becoming more relevant than desktop.

Approximately 1 in every 7 people on earth use their mobile devices to access the internet. Focus on how users interact with your website over their mobile phones first. Then build out your design for larger screen sizes.

2. Get Acquainted with Media Queries

Media queries are a feature in CSS3 that allow content to respond to different conditions on a particular device. Media queries check for a device’s resolution, height, width and orientation. Then it uses this information to determine which CSS rules to apply. Media queries are the driving force behind responsive design.

3. Understand What Mobile Means for Your Users


People interact with websites differently over a smartphone than they do over a desktop. Use analytics to figure out why a user is visiting your website on their phone. They may want to get quick information via the search bar. If that’s common among your users, then make your search bar highly visible and always present.

4. Use Percentages

One of the hardest parts of responsive design is implementing a fluid grid. A fluid grid works together with media queries to display content on different viewports.

Instead of designing breakpoints for every possible viewport, you set a maximum layout size. From there, you define the widths and height by proportion, not pixel. This allows the site to rearrange the layout based on percentages.

5. The Need for Speed

One of the drawbacks of responsive design is slow loading times. In fact, a recent study shows that the majority (48%) of responsive sites load anywhere from 4 to 8 seconds. That length of load time was acceptable in 1997, but in 2014, 64% of smartphone users expect a site to load in under 4 seconds.

The main reason behind a slow site are non-optimized images. Don’t let those images drag your responsiveness down. Quickly scale down hefty images with tools like Adaptive Images and TinyPNG.

6. Eliminate the Unnecessary

Get rid of excessive elements, not only for your user experience, but also for website’s speed. A website weighed down by too many elements will not be pleasant to use or to look at. Use a program like GZIP for compression.

7. To Hamburger or Not to Hamburger

The Hamburger icon – otherwise known as the three lines that show a hidden menu – is the source of fierce debate. Some people hate it, some people love it, but what is the best practice?

For responsive design, the best practice is always a matter of convenience. If a user must always tap the icon to see menu options, it becomes tiring. If you make the most popular menu items visible you can save users from frustration. Keep less popular links in the hamburger menu navigation.

8. Make it Readable

Don’t make your users squint to read or pinch-to-zoom. Make your text size large enough to read from a smaller screen. I recommend a text size of 16 px, 1 em, or 12 pt. Here’s a useful conversion guide for px to em. When designing headlines, use a tool like FitText to create responsive text.

9. Use the Right Button Size

On mobile devices, real estate is premium. Avoid small button sizes. Make sure your buttons are at least 44 x 44 px for comfortable tapping. Another handy tip is to use padding instead of margins. Padding increases the tappable area, but margins do not. Margins increase the white space around the button.

10. Design for Screen Orientation

According to statistics, landscape orientation wins over portrait orientation 59% to 41%. Design your site to look good on both orientations, but pay more attention to landscape. Make sure that your images aren’t stretched.

Final Thoughts

Responsive design makes it easier for all users to view your website and webapps no matter what device they use. These are the basics that will help you get started with responsive design.