You are browsing the Blog for Design.

Tips for Good Web Design

May 30, 2012 in Design

Priority – Guide the user

Good web design isn’t simply about making things look pretty. It’s about the user experience and how quickly they can navigate to their desired location; your goal. Keep your page short, but not too short.
Things to consider: Position, Color, Contrast, Size and Design Elements.

Spacing – Too much is awkward and too little is hard to read

Similar to print, spacing makes things clearer, but it’s important to provide a balance when it comes to the web. What may work well in print, does not often work well for the web.
Things to consider: Line Spacing, Padding, White Text.

Navigation – Can I find what I’m looking for in one to three clicks?

Good navigation is critical. Where can I go and where am I now? These are the two questions you should ask yourself as you review your site. Navigation should be easy to use, if it requires too many clicks or drop downs or uses a color scheme that makes it hard to read, users can get lost easily.

Design for Web, Not Print

Many great print designs cannot be made into functional web designs simply because not everyone viewing a website has the same canvas (screen) size. Keep images small, if they need to be viewed larger create a link to a larger image, be sure to use Alt text for descriptions as well.
Things to consider: Can it actually be done? What happens when the screen resizes? Can it be simplified?

Typography – Yes, fonts are important on the web!

As a general rule, sans-serif fonts display better on screen than sans. You also have to account for the fact that not everyone is using the same computer operating system or web browser. This is why so many website rely on calling several fonts in their style sheets, such “font-family: Arial, Helvetica, Verdana, sans-serif;”
Things to consider: Font choices, Font sizes, Spacing, Line Length, Color, Paragraphing.

Usability – Functionality is just as important as aesthetics

Adhere to web standards, w3c.org is a good place to start learning about this. Think about what your users will actually do. What do you want your users to see when they come to your site and can they get there within one to three clicks?

Alignment – Keep content in “buckets”

Most websites are now designed with a grid system in mind so that content sits within specific buckets on a page. This can allow you to make use of open space on the page and keep your content readability at its best.

Consistency – Make it Match

Headings, fonts, colors, design elements should all be consistent. If you’re using more than two different font types on a page, you’re probably doing something wrong. Use appropriate colors, you may even want to consider learning about color symbolism if you’re working on an international site.

Additional Tips

  • Keep links current, broken links make it easy for users to give up on visiting your website
  • Link names should make sense, use Alt text for descriptions
  • Include your contact information or some way for users to contact you, often times users can be the first to report a mistake or something broken on your site, don’t ignore them

To learn more about good web practices visit the World Wide Web Consortium w3c.org to learn about current web standards and accessibility.

Share

Tags: ,
No Comments »

Best Practices Guide to Digital Marketing

March 12, 2012 in Content Producer, Design, Marketing, Public Relations, SEO/SEM, Social Media

The following is a brief outline of the various best practices tactics used for Digital Marketing Campaigns.

Create a Digital Marketing Plan

First things first, you have to have a roadmap to know where you’re going. Create some goals and a plan on how to achieve them.

A Digital Marketing Plan should consist of:

  • Define Objectives – Specific, Measurable, Attainable, Relevant and Time
  • Asses Current Environment
  • Business & Analysis – Strengths, Weaknesses, Opportunity and Threats or Customer, Company, Competitors and Change
  • Tactics to be used
  • Budget & Variables
  • Measuring ROI
  • Conclusion

Analytics

Analytics are not just important for tracking your progress, but essential to knowing how people view and find your website. Without this information you may not know what is hurting or helping your brand.

Suggested tools:

  • Google Analytics
  • Google Webmaster Tools
  • Bing Webmaster Tools
  • Quantcast
  • Alexa

Suggested Practices:

  • Setup your analytics accounts
  • Establish conversion goals & funnels
  • Annotate important events in Google Analytics
  • Create custom dashboard reports
  • Discover under-performing areas of your site

Organic Search (SEO/SEM)

Improving your Search Engine Optimization (SEO) and Search Engine Marketing (SEM) will increase the amount of organic traffic that comes to your site. Organic being that when someone is searching for a solution that you offer, your page should be one of the first to come up.

