Posts Tagged ‘webdesign’

Designing a Sticky Site

Tuesday, November 9th, 2010

As a graphic designer, our job and overall goal is to communicate clear and succinct ideas and messages to a specific audience. When designing for the web, we want strong ideas to get the attention of the user, so that they return regularly and consistently spend more time on the site. We do this in hopes of creating a “Sticky” site, where ideas are absorbed and then spread outward, in hopes of making the site successful. One of the key elements in making a site “Sticky,” is to keep ideas simple and compact. A clear idea focuses on the core of your message, removes any superfluous information, making the message memorable and allowing it to stick with your audience.

In the post How To Design A Sticky Site: Stickiness Part I by Steven Bradley, he shares how to convey simple ideas in web design in order to achieve stickiness:

… The first thing is to understand the core idea or goal of the site. Why does the site exist? What’s its purpose? What is it trying to do? These are questions you should be asking before beginning any design.

We can carry the idea of finding the core to each page of the site as well. What goal does any given page have? How can we design the page to push people toward that goal.

Generally a site and even a page will have more than a singular goal. Your site might exist to make a sale, generate a lead, convert a visitor to subscriber and so on. Still it should have a primary idea or message to communicate.

Think of a tagline? Isn’t your tagline meant to simply and succinctly sum up what your site and business is about? Isn’t a tagline the core idea behind your site.

When someone lands on any page of your site they should be able to understand what the site is about instantly. This is usually done through a combination of the site name, the company logo, the tagline. On the single page it would also include the main heading. Consider the idea of simplicity in all of these.

We might also add in the idea of across a site. A unified design is one where everything is working together to communicate the same central message. When all your design elements agree they create a whole that is greater than the sum of its parts. They help to place the focus on what’s most important.

Stripping away the unessential might also lead us toward minimalism. I don’t think the idea of simplicity means we should only create minimalist designs, but it does imply that any design we create should be effective when we strip away the eye candy and it does imply that no matter what style, your design should only include what’s necessary to communicate your message.

“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” -Antoine de Saint-Exupery

When there’s nothing left to take away you’re left with the core.


MODx Update: Fantastic new administration panel

Wednesday, October 27th, 2010

We here at the Zoom Creates Nerd Herd (the development team) have always loved the modX CMS tool. It’s extremely flexible, has a great system for templates and code chunks, and is limited only by your imagination. We’ve been using it for sites since before the code base was at a stable 1.0 release, probably since around late 0.8 beta releases. There are many great plugins that help with breadcrumbs, dynamic navigation and menus, AJAX requests, search engine friendly URLs and more. Today I’d like to point out some of the features and changes of their latest release, Revolution 2.0.4.
(more…)


Was this review helpful to you?

Wednesday, July 14th, 2010

I’ve been having major cell-phone trouble. I couldn’t make a call longer than 5 minutes and I was unable to send out more than a couple texts at a time before my battery fully drained and my phone just shut down. It’s a horrible feeling being so disconnected. The solution: I needed a new battery. I wasn’t about to try to go to the Verizon store (I’m not much for waiting in line for hours) so I tried problem solving using good ol’ Google. I found a couple of online stores with batteries selling from $8.99-$49.99. I’m not sure why the battery pricing was so across the board, but I wasn’t about to pay over $30, and don’t even get me started about the additional shipping fees involved.

Amazon Review

In my search I found the holy grail of cheap batteries online for $3.99-$10.99 on Amazon. “How could this possibly be so cheap?” I asked myself. I of course was drawn to the cheapest battery ($3.99 new), but went straight to the buyer reviews, because how could such a sweet deal exist? Well, to my dismay…it doesn’t. I found out that some people (out of 21 reviews) had luck, but the majority found the product to look used, be scratched, and the new battery would still not hold a charge. So what did I do? I went for the $4.99 (new) version with the more positive reviews.

User reviews can definitely be a valuable resource for users and sellers. Reviews help build trust in a product; They let us see how a product will look or work in real life by someone who has actually experienced it first hand. A buyer can learn if their potential purchase will be reliable and good quality. A review can also help narrow down all of the other potential choices out there (such as my million other battery options). If a product is perceived as favorable by a consumer, product sales can take off. And vice-versa, a negative review can impact how much you sell (like the $3.99 battery). (more…)


Cufon vs CSS3 vs Google Font API

Thursday, June 10th, 2010

Dynamic
Fonts are fun!

(this box built with CSS)

