Sr. Ruth’s reaction to the new website launch: “The site looks fantastic! I strongly believe there will be lots of great enthusiasm, energy and passion for IHM because of these seeds of new life. I am deeply grateful for all of your hard work, guidance and wisdom for the project.”

1. Your Competitor’s websites. This is probably a no-brainer, but it’s nice to find out what your competitors are doing online. Are you keeping up? Are you ahead of their game? What features do they use that you can see incorporating into your website? For example, do they have product reviews, a news blog, a rotating slideshow? Contact us to get help implementing the features you see. If you’ve already invested a lot of money into your website or marketing materials, updating your site piece by piece may be a better solution for you than a complete redesign. For example, your bathroom is old, so do you sell your house? No, you renovate your bathroom and put your own twist on it. The same thing can go for your website.
2. Big names in your business. If you are a small boutique selling children’s clothing, maybe check out what Babies R Us is doing on their site. What would work for you on a smaller scale? Use these larger companies as models for your business plan. There’s a reason they are successful. Find out why.
3. Websites you enjoy/follow.  Are you a fan of Martha Stewart’s blog, or ESPN.com? What features about those sites make you come back for more? Getting your customers or visitors to keep coming back to your site is KEY. What are you doing to make them come back?
4. Website galleries. Sites like CSS Mayo have complete galleries of inspirational websites. You can filter results by category, or even search for a keyword. If you are looking for logo design ideas, check out Logo Pond. Communities such as deviantART will give you many ideas. Artists upload their own creations in this exciting community.

Not so interested in being online? There are plenty of ways to get ideas without ever logging onto your computer. Every day, in every way possible, I’m finding inspiration. Whether it be the color of someone’s roofing, a cool billboard along the highway, some graffiti under a bridge, the spread of food at a local buffet, there are millions of ways to find ideas related to color & color combinations, pattern, texture, layout, and scale.

1. Visit an art gallery. Take a stroll around your local gallery. If you are in Scranton, like I am, a great way to discover art is on the first Friday of every month. “First Friday Art Walks” are held at galleries and businesses all through the downtown. Paintings, photography, scultpure, music, and performance art fill the streets. It’s a great way to become inspired.
2. Check out an antique or second-hand store.  Lots of the items in these types of stores are unique and interesting. Also, many of these store owners have to get “creative” when organizing the items and fitting everything. Take some tips from them. Look at groupings of items. What colors and patterns work together?
3. Go to a Record Store. A record store is a great place to get inspired. Check out the album artwork on different genres of music. What are their similarities and differences? Is there a particular genre of music that you are drawn to, just by looking at the artwork? A trip to the local Gallery of Sound can help you get a better grasp on your design styles and tendencies.
4. People Watch. This is one of my favorites. Find a nice park bench downtown on a sunny Saturday, or sit in the mall in the evening. Watch what people are doing. What are they wearing? How are they acting? What is drawing THEIR attention? These people can be potential customers. Sometimes at our local mall I sit next to the Old Navy entrance. Old Navy always has interesting marketing, so I watch how people react to their newest setup. Are they paying attention? Is it working? When they leave the store, do they have those items in their bags? It’s definitely an interesting afternoon (for me, at least!).

These tips should help you get the creative juices flowing. Once they start, get in touch with us and we can help make your vision a reality. Have fun!

CreateAthon is a 24-hour, work-around the clock creative blitz during which marketing, advertising and public relations firms provide nonprofit marketing services on a pro bono basis. Since the program’s creation by Riggs Partners in 1998, 73 agencies have participated in the CreateAthon network, holding CreateAthon events in their respective markets. It’s an effort that has impacted more than 1,100 non-profit organizations, delivering 2,500 projects valued at more than $11 million.

Just as importantly, CreateAthon has impacted the lives of creative professionals far and wide. Just ask anyone who has lost a night’s sleep to CreateAthon. They’ll tell you they’ve gained much more than what they lost in 8 hours.

Stay tuned for updates on the redesign, and visit nepacat.org for more information on how to support this cause.

Often times, pictures from our digital cameras are very large. This is because there are different image resolutions for printing photos vs. simply viewing photos on the web.