Suggested Tools

Suggested Practices:

  • Setup webmaster tools
  • Architect your site for search
  • Track your search rankings on a monthly basis
  • Build quality backlinks to your website through PR efforts or community sites
  • Research and define your core organic words – if you want people to find your website with a certain term or phrase, make sure to use that term/phrase in your website’s content!

Social Media Marketing

Social Media is the new “Word of Mouth”, but people online don’t like ads, so make sure your interactions with your audience are human and talk to their interests instead of just directly trying to sell them your products.

Suggested Tools

  • Twitter
  • Facebook
  • YouTube
  • LinkedIn
  • SocialOomph
  • Twitalyzer
  • TweetReach
  • FriendorFollow
  • WeFollow
  • Twellow

Suggested Practices

  • Claim your brand name on social sites regardless if you’ll plan to use them or not
  • Seed Fans/Followers (25)
  • Have something to say, consistently
  • Speak to the interests of your audience, do not just try to sell your product
  • Create a Viral Contest
  • Include social media information on all marketing collateral
  • Make sure people can “Like” or “Tweet” your web pages
  • Interact with like-minded and influential people on Twitter or Facebook

Pay-Per-Click (PPC)

If your website is new or hasn’t been SEO’d, a well-funded PPC campaign can direct a significant increase in web traffic to you.

Suggested Tools

  • Google AdWords
  • Microsoft AdCenter

Suggested Practices

  • Create Google Adwords and Microsoft Adcenter accounts
  • Send traffic to landing pages
  • One landing page per ad group
  • Monitor and improve keyword usage on a monthly or quarterly basis

Content Marketing

Content is king on the internet, the more content you have about yourself or company online the better and more likely people will know and trust you.

Suggested Tools

  • StumbleUpon
  • Delicious
  • Reddit
  • Wikipedia
  • Yahoo Answers
  • Quora

Suggested Practices

  • Start a corporate blog
  • Submit blog content to aggregators/social hubs
  • Bookmark your website’s content on social bookmarking services
  • Create an editorial calendar
  • Write guest posts for other blogs
  • Write about others to build relationships

Email Marketing

Email is the easiest way to keep in touch with your customers and inform them of new products or solutions for their needs as well as any special promotions you’re offering. However, be cautious you don’t send too much email, or emails that aren’t relevant to your customers as this could drive them to unsubscribe from you.

Suggested Practices

  • Choose an online email provider
  • Create a branded email template
  • Segment your email lists
  • Do not send too many emails, but don’t send too few, find your balance
  • Do not use your companies email server to mass email

Lead Generation

Every company has a lead generation practice that works best for them based on their market, but there are a few key things to think about to improve the amount of leads you gain.

Suggested Practices

  • Track submissions
  • Gather submissions for product launches
  • Give something away in exchange for customer information
  • Answer questions on LinkedIn, Quora or Yahoo Answers

Conversion Optimization

After you’ve increased awareness to your site through digital marketing you’ll now want to gather your data and begin planning on how to optimize your initiatives.

Suggested Practices

  • Test your landing pages
  • Gather feedback from site visitors
  • Try a 5 second test – can someone find X in 5 seconds of coming to your page for the first time?

Other Activities to Consider

Create a Benchmark

Take a look at your competition or businesses that are similar to yours and see what they are doing that works well. While you never want to copy others, you can get ideas that will benefit you with your competition’s successes or failures.

Things to consider:

  • What social media outlets do they use? Which ones seem to have the highest engagement?
  • How much traffic do they have? Estimate using tools like Quantcast and Alexa.
  • What is their demographic? Use above mentioned tools.
  • Do they use a unique web service that may work for you as well? This could be unique community sites such as RealSelf.com or Yelp.com

Website Makeover

Thinking of having a website makeover? Make sure you do your due diligence and come up with a project scope and timeline and stick to the plan. Also, now is a good time to really evaluate your website’s content and messaging focus.

