Using Social Media

In 2009 and 2010, social media went mainstream. Companies, products, and nonprofits rushed to establish presences on Facebook, Twitter, and media repositories such as Flickr and YouTube. If they already had blogs, the streams of bite-size messages on Twitter and Facebook gave those blogs new audiences.
Organizations discovered that if they published a steady stream of appealing content, customers and influencers would pay attention to
them—and if a piece of content “went viral,” that organization’s brand would spread far and wide. For free!Well, not really for free.

Organizations put in a lot of effort to establish successful social media presences. Someone has to spend a lot of time writing and disseminating content; someone else needs to spend time reading relevant conversations across the Web and responding sensitively to them.

Valuable home page real estate may support these social media efforts, and pages on other sites (such as Facebook or YouTube) must be designed and tended. And someone needs to devise an overall strategy: where is effort spent, when, and on what topics?

A few best practices are emerging that can inform those efforts. Social media is still a young field, and specific recommendations will change rapidly over the months and years. Like the rest of this book, this chapter’s principles and patterns aren’t hard-and-fast rules, though ideally they will outlast 2010’s most popular sites and technologies.

This chapter will focus on one aspect of online social interaction: how to use the various forms of social media to promote a brand, share an idea, disseminate a video or other Ar-tistic expression, and otherwise support your particular enterprise. The key is to acquire followers—people who voluntarily listen to what you have to say. Brands that create excel- lent experiences for their followers gain huge audiences from their social media efforts.

(Here, we will keep the scope of this blog to include “brands” that are personal, nonprofit, arts-based, cause-driven, or just for fun.)

The Basics of Social Media:

 Listen:- listen what are people thinking about your subject. find out what they want and what they don't.

Produce good stuff:- Write, design, record, or otherwise create items that people enjoy consuming. Produce them regularly and frequently enough to keep people interested

Push that good stuff out to readers:-
Go to wherever they spend their time: email, Facebook, Twitter, RSS feeds, Digg, or wherever you discover your readers are hanging out online.

Let readers decide which stuff is good:-
Give readers a way to share your content with their own followers, and let readers send items privately to close ties. Gather feedback via voting systems, thumbs-up/down gadgets, and other systems.

Make the good stuff findable:-
Organize your home page well; put fresh content there regularly, and use sidebars to show most-viewed items, best-of lists, and other views into your library of content items.

Consider using the following patterns for social content production:
1. Editorial Mix
2. Personal Voices
3. Repost and Comment
4. Conversation Starters
5. Inverted Nano-pyramid

UI design :Patterns

In essence, patterns are structural and behavioral features that improve the “habitabil-
ity” of something—a user interface, a website, an object-oriented program, or a building.


They make things easier to understand or more beautiful; they make tools more useful
and usable.
As such, patterns can be a description of best practices within a given design domain.
They capture common solutions to design tensions (usually called “forces” in pattern lit-
erature) and thus, by definition, are not novel. They aren’t off-the-shelf components; each
implementation of a pattern differs a little from every other. They aren’t simple rules or
heuristics either. And they won’t walk you through an entire set of design decisions—if
you’re looking for a complete step-by-step description of how to design an interface, a
pattern catalog isn’t the place to find it!
Patterns are:
Concrete, not general
All designers depend upon good design principles, like “Prevent errors,” “Create a
strong visual hierarchy,” and “Don’t make the user think.” It’s rather hard, however,




to design an actual working interface starting from fundamental principles! Patterns
are concrete enough to help fill the space between high-level general principles and
the low-level “grammar” of user interface design (widgets, text, graphic elements,
alignment grids, and so on).
Valid across different platforms and systems
Patterns may be more concrete than principles or heuristics, but they do define ab-
stractions—the best patterns aren’t specific to a single platform or idiom. Some even
work in both print and interactive systems. Ideally, each pattern captures some minor
truth about how people work best with a created artifact, and it remains true even
while the underlying technologies and media change.
Products, not processes
Unlike heuristics or user-centered design techniques, which usually advise on how to
go about finding a solution to an engineering or design problem, patterns are possible
solutions.
Suggestions, not requirements
You should almost always follow good design principles and heuristics, of course.
And organizations need designers to follow style guides so that their products stay
self-consistent. But patterns are intended to be only suggestions; you can follow them
or reject them, depending on your design context and user needs.
Relationships among elements, not single elements
A text field is not a pattern. The spatial relationships between a text field and a piece
of help text near it, however, might be a pattern. Likewise, changes in a set of elements
over time—as a user interacts with the software—may constitute a pattern, though
some patterns capture only static relationships.
Customized to each design context
When a pattern is instantiated in a design, the designer should adjust the pattern as
needed to fit the situation. You could use some of the pattern examples verbatim, but
as long as you understand why the pattern works, why not be creative? Fit the pattern
to your particular users and requirements.
Some very complete sets of patterns make up a “pattern language.” These patterns resem-
ble visual languages in that they cover the entire vocabulary of elements used in a design
(though pattern languages are more abstract and behavioral; visual languages talk about
shapes, icons, colors, fonts, etc.). The set in this book isn’t nearly as complete, and it con-
tains techniques that don’t qualify as traditional patterns. But at least it’s concise enough
to be manageable and useful.