Print Images

Image size for printing is determined by how many pixels-per-inch (ppi) make up a photo or image. The amount of pixels (or dots) can range from a lot (300 ppi) to a little (72 ppi). When you are printing a photograph from your camera, the rule of thumb is to use the highest ppi possible for the size you need. Most printers will recommend using 300 ppi as your setting.

Web Images

The web works a little differently. To understand how image ppi affects images displayed on webpages, consider this formula: 1-1.

Pixels-per-inch is irrelevant to images on the web.
Rather, they are based on how many pixels the image has. The goal is to resize your photo to exactly what size you will be using it on the website. A general rule of thumb is that about 100 pixels = approximately 1 inch on a website. By sizing down your photos appropriately for what you are using them for, you will reduce the file size and make the page load faster.

Why use PPI then?
We recommend the setting of 72 ppi for the web. Why? Because you have to put something in the box in most image editing programs, such as Adobe Photoshop. But when Photoshop asks for ppi in the Image Size dialog, this value is used to determine how Photoshop converts the pixel dimensions of the image into printed inches.

Recommended Programs

There are 3 free programs that we recommend for resizing your images:

1. Resize.it
   This is an online tool that will resize and crop a single photo for you quickly – no need to install any software onto your computer!
2. Microsoft Office Picture Manager
   Microsoft Picture Manager is installed with all Office Suites, so you should already have it! With this program you can manage, edit, share, and view your pictures from where you store them on your computer. Picture Manager can correct your pictures, with editing tools to crop, expand, or copy and paste.  Click here to read Microsoft’s tutorial on using Picture Manager.
3. Microsoft Image Resizer Powertoy
   This PowerToy enables you to resize one or many image files with a right-click. After a simple one-time install from the Microsoft website you’ll be able to resize your photos in two steps! 
   1. Click here to download the Picture Resizer, or visit this link, and click on the PowerToys tab, then look for the Image Resizer PowerToy.
   2. Navigate to the folder on your computer where the photo you want to resize is.
   3. Right-Click on the image (or hold down SHIFT to select multiple photos for resizing) and select “Resize Pictures” from the menu
   4. A dialogue box will appear with 4 options: Small, Medium, Large and Handheld PC. Choose one of these predetermined settings if they work for your needs.
   5. You can also click the “Advanced” button for more options. This comes in useful if you are resizing multiple photos at once.
      1. Make Pictures Smaller But Not Larger: This setting allows you to resize all your photos to a certain size, but if there’s an image in the folder that’s small than your determined size, it will leave it alone. This is a nice option to have because making your pictures larger usually results in blurriness and poor image quality.
      2. Resize the Original Pictures (Don’t Create Copies): The default for the Image Resizer is to create a copy of your image so that you don’t overwrite your large, high-quality files. This option will overwrite the photos for you (Not recommended).
   6. When you click “OK” the Image Resizer will create a copy of the photo in the new size in the same location as your original photo.

Have a Mac?

We’ve got you covered. You can download OX Image Resizer to resize your photos.

1. The first screen allows you to choose your “resize settings” such as width and height. At the bottom of the screen you can click on Add File/Folder in order to select the images you’d like to resize.
2. The second tab is called “Output Files” and allows you to choose the folder location on your computer (the Directory) as well as several options for renaming your photos.
3. The JPEG and PNG-24 tabs allow you to select the file type you’d like the resized images to output as. If you are using this tool to resize the images for the web, we recommend using the JPEG setting. Choose a compression level around 75 and click the button Resize Images to JPEGs. A lower compression level will make the file size smaller, but will also result in a lower quality output.
4. The next step is to navigate to the folder on your Mac that you choose in step 2. These images are resized and ready for you to upload to your website.

Steamtown Showcase 2007 Flyer

In 2007 Bullzeye Design was asked to develop a graphic identity for the showcase, which they have used consistently in all their promotional materials for the past 4 years. Our first promotional project with them was double-sided bar flyers in 2007. The flyers were simple, and were meant to boast the new logo design to gain the company recognition of their identity. Making sure to highlight to date and admission price of the event prominently, the clean, organized layout works well to promote this little-known (at the time) event prominently. Since then, we’ve been asked to design a new concept each year.

