Users are infinitely more complex today because technology has become so readily accessible. In order to gain any kind of foothold, designing a system has to be approached with the same intricacy and diversity as one’s desired target demographic.

User Experience Design has brought strategy to the forefront of any system build, and User Interface Design marries that practicality with aesthetically pleasing creations all with the end user top of mind.

This presentation seeks to give an overview of the two design methods and the process of how to go from brainstorming to realization.

 Intelligent Design – Transitioning UX into UI

It’s no secret that design is on a minimalist upturn, especially since there is so much content living on the web. Users are being pulled into multiple directions by companies that are under the impression that simple means boring, and that with some extra POP they can convert users into buyers. Just ask Google whether or not simple works. Designers and Developers are trying to attain an easier user experience with cleaner design and scaled back functionality.

When it comes to making a site, K.I.S.S. it – Keep It Simple,Stupid!

Here are 5 good rules for simplification:

1. Persistant navigation can lead to salvation. Keep content paths consistent and intuitive in order to keep users engaged. It doesn’t hurt to let people know where they are by highlighting sections or using breadcrumbs to help them backtrack.

2. Clear and obvious CTA’s go along way. You can lead a user to your site, but you can’t make them click. Differentiating the main call-to-action” can be accomplished by positioning it the main line of sight, making the color of it stand out, upping the size to give raise it in hierarchy and keep the directions short and to the point.

3. Whitespace is your friend. In a fast paced world, users have become skimmers. Make it easy for them to find what they are looking for by creating visual clarity (concise copy and minimal design).

4. Fluid movements are key. Know thy user before deciding on movement. Drop-downs, rollovers, pops, all good when used in moderation and for the appropriate groups. Don’t add extra movement because it seems “fun” or because the site seems “too still”.

5. Bold images and type can help to simplify. If you can convey tone through images and type, then the design will literally speak for itself.

Check out these avid K.I.S.S.’ers:

Apple - Solid Navigation, good secondary and tertiary paths. Bold images keeping the potential buyers engaged.

Always Letting You Know Where you Are

Cisco – Clear CTA’s with lots of white space and clean secondary callouts that don’t take away from the main message.

Calling You to Action

 Google Chrome Web Store - Fluid movements focusing mainly on the needs of their 16-24 years old demo who are heavy web users

Moving At Your Speed

For those of you who have your own websites, you know how important marketing yourself can be. Most people use social media to further their digital networks. Having links to your individual avenues often does not directly translate to likes or follows. In order to combat this, Facebook has long had their like button coding available for developers. Twitter now has their new “one click follow” button that now serves the same purpose. Here’s how to do get the codes for both:

Facebook Like Button:

Go to the Facebook Developer Center to the plugin area and click on the Like Button section. It is completely customizable and easy to use. It will autopopulate any information from your page once you provide the URL. You can customize what is viewable, like the current fan count and their photos. Click “get code” after you finish setting the perambulators and it will enable you to choose iframe coding or xfbml.

Twitter Follow Button:
Go to the Twitter Resource Area and click on the Follow Button. Provide your desired username and it will produce the coding for you.

We recommend the use of these buttons to help your users stay plugged in and give you instant response. While we are on the subject, click either of our following buttons if you would like to stay connected to the Dealy. We love to be liked.

So, with the discussion over image formats yesterday, we thought it would be cool to go over how to make an animated gif. Here is a step by step tutorial to get you moving.

1. Open Photoshop and create a new document (any size you want as long as it’s a web friendly size)

2. Paste all of the images you intend to use on separate layers.

3. Click the window tab and select animation.

4. Once the dialog box at the bottom of the screen appears (and if you prefer), press the convert to frame animation setting.

5. Open the animation option menu by clicking the pull down in the right corner of the animation dialog box and select “make frames from layers” from the pull down.

this should populate the animation dialog box with each individual frame

6. Choose time intervals for each frame by clicking on the frame’s drop down seen in the lower right corner of each pane.

7. After getting all of the frames set, choose what interval you want your animation to loop in.

8. When you’re ready – save for web and devices.

9. Last but not least – post your new animated gif to the web

Now you can create your own fun animations – we encourage you to get rockin!

Continuing our series on design vernacular and comprehension, today we will be discussing aspects of web design. There are many things that cannot be done in web that can be accomplished in print and vice versa.

RGB – Light has its own color base consisting of red, green, and blue. Everything that is emmitting light to the eye is displaying in this color frequency (e.g. television, computer monitors, phone screens, portable game systems, etc). While CMYK varies through tones, RGB color displays are modified by using different levels of brightness from its electronic source. RGB is the format for which we design web elements because it is being displayed on a monitor (or a light source).

Each diagram shows the RGB level of brightness

Web Colors – Not all colors display evenly across multiple browsers or on other monitors. It is important to use web colors to insure (as much as you can) that everyone is seeing relatively the same thing. This can be accomplished through using Hexadecimal notation, also referred to as hexdes or just HEX. With the combination of Red, Green, and Blue values from 0 to 255, more than 16 million different colors are possible. Each color has their own number/letter correspondence. So if you want to make sure all colors are the same, use the HEX. Without realizing it, during the wild years of MySpace and LiveJournal people used hexdes to make their posts more sassy.