As Greg has mentioned in a previous post, using Google’s Font API you’re are no longer limited to “web-safe” fonts! We all love Arial and Times, but there are thousands of other really cool fonts to play with too. Here I’ll compare some options for using custom fonts on the web.
(more…)


Solving Problems with Patterns

Friday, May 28th, 2010

Pattern Tap pattern collections

Designers are big problem solvers. We hunt down solutions to make a layout not only eye-catching, but also functional for a viewer or user. When designing for the web, we often come across common usability problems, such as deciding on what navigational format will work best, button style, background type, etc. For insight and help solving these problems, we can look at design patterns—general solutions solving common and reoccurring problems of interface design.

Of course, there are always various ways to approach these problems, and designers before us have explored multiple solutions to resolve them. Reusing these functional patterns can help avoid unwanted issues with the usability of our designs and give us awareness of best practices, inspiration, and real-world examples of how people are solving these issues. This way, we can design the best solution for our project needs. There are a variety of websites out there offering great pattern libraries with examples from everything from sign-in box style to table design. I definitely would suggest giving these sites a look, especially if you want to see a large variety of a single web element without racing around the web to see examples of how something is used. Below is a list of my fav’s along with a few new finds. Enjoy!

Pattern Tap
UI Patterns
Design Snips
Yahoo Design Pattern Library
UI Pattern Factory
CSS Bake


2010 Web Design Trend: Hand Drawn Elements

Thursday, April 22nd, 2010

Many of today’s websites are now incorporating hand drawn or sketch elements into their designs. A hand drawn element can give a website a more personalized, unique, and organic feel,  making a design stand out from traditional web graphics. They key to this trend is to use the elements as an accent to the design and not as the main focus. You do not want to overwhelm the viewer by having a site covered with doodles, instead, use it sparingly to enhance specific elements in the design. Check out examples of hand drawn elements:

Boompa

Boompa

Yellow Bird Project

Wallace HCL

This is Grow

Web Designer Wall Jobs

Free People

Charming Wall


Delicious food that won’t kill the planet

Monday, April 19th, 2010

I’m one of those people that likes to do green things. I’ve also been trying to eat better, meaning eating more vegitables. It’s really quite amazing how good asparagus is. And it’s really easy to cook!

Anyway, today I wanted to spotlight a local eatery that tries to help the planet out while feeding humans. They have some delicious options! I went there for lunch today and got the Mole burrito. It was super tasty. If you happen to be a vegan, and that includes not eating food that was prepared on the same stuff as meat products, don’t worry! They have your back by making sure that all vegan options are cooked on their own gear, so you never have to touch meat if you don’t want to!

Anyway, I highly encourage you to check them out. You’ll be full, and you can feal good about not eating food with a ton of chemicals in it. They have a pretty sweet flash website too, so check that out.
Laughing Planet


Basic MODx Template Tutorial

Wednesday, April 7th, 2010

We here at Zoom Creates love giving people the option to maintain their own websites once we are done building them. One of our favorite CMS platforms is MODx. It’s based on PHP, is open source, and is extremely flexible. Today I’m going to talk to you about the basics of building a HTML based template.

(more…)


2010 Web Design Trend: Introduction Blocks

Tuesday, April 6th, 2010

When you visit a site for the first time, one of the most important elements you can find is an introduction block. We look to the block to greet the visitor, introduce the site, and give a brief description of who they are and what they do. Many sites follow the practice of using an intro block, but it is generally uncommon to see them used on either blogs or e-commerce sites. This block is mainly found in the upper-left area of the page, which is usually be the first area a viewer will look, making it a great place to let the user see your most key information. You’ll notice that today’s intro boxes aren’t scared to break the boundaries. They can be found in new areas of the page and also tend to take up a large chunk of real estate no matter the quantity written. They are bold, beautiful, and a great way to make a first impression. Check out examples of large intro blocks below:

Sold Shops

Seth Said

Kyle Standing

Jason Reed Web Design

Big Cartel

Tobias Baeck


2010 Web Design Trend: Modal Boxes

Monday, March 15th, 2010

A modal box is a secondary window that pops up and floats over the top of a web page, requiring a visitor to interact with it before they can return to the main window. It works similarly to a pop up box, but is way better, because they are seamlessly integrated into the layout of a web site and there is no need to load a new page. These boxes are more stylish, user-friendly, and allow the viewer to focus on pertinent information. You’ll commonly see these used to display images in detail, on sign-in forms, for alerts or notifications, to display help tips, search boxes and video. Check out examples of modal boxes below:

Facebook

Jules

Jules

Sierra Trading Post

Digg

Digg

Tumblr