Steamtown Showcase 2008 Flyer

The 2008 Showcase Flyer design played off the same color scheme as the previous year, and showed off a brighter, bolder “orange” color for the important text to give it new life. The Showcase grew tremendously since the previous year, adding an additional night and a total of 10 venues throughout Scranton. After seeing the flyer, organizer John Phillips replied, “Not trying to flatter you, but it is your best flyer yet. You seriously have a gift…” What a statement to live up to for the next year!

Steamtown Music Showcase 2009 Flyer

Enter 2009. While promoting the showcase we decided to go in a slightly different direction. Instead of including all the content on a single side of the flyer (and then duplicating the content on the back, so each side had the same message), we went with a true 2-sided flyer. The front featured cartoon musicians in the background with a narrow copy layout and a darker background. On this side you’ll see the logo, venues and sponsors. On the back, we used a similar cartoon-feel for the background, but reversed the colors and featured the crowd rather than the musicians. Unique content on this side were the featured acts and a type-only treatment of the logo. On both sides we featured the event date, hopper pass information and the website details. While this flyer is pulling away from the original 2007 flyer design, we’ve continued to bring elements over from year-to-year to maintain consistency. The logo remained, and we used the orange from the 2008 flyer as the accent color.

2010 Steamtown Music Showcase Flyer

The 2010 Steamtown Showcase Flyer is the furthest transition from the other years. While maintaining the same logo, we’ve taken elements from other years:

• 2007 font accent color
• 2007 “grunge” background style
• 2008 “slanted” text
• 2009 tilted logo

The flyer introduced a new color for the year: teal. This gave us the opportunity to pull a little bit further away from the style of the original, while still keeping it “part of the family.”

2011 will bring exceiting things for the Steamtown Showcase and we’re looking forward to helping them with not only their club flyers, but sponsorship booklets, city maps, and other promotional items. Stay tuned.

View The Press Release:
Maternal & Family Health Services Announces Launch of Newly Redesigned Safeteens.org
Maternal & Family Health Services, Inc. announces the launch of the new Safeteens.org. The newly redesigned Safeteens is a resource on healthy living and safe sex for Pennsylvania teens as well as teens across the country. New features and improved functionality makes it easy for teens to get reliable health information and find family planning health centers across the state of Pennsylvania.

Safeteens is a resource for teens, providing reliable health information and a direct link to Family Planning health centers located throughout Pennsylvania.  The Safeteens logo and website were in desperate need of updating and the client had many goals in mind for improving the website.  Some of their major goals included:

• Increase the overall usability of the website by:
  • Eliminating Flash animation and music from the website
  • The creation of a 404 Error page, and 301 redirects (if someone goes to a page from the old site that no longer exists, this gives the ability to redirect to the closest matching page on the new site)
  • Development of a clear hierarchy, or sitemap, of pages along with breadcrumb navigation.
• CMS capabilities so that staff would be able to add to and update the site
• Addition of a news blog, with the ability for the user to ‘comment’ on articles and share them with friends
• Interactive features, such as a dynamic “Find a Health Center” address database, featured polls, featured homepage articles, and featured YouTube videos.
• Integration of social media, such as displaying a Twitter feed, and allowing the user to share pages, news posts, and other elements of the site on Facebook.

This project included the creation of an iconic logo. In order for an icon to be a truly effective logo, it should be easily recognizable and memorable, while remaining clear when reproduced in small sizes. Upon approval, their new logo was used as the inspiration that the entire website was designed around.

The redesign process began with extensive research on how teens use the web; what they like, what they dislike, and how to make their website more appealing to the target audience (pre-teens and early teens).

Here you’ll see the before and after of the Safeteens redesign:

Safeteens Homepage Before

Safeteens Interior Page Before

The NEW Safeteens!

While doing some research for our next website redesign project, I found that this definitely is not the case. Teenagers (ages 13-17, who spend 5-10 hours on the web per week) actually perform in usability studies at a significantly lower success rate than adults do. In the report Teenagers on the Web: 61 Usability Guidelines for Creating Compelling Websites for Teens, Jacob Nielsen notes, “Teenagers like to do stuff on the Web, and dislike sites that are slow or that look fancy but behave clumsily.”