Remember These?

Pixels & Resolutions - In the digital world everything is made of pixels. A pixel is a single point(or dot) in a raster image. Pixels are responsible for resolution. Display resolution dictates how many pixels can be displayed in that designated area (i.e. the more pixels per inch you can display – the better the resolution). Also note that the higher the resolution the bigger the assets tend to be. The standard pixel resolution for web  is 72 ppi or 72 pixels per inch (or dpi – dots per inch). This is the main reason why images made for web cannot later be translated to print. Most print documents range from 150 ppi on the low end to 300 ppi on the high end.

Pixels Magnified

Resolution is just one aspect of producing web assets. Once the resolution is set, the asset needs to adhere to pixel height and pixel width. When creating a website, for instance, the canvas size is usually 1024 x 768 (with larger monitors in mind) but can vary depending on what browser/monitor size you are trying to accommodate.

Monitor Size - Pixel Ratio Relationship

Web Safe Fonts - All computers have different sets of  fonts. A graphic designer may have close to a 1,000+ fonts on their computers, whereas most computers come standard with about 30 or so. In order to display text for all to see, web standards dictate that only a select number of fonts can be utilized. These are the fonts that come standard to every computer. So when designing for the web – it is important to know if special fonts are used, they have to be imaged (made into a picture instead of text). If you want the text to be “scrapeable” meaning you can copy and paste it from the web, you have to use web safe fonts. To see what they all look like click here.

Dreamweaver Font Dialogue Box

Image Formats – while there are many image formats, the three main types specific to web are:

• JPEG (Joint Photographic Experts Group) is the most common. It’s a flattened image able to support 24 bits per pixel of color (16 million colors) and 8 bits per pixel in grayscale. Jpegs are referred to as “lossy”, meaning as they compress, image data is discarded or “lost”. When compressed lower or scaled beyond its original pixel dimension – jpegs display what are called “artifacts” which is noticeable pixel distortion.
  

  Artifacts & Jpegs = Nasty Mix

• PNG (Portable Network Graphics) is the second most common and the most used in modern web development. PNG’s are a lossless compression image format which also allow for 24 bits per pixel of color (16 million colors) and 8 bits per pixel in gray-scale. The beautiful part about pngs, and perhaps why they are being used more, is that they can handle transparency. Unlike a jpeg – when you save a png on a transparent background it will display that way. The reason this is so nice is, you can have them on any background color and it will appear natural.

Compare and Contrast

• GIF (Graphics Interchange Format) is now less common but still in use. The png was actually created to replace the gif seeing as how it can accomplish more. GIFs deal in 8-bits but can also handle transparency. GIFs were more popular in the infacy of the internet due to their animation ability. People used gifs like stop motion stills to make movable images. For the longest time this was the alternative to video which was taking too much computing power in the early 90s. They have found a resurgence with digital artists.

The Gif of movement by Jamie Beck

That about wraps it up for the web portion of Mi Casa. I hope that it was both informative and exciting!

Until next time….

In the advertising world – there has always been a sigma as to which “side of the house” you’re on. Either you’re a creative or you’re on accounts. Nowadays, with the emergence of integrated ad agencies, creatives are starting to become more client facing and account people are learning more about design. We are going to discuss some design terms to help our marketing friends understand our vocational vocabulary, limitations, and abilities.

Today we will discuss the various elements of PRINT.