A project scope should include:

  • Project Overview
  • Project Approach
  • Project Schedule
  • Hosting Overview
  • Project Approval Requirements

 

Share

2 Comments »

Design Apps for Linux

April 19, 2011 in Design

If you’re graphic designer or web designer interested in switching to Linux to save on costs or maybe get more hands on experience administrating a LAMP, here is what I recommend for your base setup. Please note, these are my suggestions for Design applications on Linux only, I’ll tackle the LAMP software in my next post.

My Linux Flavor Choice: Fedora running Gnome3

Why Fedora? I come from a dabbler of Red Hat, and Fedora is the free OS sponsored by RH, based on RH. Fedora includes RPM, and my favorite installer ever, YUM. Why do I prefer YUM over Debian based APT-GET? Because it’s 4 characters shorter to type and I find I have a lot more Repositories to access.

Why Gnome3? When you hear Linux, you probably think command line interface. That’s true. However, over the last couple decades many GUI’s have been released and have recently gotten to the point where they do everything you expect the GUI to do, just like in Windows or OS X. While you could be using KDE, XFCE or Gnome3, I recommend Gnome3 for those who are coming from an OS X environment as you’ll find it very intuitive. If you prefer a Windows interface, than KDE would probably be the choice for you. It’s worth mentioning that Gnome3 is very new, Gnome2 has an interface similar to Windows, though flipped around so that my primary task bar is at the top, similar to OS X apple icon and system preferences pull downs.

My Design App Choices: Scribus, Inkscape, Gimp, Dia, Bluefish, ImageMagick

To over simplify things: Scribus works like Indesign, Inkscape works like Illustrator and Gimp works like Photoshop. Dia you may not need, it’s a neat little drawing application that you can use to make flow charts, so those who have to wear a project manager hat will probably find more use for it than your average designer. Bluefish works like the code view of Dreamweaver, while it doesn’t have a WYSYWIG interface, it does highlight and organize code just like Dreamweaver. If you need a WYSYWIG, the choices are very limited, with Sea Monkey being the only thing still in current development, which is a web browser slash html editor. ImageMagick will more than likely already be installed, but if not, you can install it using “yum install ImageMagick” note: this installer is case sensitive. ImageMagick is used by some UI Designers, as well as other types of Designers to do batch scripting with images without having to use a program like Photoshop to do it for you.

These can all be installed quickly by opening a terminal and typing:

  1. su root (hit enter and put in root’s password)
  2. 2. yum install scribus inkscape gimp dia bluefish (it will “do stuff” then tell it “y” for yes)
  3. Keep your terminal window open, you’ll need it for the rest below

My Office Choice:  Open Office

This product has always been trying to rival MS Office for years and always seems to have the latest features from the previous version of Office included in it. It’s probably the closest mimic of a closed app I’ve ever seen.

  • The install for this is: yum groupinstall office

My Utility Choices: Pidgin, Filezilla, Wine, GParted , Preupgrade, Yum-FastestMirror, Yum-Utils, Yumex (note: the installers for these are all lowercase)

Filezilla is my choice for FTP/SFTP. Wine will allow you to run some Windows based programs while within Linux, so if you can’t really get away from Dreamweaver… GParted is the best partitioning tool since Partition Magic. But what are these other things?

  • Preupgrade – this package will allow you to upgrade from one version of Fedora to the next version of Fedora every time there is a new stable release (about once every 12 to 18 months)
  • Yum-FastestMirror – when using YUM to install applications, this package will allow YUM to search for the repository closest to your location to potentially save on download time
  • Yum-Utils – a bunch of little YUM tools, kind of neat, but by no means essential
  • Yumex – If you don’t want to use a command line to install applications on your system, here is the GUI to replace the command line. You can search for, install, uninstall and update all from a nice little interface

With this setup you should be well on your way making the switch from OS X or Windows to Linux, though after so many installs on a fresh system, it wouldn’t hurt to clean things up a bit. I’d recommend running the following, after getting everything installed and setup the way you like:

  • yum update – updates all of Fedora and everything you have installed on the system
  • yum clean all – cleans up any temp files left behind by installing the various packages above

