Posts tagged with Twitter

Tips for Designing Twitter Pages

October 13, 2009 - 0 comments

By John Gibson, VP Creative Services

Twitter is a great resource for companies to further market themselves, post company news, drive traffic to their web site and much more. Although tweets are typically viewed as simple text messages, there’s opportunity to create a memorable Twitter landing page that can tie in with an existing web site design or corporate standards.

Backgrounds
Twitter allows you to customize the look of a Twitter homepage by either selecting a provided theme or uploading a custom background image. The latter option gives you the ability to make the Twitter homepage communicate a company’s brand identity, culture or graphic style.

But Twitter backgrounds are a tricky canvas for designing on, because the entire central area of the page will be taken up by Twitter content. In effect, you’re only designing around the edges of the page. The Twitter content area floats on top of the background and remains centered at a width of 763 pixels. In the case of a smaller monitor, the content area could cover up a rather large percent of the background. The most failsafe practice is to create a layout that covers a 1920 x 1200 pixel area. This will accommodate most screen sizes and the design will appear seamless. You also have the ability to tile a smaller background image. Don’t forget that visitors are there for the purpose of sorting and reading the content that dominates the page, so make sure the background is not so loud and distracting that it competes for attention.

One good practice is to work in a company logo, mission statement and contact info into the left side of the background image. See sample below. Bear in mind that these elements could be covered up or cropped when the page is viewed on smaller monitors.

You can find more examples of creative and compelling Twitter backgrounds at the Smashing Magazine site.

Customizing Colors
Within the settings menu you are allowed to make some simple adjustments to change colors in the page layout. Twitter gives you the options to set colors for the background, text, links, sidebar and the sidebar border. This is helpful if you’re trying to match an existing web site, and you can also view these changes instantly.

Picture
The last item I would like to discuss is the personal picture, the thumbnail image that identifies a user on Twitter pages. This is another opportunity to get the corporate branding displayed. The picture image is always square, so make sure when uploading the image or logo that it’s in a square format. Otherwise, the corporate identity may be arbitrarily cropped. The maximum size is 700k and can be a jpg, gif or png file. If a complex or oddly proportioned logo doesn’t work when reduced down to this size and shape, use your judgment to find a tasteful solution — even if that means tweaking the prescribed corporate identity standards just a touch. You might zoom into or isolate a distinctive part of the logomark in a way that that works well and stands out in this format.

Got a Favorite?
We want to hear about your favorite Twitter profile backgrounds – send us a tweet! We’re @signalinc on Twitter.

Designing Web Sites to Include Social Media

October 2, 2009 - 0 comments

By John Gibson, VP Creative Services

Often when designing a site I find myself spending a good deal of time organizing content and thinking through how the end user can best absorb the information displayed on a page. Recently many companies are beginning to include social media as another method for viewers to become engaged with their site and their company. This becomes another level of content that needs to be well planned before the site moves to the design phase. Below are a few important considerations.

Level of Presence
The first step is to determine which forms of social media the client wants to be involved in. For instance, do they want or have a Facebook, Twitter or YouTube page? Then you need to find out the degree to which this media will feature on their main site. Would they like a simple link or something more attention-getting? You also need to determine whether this needs to be integrated into the landing page or located within a news page.

Adding Social Media Icons
The easiest and most understated approach to show that a company is involved with social media is to include a simple link or icon to the site. This can be placed easily within in a footer or strategically within the main content. Each social media has its own distinctive icon available as a download. Many sites also offer a wide variety of free icon styles from buttons to hand-sketched looks. One good source for finding unique social media icons is Smashing Magazine.

Using Social Media Widgets
As discussed in a previous blog post, social media widgets provide an easy way for a web site to display a few lines of recent news, drive more site traffic and generate a higher level of awareness of their social media involvement. When including a widget within a site design, it’s important to know how much you can customize these small applications. For instance, can you change the size, background color, text color, etc. to fit your design. Some widgets are more customizable than others, which can help determine which style of widget to use or whether to include one at all. Take the time to show the client how it will appear on the site and what the widget can do. Each method of social media offers its own type of widgets and there’s also opportunity to use third party widgets.

For example: a YouTube Video Bar widget allows users to watch the selected video channels without leaving the site.

Twitter offers a Profile widget that displays recent Twitter updates on the site.

And Facebook offers a Fan Box widget which invites site visitors to become the company’s Facebook fans.

One last thing to note as you begin the site design process is to be aware of and understand this growing form of communication. As designers we need to continually seek out fresh ways to incorporate this media into our layout and adapt our design to fit the customer’s social media needs.

Coming up next: Tips for Designing Twitter Pages

Widget Wizardry: Web 2.0 Connections Made Easy

August 25, 2009 - 0 comments

Companies all around are getting connected to the social media world. You may be on Twitter, or your might prefer Facebook, but the question is, do people know about your presence? It’s simple to take one more step and make it easy for your targeted customers to find all of your social media connections using widgets.

What are widgets? They’re cool, customizable mini-applications that can be embedded directly into to a web page, bringing live feeds, games and user specific information to your visitors. Popular social media sites offer simple chunks of code you can insert on your site to create instant widgets.

For example, by adding a Facebook widget to your company’s site, you immediately have a visually attractive and customized entry point readily available for visitors to connect with you. Via your Facebook widget, visitors can see up-to-the-minute wall postings and become your fan with a click. And of course the widget links directly to your Facebook page.

There is a vast and growing range of widgets available. Below is an example showing how Signal has combined three widgets (including YouTube, Twitter and Facebook) on one “connect with us” page. Visit the Alma Lasers Connect page and see the widgets in action!