Some basic principal

Movement

Movement refers to the path a viewer’s eye takes as it navigates a composition or layout. Take a look at the example below. Doesn’t your eye naturally travel from left to right, making you feel like the lines are toppling over?

You can create movement in the same way in UI, to guide your users through sections of screens or to create hierarchy and emphasis. You can use lines to direct movement, as well as shapes, color, and even gradients.

Rhythm

Rhythm is organized movement. It’s very active and for obvious reasons, closely tied to music.

You can create rhythm using:

• Repetition: using predictability to create a pattern
• Alternation: using contrast to create a pattern
• Gradation: using a series of steps to create a pattern

Using these 3 techniques, there are 3 main kinds of rhythm you can plan for in design. As you read about them, it’s helpful to assign a sound to each shape you see. Play the beat they would produce in your head. It will help you understand how rhythm works visually.

Regular Rhythm

The hallmark of regular rhythm is predictability. Identical elements are arranged over predictable intervals, just as it is done in the example below.

Flowing Rhythm

Flowing rhythm is organic. Each element making up the pattern is similar but not exactly the same and the intervals vary slightly. Think of zebra or tiger stripes.

Progressive Rhythm

Progressive rhythm is a combination of both. Elements are placed in regular intervals but begin to vary and change gradually. Essentially, one element transforms into another or a variation of itself. Think of the notes on a harp and how they gradually transform into each other. A color gradient is an example of progressive rhythm.

In UI design, rhythm can add structure and visual interest to your layouts. It will also provide an avenue for you to explore alternative solutions to traditional, overused layouts.

Balance

Balance in design works just like it does in the real world. You distribute the objects' “visual” weight on the screen to make sure it doesn't feel like it is about to topple over. There are 2 types of balance: symmetrical/formal and asymmetrical/informal.

Symmetrical or Formal

In symmetrical balance, both sides of a composition or layout will look exactly the same. If you sliced the example below horizontally or vertically, you'd have two identical pieces. If they sat on a scale, both sides would sit at the same height.

Asymmetrical or Informal

Elements on either side of a composition or layout are different in asymmetrical design. They still, however, feel balanced. Take a look at the composition below. If it sat on a scale, would both sides be at the same height?

Balancing your compositions, using either symmetrical or asymmetrical balance, will be important in your design. When layouts lack balance, you can create unwanted hierarchy and screens that feel awkward. It is the same feeling you get when you light elements from the bottom—it just doesn't feel right.

Proportion

Proportion deals with the size relationships of components in a composition or layout, how they relate to each other, and how they work to create unity. Think of your body. All its parts are proportional; they feel like they belong and work well together. You want to achieve the same feeling in design.

When designing interfaces, all its elements should feel “the right size.” You would not want to create a button so big that it eclipses other elements. It’s size must suit its function and work well with the other elements, making them feel like a family.

Emphasis

Emphasis deals with highlighting one element or section over another in a composition or layout. It’s similar to making text bold or italicized.

Emphasis is a great tool for establishing hierarchy or directing a user’s attention. Elements noticed first will be dominant in your layouts and those that follow will be subordinate. You can create emphasis using size, color, or any other attribute that will be applied differently to the element you wish to emphasize

icons

Icons are graphic symbols which convey meaning through their resemblance to real life objects. They are essentially pictures of things. We see them absolutely everywhere, not just in UI design. They can communicate vast amounts of information in a short time and in many cases, a lot faster than text can. They’ve been a staple of human communication throughout history and their ever-growing popularity is ensuring that they continue to be.

There are a few kinds of icons out in the UI field that you’ll commonly come across and will likely be designing. These include:

Favicons - Favicons represent websites and are found in browser bars. They are normally a smaller version of a logo or a variation.

Application Icons - These guys can sit on your phone screen or your dock.

Interface Icons - These are icons used in UI that aid navigation, frequently as part of a collection.

 

What makes an icon “good”?

Icon design affords designers loads of creative freedom and can be lots of fun. It is, at a very basic level, drawing pictures. Unfortunately, not all pictures are drawn equal. You’ll find exceptionally good icons out there as well as terrible ones too. Below you’ll see two Mail icons. Do you think they are both successfully telling you you’ve got mail?

 

Good Icons Are Simple, Clear and Predictable

Don’t add unnecessary decorative elements or details to your icons even if they look great. More often than not, unnecessary elements will get in the way of communication. This does not mean that icons have to be boring. You just need to make strategic use of style elements and tools to give them character without detracting from the icon’s meaning.