With that said, if any of you are Designers, web, graphic or UI, please feel free to comment below and offer suggestions on what applications you find the most favorable. Also, I’d love to see if anyone has tried getting Xcode to run under Linux or what solutions are available for that.

Share

Tags: , ,
No Comments »

Oh, Print, you’re still here?

July 29, 2010 in Design, Social Media

Recently I was talking with someone who was of the mindset that print is not just an essential media but will always be required. His reasoning wasn’t knew, it was based on people liking something to hold in their hands, and when I asked about his experience with devices such as the Kindle, Sony E-Reader or the iPad he admitted to not looking into them nor was he interested in these devices. His opinions on news-related topics when it comes to the Web were in a similar vein, as he felt that there is nothing that will replace print media yet because there is no one singular technology that has encompassed all of the things he likes…

I chuckle inside.

He’s right in that no one form of online media has replaced print, but that’s not really how the internet and online technology work. We have news sites which distribute up to the minute news; we have blogs that spout out everything from opinions on facts to celebrity gossip to fabricated stories. We have social media sites which connect individuals to these stories, and we can do all this from our mobile devices. At this point email seems to be an old hat tech. The only real piece to hold back online information from print is the typography and design aspects associated with migrating printed material to the web, assuming you’re not counting PDF or flash readers.

Of course online text hasn’t always been as easy to manipulate as printed text, ask anyone who has worked as a designer with your major Adobe suite tools like Illustrator, Photoshop, InDesign and tried to convert the text to a readable, non-image format. It’s a significant challenge at worst and an inconvenience at best. But today I see our savior has released their Font Preview web typography tool, which allows designers to easily, from a visual perspective, adjust the kerning, tracking and shadowing of their fonts as if they were adjusting it in any other print tool.  Granted the terminology is different, as Google prefers to refer to tracking and kerning as letter, word and line spacing – but it’s a small price to pay to create great looking online text on the fly.

So I hate to call out the white elephant in the room, but, Print…uh…you’re still here?

Share

Tags: ,
No Comments »

What CMS is right for you? Tell me.

May 17, 2010 in Content Producer, Design

Over the last couple years the company I work for has been working on the development of a site using a CMS (Content management System) platform, a good change in my opinion and something that many companies are moving towards with their sites now as it allows for quick and efficient changes to a site without requiring a full time developer or web designer on your staff.

That said, as CMS platforms become more popular, more choices for systems begin to pop up. It was only a handful of years ago where we were limited to Drupal or WordPress, but now we have a plethora of new emerging alternatives, though in all honesty these are still by far the most popular and efficient platforms to date.

So who are these emerging platforms and why should I care?

For anyone who has to be a decision maker for choosing a CMS, it’s going to happen that at some point, someone in your office will ask you why you chose brand X over Brand Y.

So what are the alternatives to WordPress and Drupal?

The third most popular CMS is probably Joomla, though that popularity isn’t all positive. Many users seem to have a strong love and hate relationship with the platform, but based on the amount of third party modules, plugins, and themes, there are definitely enough users out there to attempt to rival the big two.

While there are others that various groups will mention such as Silverstripe, Radiant CMS, Concrete5 and Frog; I’ve recently taken a look at two I thought may be worth watching as well, Modx and Business Catalyst (BC).

My first impression of Modx was that I liked it, but I liked it for the wrongs reasons. It has a lot of control over the code handled by each page, as well as assigning individual templates to my pages; however, the interface and controls are built based on the assumptions that someone with a web design background who has a good grasp of HTML and PHP would be facilitating the changes. This in my opinion is not always the person behind the CMS. Similar to Drupal, you’d probably end up having to hire a developer to build the initial layout and functionality and then hand it off to someone to manage the content.