One of the most interesting parts of my research was to learn that the age group audiences of children and teenagers are actually very, very small. Most break the age brackets down to ages 3-5, 6-8, 9-12, 13-15, and 16-17. Why? Because children and teenagers are fiercely proud of their age, and any mistake a designer makes in creating that age-appropriate environment can be detrimental to the success of the website. During one usability study testing a 6-year old, the child actually said, “This website is for babies, maybe 4 or 5 years old. You can tell because of the cartoons and trains.”

Back to teenagers. What can we do to optimize our websites for this finicky age range?

1. Present any copy text in small, readable chunks
   Many teenagers dislike reading (online and/or in general), or simply don’t want to read large amounts of text online. Try to break the copy up with interesting photos, or something interactive such as a poll or survey. If there’s information in the text that can be visually represented, try to create a chart or graph with this information. For example, if you are writing an article to teach teens about caring for their pet, start the column off with a poll asking them what type of pet they have, and finish the article with a quiz about famous pets in movies.
2. Create easy to understand, uncluttered navigation structures and titles
   Teens have a dramatically lower patience level than adults. Make sure that your website is easy to navigate through, and that you provide relevant links, breadcrumb structures, and search features that can guide them to what they need. On top of their lack of patience, teenage minds are still developing, and they definitely have less sophisticated research strategies when looking for information.

Beyond these basics, it’s important to try to understand what teenagers actually do want out of your website.  While saying that, let’s be realistic here, and note that there’s not much that teenagers actually do like… or willingly admit to liking. In fact, 13-17 year-olds show either dislike or indifference to most categories conducted in the study.

What teens don’t like

• mine sweeping for links
• reading long blocks of text
• being called “kids” or “children”
• heavy animation
• color schemes that seem to child-like
• small text

What teens might appreciate

(To some extent… maybe… depends on their mood)

• tasteful animation and sound effects
• relevant advertising
• scrolling

The big question… what do teens REALLY like?

(Drumroll….. INTERACTION)

• quizzes
• feedback forms
• ways to ask questions
• voting (polls)
• sharing pictures or stories
• message boards
• offering and receiving advice (see sodevious.net/)
• a way to add their own content
• cool-looking websites (they pay more attention to graphics)

Teens also prefer clean, easy-to-use designs above over-cluttered, confusing,  glitzy sites.

What has been your experience with the teenage audience? Do you find them more or less tech-savvy than the average adult? What else can we do to engage them?

“Using old paper products in your design is a great way to generate atmosphere…” says author Patrick McNeil, creator of designmeltdown.com. The book includes more than 700 websites arranged thematically. Designers can find inspiration by color, design style, type, theme, element and structure. Our design for JohnPhillipsLive.com is in the “Old Paper” category of the Sites by Theme chapter.

Fellow author and web designer Jason Beaird reviews on Amazon:

“This process of mentally classifying design inspiration has become a critical part of my growth as a designer as well as my ability to explain web design to the non-designer. In The Web Designer’s Idea Book, Patrick McNeil takes the task of cataloging current trends and styles to a meticulous new level. Within the book’s 256 pages, McNeil has sorted over 700 screenshots of stellar site design by color, design style, type, theme, element and structure. “

We are very excited and honored to be featured along with other world class designers and firms. We’d like to thank Patrick McNeil for allowing us to be a part of his book.

We’d first like to welcome the Congregation of the Sisters, Servants of the Immaculate Heart of Mary. We’ll be working with them over the next 6 months to redesign their current website, sistersofihm.org. Intensive case studies, interviews, and user-testing will be involved in the creation of their new online community and we look forward to letting the spirit of The Congregation really shine through in the design of their site.

We’re also working with Safe Teens in Wilkes-Barre, PA on a logo and website redesign project that I’m really looking forward to. The target age for this site’s audience is about 13-16 years, and the overall look and feel will reflect a fun retro design with loads of interaction to include their YouTube channel, Facebook page, Twitter feed, surveys, polls and an “Ask The Nurse” section. We met with their team in January to discuss the project and I can’t wait to show you what we’re coming up with so far… the ideas are really flowing quickly!