CMYK - Color is relayed in two different formats, RBG and CMYK. CMYK (cyan, magenta, yellow, and key (black) are the base colors of print. These four ink colors are superimposed onto each other in varying amounts creating an illusion of more colors, like those in a photograph. This is also referred as 4-color process printing.

A standard printer is a four color processor – meaning it can only handle formulas made from a CMKY base. If a job is set up in a different format (say RGB) it won’t print the way you think it will. Designers have to be aware of format when setting up a print document.

Pantone® or PMS - If you want to make sure exact colors are used without variances, Pantone® is the way to go. This method of coding colors “created an innovative system for identifying, matching and communicating colors to solve the problems associated with producing accurate color matches in the graphic arts community” (Pantone®). There are also many different types of Pantone® swatches, each one with their own code which corresponds to a mixing formula. There is solid, process, neon, pastel, and metallic – each offered in both coated and uncoated(except metallic). Coated is meant for glossy-coated papers. Uncoated is meant for plain untreated papers. Different paper treatments absorb inks differently, so the Pantone® colors are changed slightly to compensate for that absorption. Pantone® colors are usually used in what is called spot printing.  Spot color printing or Pantone Matching Systems® (PMS) is where each PMS color is mixed according to its unique formula and applied individually to the sheet. The Dealy PMS code is PANTONE 165 U (in case you were wondering).

Bleeds – printers cannot ink anything close to an edge. To prevent spills and leaks every printer(the actual machine) is set to shrink things down and make a faux border to prevent this from happening. If you want something printed with color/graphics all the way to the edge, you have to print it on bigger paper and cut it to the correct size. In order to prevent the printers(the actual people doing the job) from pulling out their hair and to save money, designers have to set up their documents to accommodate a bleed. Standard bleeds range from 1/8″ to 1/2″ depending on what is being printed. If you have a 8.5″ x 11″ print and you need a 1/8″ bleed, your document set up size will be 8.75″ x 11.25″. Most of the time this is where more of the printing cost is accrued. The bigger the paper and the more trimming that needs to be done = more $$$.  So to put it simply – the bleed is everything that is going to be cut off. If you don’t have a bleed set, then be prepared to see a white boarder.

Original artwork provided by Josh Overton by way of Abduzeedo

The American Advertising Federation (AAF), is a well known organization for students and industry professionals alike. Their mission: “protects and promotes the well-being of advertising. We accomplish this through a unique, nationally coordinated grassroots network of advertisers, agencies, media companies, local advertising clubs and college chapters”. While this is a national organization, there are many individual chapters that help each member become more involved in their particular advertising community. Each subsidiary is called Ad2 [insert your city name].

Through school and other members, I’ve come to know of Ad2 Phoenix, which is famous for its unique events, job listings, and overall public service. Any member of the AZ design or advertising community can tell you, they are a natural go to for industry information in this state.

We would like to help our traveling AAF members who find themselves in a new city and want to Ad2 community involvement. Here is a list of all the acting Ad2 Chapters:

Austin

Cincinnati

Denver

Ft. Lauderdale

Honolulu

Houston

Madison

Miami

Milwaukee

Minneapolis

Nashville

Oklahoma City

Orange County

Orlando

Phoenix

Reno

Roanoke

San Diego

San Francisco

Seattle

Tampa Bay

Tucson

Washington D.C.

West Michigan

So even if you’re not moving or you’re just visiting – it is always encouraged to see what’s going in other advertising circles. Broaden your horizons and Ad2 knowledge base.

Graphic Designers utilize many different tools like fonts, Photoshop brushes, vector elements, textures, you name it. If you are on the look out for free design elements, here are a few sources (please note all images are a direct link to the free sections of each site):

When it comes to free design assets or help, Smashing Magazine is guaranteed money in the bank! They have everything from free wire-framing aids to free PS icons and everything in between.

Abduzeedo is a natural go-to for design inspiration. They have free textures, tuts, wallpapers, fonts, and all around good information.

Inspiredology freebie section offers a variety of fonts, textures, tuts, backgrounds, and vectors.

As their titles may suggest – Vecteezy has a plethera of free vectors, whereas Brusheezy has  a wide variety of Photoshop brushes and patterns.

Veer (aka Corbis’ younger sister) is a fun and inexpensive source of stock photography and fonts. They offer some pretty awesome and original freebies (backgrounds, fonts, etc). MyFonts is a good source to find pretty much any family there is. They also offer many well made typefaces for free.

Icon Finder, or as I like to call it “Icon Google” is one of the best sources for finding high resolution PNG icons. Their database is gigantic and you can segment your search for the royalty free icons.

There are many more sources out there for free design elements. We will keep an eye out for them and report back. Please comment if you have a few of your own that you would like to share.

Local graphic designer Erin Radler (who inspired Tee Time part 1) submitted a few designs to Threadless that are now up for ranking. This is how their apparel lines get started. Be apart of the process and help out a local designer (congrats Erin, fingers crossed).

RANK IT NOW!

Venter Badass

RANK IT NOW! 

Dr. Misses Badass

The two main differences between good web design and great web design are the user interface and the user experience. Case-Mate, already known for their amazing variety and quality, decided to appeal directly to the smart phone customer base. Case-Mate has created an experience  for users to choose their device, gives them pre-made artwork from various artists, and lets them manipulate every aspect to create their own personal design. All of this done via spectacular user interfacing on their aptly named site “I Make My Case” website.

Pick Your Poison

Find Your Artist

Assess Your Canvas

Create!

While credit for this beautiful masterpiece goes to a few different sources – I was fortunate to find the web designer who started it all, one Mr. Edwin Tofslie. Finding his portfolio site (which is also inspiration mecca), made it evident that there is a whole new level of sophistication in web design. Edwin’s designs are monument for what we as users want to see and what most designers aspire to create. Here is an example of what Edwin’s site used to look like:

Out of Site

Always in mind

Imagine dynamic mini-websites operating inside of one giant site. Being immediately immersed, I kept tabs on his work as his portfolio grew. His new site has a lot more humor to it with an interesting video clip that plays on welcome. With every click, you see the evolution, the class, and the pure optical splender that his design asthetic yields. You are most encouraged delve deeper to Tofslie’s world (note he also has a blog).

Here and Now

As designers and/or marketers, it is easy to keep our noses to the grindstone and stick to what we know. It takes people like Edwin to remind us to come up for some fresh air. There is a whole new world of design evolving out there, so stay inspired.