Business catalyst on the other hand is much more intuitive and friendly, while still allowing its users to touch the code if needed. Very similar to WordPress in the feel of it, but the thing that makes me hesitate is the price tag. Yes, “BC” as it’s referred to has a free version, but it comes with some limitations and the whole model of the organization is to make a big push for developers to buy into the partnership and then sell it to their customers. While it may work for some, I don’t think BC would be the most appropriate CMS for every customer, but if I’m financially invested in it, it’d be hard in my mind to NOT want to push it on all my customers.

I’ll continue to take a look at other CMS platforms as they pass through my inbox, and I’d welcome users to comment about their experiences with any of these platforms and tell me what they like best about each, or even what they don’t like. In my mind, I’m still a fan of Drupal and WordPress, though for two different groups and two different reasons, but feel free to tell me why others are better.

Share

Tags: , , , ,
No Comments »

What Constitutes Good Design?

April 14, 2009 in Design, Marketing


In my last segment I overviewed various marketing tools that can benefit any commercial real estate office, but this time around I became a little side tracked. Instead of continuing on the marketing subjects I outlined, I’m going to start with design, as that is what everything else I’ll have to talk about stems from. I’ve broken this down into what I see are the three aspects of design, visual, functional and structural.

For marketing collateral purposes we’ll look primarily at the visual design. For the most part visual design is something that the client will find appealing to their senses. The sights and sounds of a TV ad or flash banner on a website or the look of a printed page. While visual design is one f the most important elements for marketing, it is also the most subjective.

Edward Tufte can be considered a genius within the visual design field with his ability to present incredible amounts of statistics within an easily identifiable and understandable display. This is one of the first steps towards good design. However, Tufte will be the first to admit how much he dislikes marketing and many of the elements used in advertisements and various forms of collateral that irritate him to no end.

With that said, it’s important as a designer to understand that the client is not always right and it’s part of your visual design duty to make sure you can talk them out of doing something that will hurt their business.

The next most important part of design is function, or simply, how stuff works. For example, a website is one of the areas where functional design is extremely important. It does no good to both you or your clients if people aren’t able to find the information they want on your website. A little study of typical human behavior on the web and you will understand the necessity for multiple links to the same information along the top and sides of a website, among the reasoning behind many other online strategies. However, functional design is not just important to interactive media such as websites, flash applications or interactive PDF’s, it is also important to printed items, such as when creating a book or magazine layout, where you are incorporating bleeds and spreads. It is also important to understand the media on which your printed pieces will be produced, such as the difference between the look of a 10 pt Gill Sans Light on glossy magazine stock versus newspaper.

Some could consider structural design the least important, but structure varies drastically from designer to designer. If you are your own boss and work alone, chances are you don’t care how you organize your files, how you name them, or how your layouts are set up. After all, if it looks good and works, who cares right?

This is in strong contrast to the ideals of anyone who has worked in either a design studio or with an in-house team who constantly handle each other’s files as needed. In situations as these it is essential to an efficient and successful workflow to come up with a system and stick to it. In addition, the actual design setup of layouts should be done in a way that the other designers will be able to easily adjust and edit.

Anyone who has worked with me knows of my issues I have with designers who use spaces after a bullet point in an InDesign file instead of using tabs as well as my pet peeves of those who would make each line of text for a bulleted list placed in it’s own text box and then not even bother to align them properly with the align tool. These are things that cause a person to be seen as an amateur within their circle.

Ultimately it is important for designers, especially those in print, to understand and know how to use and adjust items such as tracking, kerning, bullets, styles and tables when doing text layouts. Of course there are some exceptions to the rule, such as when creating text for a cover or header piece that may require the text to be adjusted and set in a non-standard way.

While code formatting is for the most part irrelevant due to the many applications that auto format the display and highlight code, what is relevant is the expandability of the code. In short, is the site designed in such a way to allow the addition of new features, links, ads, etc easily or would it require a rework or site rebuild?

In conclusion good design is a product of proper structure, usability, function and ultimately strong and captivating visual design. A good understanding and planning from each of these aspects will typically end with the creation of a successful collateral piece, ad campaign or website.

- Michael G. Hurston

Share

Tags: , , ,
No Comments »

Switch to our mobile site