Local cover band UUU has also gotten in touch for a trifold brochure design to promote their corporate events and wedding services. After taking a look at their image library, we’re very excited to create a really unique brochure that will promote this great group of guys.

We’d also like to welcome Northeast Freight Transfer back into the mix. After designing their website, business cards and a flyer in late 2010, they’ve recently contacted us for some graphic updates to the site and a new flyer design to promote their services related to the Marcellus Shale industry. Keeping with the style of their current promotional material, the new flyer should be a great addition to their stylish, industrial marketing campaign.

In addition, we’re also working on some more logo designs, business cards, a brochure, and wedding invitations. Stay tuned for more updates about these new projects. Hope you are all braving the winter weather – spring is right around the corner!

Web Fonts

Have your heart set on using a particular font on your site? You may think your online video sales Web site won’t be complete without the “Showtime” font. But what if your visitors’ browsers don’t have Showtime installed and default to Times Roman instead?

If your page requires an unusual font, you can now embed it using CSS3

In the past, customizing the typography (fonts) on your website has been very complicated and included work-arounds such as using graphics or flash to render the text correctly on the site. But recently, the situation with fonts and the web has significantly improved. Services such as TypeKit, Fonts.com Web Fonts and Google Web Fonts, make it possible to use web fonts on your own site with very little effort, for either free or very nominal costs.

Now, small businesses will be able to maintain best practices while still remaining true to their brand. Using the same fonts on your website as you use in your print material is something we all should strive for, as developing a consistency between materials promotes brand recognition and makes you appear professional and trusted to your customers and clients.

HTML5 & CSS3

Until now, it was difficult to make the decision to use more advanced versions of HTML and CSS, for fear of shutting out parts of our potential audiences. Now, HTML5 and CSS3 are ready, and we can begin to adopt many of the cutting-edge web design elements they offer.

The newest versions of HTML (5) and CSS (3) allow small business owners to experiment with a great deal of interesting, interactive elements. The best part? the latest versions of the major web browsers — Internet Explorer, Firefox, Google Chrome, Safari and Opera, along with almost all modern smartphones — all support CSS3 and HTML5 features and elements.

HTML5′s most touted features are media (audio & video) playback and offline storage. HTML5 is an excellent alternative to Adobe Flash, which currently doesn’t work on most smartphones, and is slowly becoming obsolete as a video player.

CSS3, allows you to create more graphically interesting elements for your website, such as scalable buttons, bar graphs, sexy dropdown menus, speech bubbles, interesting hover effects, photo galleries, shadows on your images, and much more!

• What is HTML5, and Why Should You Care? (Switched.com)
• 5 Tools For Integrating HTML5 Video in Your Website (Mashable)
• Introduction to CSS3 (DesignShack)
• 7 Awesome CSS3 Techniques You Can Start Using Right Now (Mashable)

Mobile Website

With the increase of advanced cellphones and small screen reading devices, the push for 2011 for small businesses should be to optimize their website for these devices. Creating a mobile version of your website is an effective way to make sure that your visitors are getting the most out of your website, no matter what they are using to view it.

• 8 tools for easily creating a mobile version of your website (Mashable)
• A Guide to Mobile Web Design Tips and Tricks (Mashable)

Tumblr

Tumblr lets you effortlessly share anything. Post text, photos, quotes, links, music, and videos, from your browser, phone, desktop, email, or wherever you happen to be. You can customize everything, from colors, to your theme’s HTML. Even if you don’t use Tumblr for your company blog, you can incorporate design elements of Tumblr — distinctive icons for post type, big, beautiful typography for titles and headings, and a minimalist layout.

• About Tumblr
• Tumblr Adds Curated Topic Pages for Better Content Discovery (12.20.10 – Mashable)

Questions / Comments?

Contact Bullzeye Design today with any questions or inquiries on implementing the trends in this article. Do you know of other trends for the upcoming year? Share your resources with a comment!