Good icons are also predictable. Users know that when they see 3 horizontal lines stacked on top of each other, a.k.a. a “hamburger” icon, they know that clicking it will usually reveal a hidden menu.

 

Good Icons Are Consistent

Good icons are consistent, not only with each other, but with the app or product they will be featured on. When creating an icon collection, be sure to apply the same styling to all of the icons. Make them feel like a family by using the same kinds of shapes, textures, or line weights. Their characteristics must match. You want to create unity, avoiding black sheep, or icons that don’t quite fit in with the rest of the herd.

Take a look at the image below. It features different objects, but you can tell that they belong to the same family because the styling is the same. The color, line weight, and shapes are all the same.

 

The Icon Design Process

Like with all work related to design, icon design has a process that your icons will greatly benefit from if you decide to follow it. We broke it down into 3 main stages: Exploration, Design, and Implementation.

1. Exploration

Before you start drawing out your icons, give yourself some time to explore. Spend some time thinking about the idea or object you are designing for and all the images or symbols directly associated with what you need to communicate.

2. Design

Once you have selected an idea or object to work with, begin sketching. Pencil and paper work wonders and are a quick way to explore alternatives fast. However, many chose to jump on their screens and pixel push early on, which is also totally acceptable.

3. Testing

Finally, you will need to test your icons. You want to make sure they are scalable and read clearly at different sizes. They should also align with the interface in which they will be used. Pop them into the UI and actively look for issues. Go back to the drawing board as needed. Revise your icons based on your findings and test again until they are just right.

Another two Common UI Design Mistakes

 #1: Allowing the Grid to Restrict UI Design

Despite my treatise against rules - here’s a rule: there is no way for a UI Designer to design without a

grid. The web or mobile interface is fundamentally based on a pixel by pixel
organization - there’s no

way around it. However, this does not necessarily mean that the interface has to
restrict designers to

gridded appearances, or even gridded processes.
Using the Grid as a Trendy Tool


Generally, making any design moves as a response to trends can easily lead to
poor design. Perhaps

what results is a satisfactory, mostly functional product. But it will almost certainly be boring or

uninteresting. To be trendy is to be commonplace. Therefore, when employing
the grid in a design,

understand what the grid has to offer as a tool, and what it might convey. Grids
generally represent

neutrality, as everything within the restraints of a grid appear equal. Grids also allow for a neutral

navigational experience. Users can jump from item to item without any interference from the

designer’s curatorial hand. Whereas, with other navigational structures, the designer may be able to

group content, or establish desired sequences.Although a useful tool, the grid can be very limiting to designers.

Defaulting to the Grid as a Work Flow
Dylan Fracareta, faculty of RISD and director of PIN-UP Magazine, points out

that “most people

start off with a 12 - column grid...because you can get 3 and 4 off of that”. The danger here is that

immediately the designer predetermines anything that they might come up with. Alternatively,

Fracareta resides to only using the move tool with set quantities, rather than physically placing thingsagainst a grid line. Although this establishes order, it
opens up more potential for unexpected

outcomes. Although designing for the browser used to mean that we would input some code, wait,

and see what happens. Now, web design has returned to a more traditional form of layout designer

that’s “more like adjusting two sheets of transparent paper”. How can we as designers benefit from

this process? Working Without a Grid Although grids can be restricting, they are one of our most

traditional forms of organization. The grid is intuitive. The grid is neutral and unassuming.

Therefore, grids allow content to speak for itself, and for users to navigate at their will and with ease.

Despite my warnings towards the restrictiveness of grids, different arrays allow for different levels of
guidance or freedom.

#2:The Standardization of UI Design with Patterns

The concept of standardized design elements predates UI design. Architectural details have been

frequently repeated in practice for typical conditions for centuries. Generally this practice makes

sense for certain parts of a building that are rarely perceived by a user. However, once architects

began to standardize common elements like furniture dimensions, or handrails heights, people

eventually expressed disinterest in the boring, beige physical environment that resulted. Not only

this, but standardized dimensions were proven to be ineffective, as although generated as an average,



they didn’t really apply to the majority of the population. Thus, although repeatable detail have their

place, they should be used critically.If we as designers choose to automate, what value are we providing?

Designers Using the Pattern as Product
Many UI designers don’t view the pattern as a time saving tool, but rather an off
the shelf solution to

design problems. Patterns are intended to take recurring tasks or artefacts and
standardize them in

order to make the designer’s job easier. Instead, certain patterns like F Pattern Layouts, Carousels or

Pagination have become the entire structure of many of our interfaces.Justification for the Pattern is Skewed

Designers tell themselves that the F shaped pattern exists as a result of the way that people read on

the web. Espen Brunborg points out that perhaps people read this way as a result of us designing for

that pattern. “What’s the point of having web designers if all they do is follow the recipe,” Brunborg