websites

Websites: Grayscale, Color, Colorblind Filter

The hierarchy of my web design held up pretty well after the colorblind filter. It seems like everything gets a little muted, but that's because there are less colors to pull from if you are colorblind. Things become a little more sunk on the page instead of jumping out. The headline and title are clearly the focus even with a filter, because they are on a light background and everything else is on a dark background. The menu bar is still a different color than the body and it is centered under the headline and title so you look at that next. Unfortunately the design loses some of it's vivacity and the photos lose the pop they had in full color. It definitely takes away from the fun, playful theme I was intending, but there is still a lot of variation in color.

I think it is incredibly interesting much design does change when you remove the color. I never really thought about how a colorblind person's experience of surfing the web is different than mine. When I think of all the ways color is used to grab the eye's attention and create a hierarchy it is fascinating to think that that doesn't necessarily work for everyone.

My website design seems to have held up pretty well after applying the deuteranomaly filter. While it loses a lot of its visual pop, it remains just as legible as before the filter. This is probably due to the reliance on blue shades for most of the backgrounds coupled with high chroma, high contrast red and yellow for the title text. Most of the text also has a dark, sharp-edged drop shadow (and in some cases black outline) which also preserves legibility. This was a natural design choice for a page meant to emulate four-color comic book styles, but it also seems to be a boon for remaining accessible to the color-blind.

Color vs Non-Color

It is very interesting to think about viewing a website through the eyes of the color-blind person, a defect that about 9% (8% males and 1% females) of Americans deal with everyday. Being color-blind free, I have never made design decisions based upon whether or not someone can view that particular color. I noticed when doing this assignment, along with many other projects I have worked on, is that I use the color red... a lot. In everything but the Blue-Blind filter, red is eliminated from the pallet and it quickly loses the effect it once had. As for the hierarchy, it definitely becomes more difficult to navigate this page the more color-blind the person is. I notice that my selected state of sub navigation becomes a grey/blue, which makes it melt into the gray background and it looks like the green dot next to the Product button also loses its selected effect. Overall, I do feel that even-though being color blind takes away from some of the "fun" of viewing this page, the overall message is still conveyed.

my websites

For the color test I found a website in a horrible need of re-design and re-organized information they used on their site to make it less chaotic and messy and easier to find information. I wanted to highlight the deals on the website, as being a travel site in order to catch peoples attention you have to let them know you can get them the cheapest deal. I feel in choosing the color palatte of ocean blues the hierarchy stays the same or at least close to the same as the origional. Tritanopia makes the sky look too green, however the tropical scene is still apparent to what I am showcasing, same goes for protanopia, where the image just looks more blue.

The black and white screen shot is of a site I want to create from found images of beautful decorated rooms. Giving options for all different rooms, you can choose from the top menu bar or click on one of the square images of the certain type room youd like to see examples from. Considering the images are the main subject really of the site I created the background very light so as not to take away from the images or cause them to get lost in the site. I also used a texture to further push the idea of interior design being the subject of the site.

Designer Interview 3 - Josh Dillard

About Me(via linkedin)

I'm an Interactive Designer with a thirst for knowledge and understanding. I
enjoy working in design research, strategy, user experience, interaction
design, and even a little coding here and there. I am passionate about the
opportunity for design to push the boundaries of technology and create
more effective ways to enhance communication and engage
users. Currently, I am working in the pharmaceutical and healthcare
industry creating tablet-based experiences. In the course of a normal day,
it is not unusual for me to research the marketing campaigns of
competitors or figure out the most effective wayto convert a table of
dozens of cross-referencing product information into an engaging story.
Most of my work is designed for the tablet PC platform, but recently I have
also been designing for the iPad. I am always open to new experiences
and opportunities that will allow me to learn something new, or use my
knowledge to enhance the lives of others. Although most of my
professional experience has been more hands-on in the planning and
aesthetic design of projects, I am very interested in pursuing a future in
design research.

1. What disciplines do you find yourself working with most often?
How much collaboration is there between disciplines?

I find myself working with Strategy and Copy disciplines during my day-today
duties. At the beginning of the design process at Blue Diesel, there is
heavy collaboration between the three disciplines at the start of the project.
For most projects the copywriters, strategists, and designers brainstorm
and concept different ways to present data or messaging points received
from a client. The brainstorm revolves around either a new marketing
message or the results of a study that was recently published. These
sessions can last anywhere from one to three hours depending on the
complexity of the data. After the brainstorm, the designer takes the notes
and sketches and turns them into wireframe compositions that are then
presented back to the client. After this stage, the copywriter will work on
refining the copy and messaging while the designer focuses on the design
work.



2. What do you enjoy most about designing for the web? What do you
enjoy the least?

What I enjoy most about designing for the web is the fact that you have the
opportunity to instantly be exposed to everyone in your profession. With
sites like Reddit, Behance Network and Smashing Magazine, if you make
have anything relevant to share with the design community – you can. One
blog post or tutorial and reach millions of your peers and can help you
become a known voice in the online design community.
Another thing that I really enjoy about design are the types of experiences
that you can create. Just a few years ago nobody knew what Augmented
Reality meant or how it could be utilized in a meaningful way on the web.
Today it is one of the most engaging ways to create a memorable
interaction between the tangible world and the virtual world. The rate at
which technology allows designers to create and dictate a new experience
is exciting and something that I look forward to as new these new
technologies become accessible to designers.
What I enjoy the least about the web is the lack of web standards in terms
of how browsers render your designed website. It’s definitely been better
these last few years but Internet Explorer (IE 6 in particular) has been
notorious for being the exception to most commonly accepted web
stardards. This really isn’t a design problem – rather a problem that
designers who dabble in coding should be aware. Particularly if you do
freelance for smaller organizations it can be a brutal task to navigate the
nuances of browser rendering.



3. Interaction is a relatively new field, how did you become a
designer? An interactive designer? What was your path? Why did
you decide to work as an interactive designer?

My path to interactive design was less conventional than some of my
peers. I was initially accepted into college as an aerospace engineer
major. After attending an engineering open house, I realized it was not
what I wanted to do with the rest of my life. Fortunately, the next day, the
design department was having an open house as well. I listened to the
presentation and there was a program called ‘digital design’ that sounded
amazing. After the presentation, I went to the dean of the design school
and immediately changed my major.



4. How have you seen the field change? Where do you see it
going? Where do you look for inspiration?

I have only been ‘in the field’ for about 2 years. I graduated in 2009.
Since then, the field has seen a shift in the way we view the interactions
we have with computers. During my undergraduate studies, the focus was
primarily on Flash and creating a memorable experience for the web.
Recently, the focus has shifted from strictly web-based desktop/laptop
experiences to mobile experiences. The emergence of smartphones have
evolved the way we think about human-device interactions. Even in the
last five years there has been a dramatic shift in the way designers see
themselves and the types of interactions that we must become
knowledgeable about in order to properly design the most effective
solutions.



6. How has social media changed your job?

Professionally, it has not changed my job. As an interactive designer
I am forced to be knowledgeable about both current and emerging social
media technologies. However, pharmaceutical companies generally have
been hesitant to adopt these technologies as marketing tools because of
the regulations placed on them by internal legal departments as well as the
FDA.



7. How important is audience to interactive design? What sort of
information/research methods do you use to learn about audience?

Audience is crucial in interactive design. It’s huge to any design
discipline. You have to be conscious of your target audience in every
design decision that you make on a project.
Being in the pharmaceutical industry, I generally have three
audiences for which I design–doctors, surgeons, and hospital economic
buyers (the people who actually make the purchases for the hospital). The
way you go about designing a story for a conversation with a doctor is very
different from how you would design that same story for a conversation
with an economic buyer or even a surgeon. The psychology of these
individuals is unique and requires a designer to know what kind of
information resonates with these individuals in order to tailor the story to fit
their specific needs. It’s been very interesting to see how they react to the
same data presented in a very different way.

Designer Interview 2- Gray Joyce

Gray Joyce has been working in design for approximately 10 years. He has held a variety of positions from Art Director to freelance designer to Creative Lead at an internationally-recognized design firm.

His bio is as follows:

Gray Joyce holds a BFA in graphic design from the Savannah College of Art and Design, as well as a Masters of Graphic Design from North Carolina State University, College of Design. Gray has 10 years experience working in a variety of creative environments, ranging from small boutique design firms, to multi-national agencies, creating solutions for identity and brand development, print, broadcast, retail and interactive mediums. His clients include the following :

AMTRAK
Barilla Pasta
Burger King
California Pizza Kitchen
Chase Bank
Circuit City
Contract Design Assoc. Inc.
Cook County Forest Preserve
Craftsman Tools
DesignCorps
DiGiorno Pizza
Discover Financial
EFFEN Vodka
GoodYear
The Home Depot
Hyatt Hotels
IC Bus
International Truck & Engine Corp.
The Joyce Design Group, Inc.
Kraft Foods
Loyola University Museum of Art
LUND International
Moosehead Furniture Manufacturers, Inc.
NASCAR
Nabisco 100 Cal
NAVISTAR INTERNATIONAL
NC State University
North Carolina Solar Center
Office Depot
Potbelly Sandwich Co.
Riniker Hand Therapy, Inc.
Rock For Kids
Sears
SONY Electronics
SONY VAIO
Summer's Eve
valspar
Wasa Flatbreads
Xbox 360



1. What disciplines do you find yourself working with most often? How much collaboration is there between disciplines?

most often i work in identity/brand developmeent, print, environmental, and digital disciplines. i have always tried to position both my process and my solutions beyond that of what a client may ask for. address the problem and the audience holistically, and with out limiting the design/experience to a single medium.

in the past, this has lead to fully boundless solutions that included product design, mobile, microsites, print and television adverts, collateral materials such as t-shirts and misc. branded items, even event/space planning and design.

With many current firms, there is an area of specialization that they focus their work on. creating and executing for a client in these disciplines they specialize in becomes default. it is paramount that a young designer challenge the status quo and the precedents where they work. this breathes new blood into both the firm and allows the young designer to continue learning while bringing their individuality to the table. you become a cornerstone of the whole, rather than just a drone that executes what your boss requests.


2. What do you enjoy most about designing for the web? What do you enjoy the least?
it is truly a limitless medium. i try to keep a book of every idea i've had, regardless of whether it was used, successful or even possible. many times, i've found that an idea i've dreamt up doesn't work... but 2 yrs later the tech is available to execute the idea.

the other thing i love about web is that you are not limited by time. you can create a temporal experience. it allows you to have some influence over the story and the voice of what you create. you don't have to communicate everything at once. you can tease ideas and let them grow. a well designed experience, on the web especially, is sticky and your audience will spend time with it, come back to it, reference it, and spread the word to their peers


3. Interaction is a relatively new field, how did you become a designer? An interactive designer? What was your path? Why did you decide to work as an interactive designer?
i began working in interactive media while in graduate school. i was learning a new medium at the same time it was gaining traction in the world... and it was one of the major reasons i wanted to go to graduate school — to give me the chance and space to play in this medium while i learned it. to test what was possible. the idea of the web acting as a space and becoming an enveloping experience has always appealed to me, and stems from a love of architectural and natural spaces in the physical world. each person walks through a gothic church or a glade of aspen trees, or a cliff overlooking the ocean — and they each take something common and something incredible personal away from it. it becomes an intrinsic drive for them to experience more... that is, it creates and feeds a drive that gives purpose to the space itself.




4. How have you seen the field change? Where do you see it going? Where do you look for inspiration?

we are in the middle of a changing of the guard. the old approaches, practices and even practitioners are discovering that they must adapt to the new class of young creatives. technology is shifting again, and with it, the way we as an industry must move... becoming more versatile and nimble, both in our approaches and in execution. to limit yourself or your studio to a single discipline is a nail in the proverbial coffin. while you may be a pace setter now, you will be old and irrelevant in 5 yrs.

i find inspiration everywhere. and yes... that is a cliché and canned answer... but it is an honest one. walking down the street. listening to music. a book. a painting. an emotion. a simple product, like the curve of a blade on a kitchen knife. all of these are the things that feed our minds, and make our lives interesting. it is that emotive reaction that i strive to recreate in my audiences... design should engage and captivate you and your audience, regardless of how briefly it does so... it should always evoke some thought; some emotion; some reaction.

5. Have you worked as anything other than an interactive designer in the past? Currently?

i do not refer to myself as anything more than a designer (sure my professional titles have been far more specific). i work in whatever medium the problem/solution requires. this is often in the interactive realm... but may include film, animation, music/sound design, architecture, sculpting, photography.

i enjoy crossing disciplines to create a richer experience. where lo-fi and high tech. what is it to utilize the skillset of previous generations within or in conjunction with modern technology.


6. How has social media changed your job?
its made it both easier and far more difficult at the same time. SoMe makes it far easier to spread an idea through the masses. your audience is no longer limited to a single URL or media buy. it allows a brand or an idea to take on a life of its own, gives it voice, gives it audience. SoMe is the legs, mouth and ears for new innovation. it has redefined how we as individuals interact with one another.

on the downside... it is the hot topic for clients now. the current buzz word. they often have trouble seeing beyond the hot-new-thing... and SoMe is no different. this requires both a great understanding of your designs' intent, audience, execution; and an open and trusting relationship with your client... one where you can educate them on what will make for the best solution and meet/exceed their goals.



7. How important is audience to interactive design? What sort of information/research methods do you use to learn about audience?
audience is the most important consideration in any design, not just interactive. you are making something to go out into the world. if you do not consider where in the world to put it, who will see it, and how they will act/react with it or to it or because of it... you've failed as a designer. it could be the most beautifully innovative piece ever created... but with out an audience to receive it... it is basically masturbation. this isn't to say there isn't place for making things just for yourself, or experimenting and playing. but if you are creating something for someone or a client, audience should always be your top concern.

larger firms will have strategists and planners that seek out info for you, presenting you with complex documents charting demographic and behaviors. however, and especially when working on your own or in a smaller environment, i find that common sense is king. your audience is all around you. you probably know someone that is in the target. so ask them. if you don't... find some one and ask them. the biggest asset you can give yourself is the courage to seek out your own answers. go explore and find out who your audience really is. how they act and react. who they are beyond their over-analized demographic.


8. What are the most important things you have learned in the industry that they did not teach you in school?
- how to gracefully fail. miserably so. then get up and wipe the board clear and start over. it is trial by fire, and your biggest strength will be the ability to learn from your mistakes and move on.

- pride and humility. there is a place for it, and you should always strive to create something you are proud of. but at the end of the day, what we create is never meant to be ours. it is our clients' or our audience's. and it will seldom turn out exactly how you wanted it. you can still make it great... often better than it would have been in your mind... but design has to be communal, both in process and in its end result. it has to function.

- self awareness and self assertion. rarely will anyone every stand up for you or just present you with better pay, benefits, promotions, or golden opportunities. it is important to begin asserting yourself (always professionally... never whiny bitching) early in your career. you see something you want or a project you have an idea for... go after it (again... be professional)


9. What are some of the challenges of working with clients in interactive design? How do you provide clients with the solutions they want, they think they want, and that they need? How do usability and accessibility factor into your solutions?
many clients are not tech savvy. especially the CMOs and Brand Managers that are mid-lifers. you have to do a lot of hand-holding and be very aware of client-as-audience when presenting ideas. sometimes it is simpler to sell in a slimmed down version of the idea, then execute the full idea once it is approved. don't try to sell in every detail. and be patient. earn your client's trust, and don't always dismiss their ideas or contributions to the idea... it is after all, their money. and they want to share in the glory or creating something amazing. keep your conversations with the client 2-way. an open trusting dialogue with clients will get you further than anything else in this industry... and helps keep that client coming back again and again... and after all is said and done... we provide a service. if no one wants to work with us because that service is lacking or one-sided... well ... you're out of business.


10. How often do issues of culture and language come into play while designing for the web?
every minute of every day. this goes back to knowing your audience as well as the intent of your design. there is a huge responsibility with giving anything a voice. to create something with out consideration of cultural and/or linguistic hurdles is to cancel out any validity or purpose in the design.

Project 1

Gray vs. Grey

In either black and white or color, there are more than a handful of other considerations to make that all contribute to visual hierarchy. This may be narrow-minded of me, but I think designing with colorblindness in mind is nothing more than an after thought. Unless it is a site or design where the color is critically important, the percentage of colorblind people visiting your site is so minute that it is almost useless to make it an issue. A properly designed site should take contrast into consideration in the first place so that even in complete grayscale a page can hold up.

Grayscale & Color Websites

The first image is my grayscale photography/portfolio style website "Snapshot," the second is an interior design blog "Beautiful Decor" as seen by a non-colorblind person. The third and fourth images are the same site as viewed by a red-blind person, and lastly by a blue-blind person.

My website "Beautiful Decor" is a mockup of an interior design blog that features inspiring designs each day, and it is designed with a slight texture and earth-tone color scheme. I tried to achieve some sharp color contrasts in the site so that colorblind and non-colorblind users alike are able to easily navigate the page. The site name and links are clearly set apart in a color shape and the type is larger to show that it is more important.

My grayscale website "Snapshot" is a portfolio/business website that has a bit of a photo showcase on the homepage to interest viewers. The header demonstrates hierarchy, making the title stand out and then the links appear second most important below that. The navigation links are highlighted by the ribbon-like stripes behind them in a contrasting shade.

Both my grayscale and color websites are made in a minimal fashion and look more contemporary. I think that less text on webpages makes for a much cleaner and more visually calm site, and the viewer is not overwhelmed by so much text and information that they get confused. I added some textural elements and subtle hints of color to add some interest, but I kept them as minimal as possible so they didn't create a color "vibration" effect, as some bright colors tend to do when placed next to each other.

Grayscale to Color

The inspiration for these two websites was the photos that are currently on our computer - my husband plays in a few bands and had taken photos of gigs as well as his studio and equipment.

This is my first design, the fully grayscale, based on his band speakerdust. I wanted the design to be image-rich yet simple. The branding is at the typical upper-left in a larger, bold, full black in a different typeface than the navigational type. When I look at this, my eye goes to one of two places first - either the logo in the corner, or the block of text in the center. I think the upper left corner, because it is a typical location for the website logo, is more of a psychological habit from using the internet. Visually, my eye was most attracted to the texturally- and tonally-different text in the center. I used a dark bar to bring the eye back toward the left, and the angle of the sound board in the photo leads back up to the logo, which then flows across to the right through the navigation, which rests above and below a horizontal rule.

This is my full-color design, based on the practice of bending circuitry of instruments and other electronics to achieve distorted and otherwise affected music. Off the theme of a circuit board, I used a black background color and bright neon and white for all type. With the darkness of the background, my eye first goes to the larger bright block of type making up the title of the web page, "Milwaukee" in bright green, and "Circuit-Bent Music" in bright blue. The navigational items are in gray, and on hover / select of the main navigational categories, the sub-navigation grows down from them; on hover a sub-navigational item will glow in a neon color rather than the default white. Because there is quite a bit of neon across the page, my eyes move next to the white article titles.

This is the result of taking all color out of the design. My eye still goes first to the title of the page, and next to the article titles. A bit more emphasis flows to the navigational elements which are considerably lighter toned than the background.

This is what the color site looks like to a blue-blind user. The neon text at the bottom of the page is minimized to the point that I would certainly need to increase the tonal contrast between that type and the black background. For instance, I could keep all text in very light / bright shades of yellow. Again, the navigational elements, due to their contrast with the background, are pulled forward.

This is how the design looks to a red-blind user. Hierarchically, the words "Circuit-Bent Music" are the first thing my eye moves to, and there is an apparent correlation between "Milwaukee" and the photos heading the articles below because of the overall yellowish cast.
After seeing how the web design would look to a variety of users, I can understand the value of designing with contrasting tones in mind. To bring the eye in a logical order across the page, the best strategy might be to design with elements that stand out against the background regardless of a user's color vision abilities - in other words, placing those elements against a background that is either considerably darker or lighter than the element. Also, if all elements were of only two tones - light or dark, the effect would be minimized because blocks of overall tone would get lost alongside one another. So the less-important information should be kept within the middle-tonal range.

Web Design Project 1

Initial Web Designs:




Colorblind Filter:




This is what the second page looks like for someone with deutanopia (no green cones). It makes sense that it would look mostly bluish purple, considering teal has quite a bit of green in it. While the main color scheme involves only one color, and does not rely on coloring for specific functions, someone with this color deficiency could navigate this site just as easily as anybody else. The main thing that makes the navigation links stand out is the use of shading.

Color Blindness

With my color site the colors that I have used, especially the blues and greens, changed the most. The greens change from a bright vibrant green to a dull yellowish brown and the blues changed to a de-saturated purple. One may think that a site may not be effected by the afore mentioned changes but with my sight the main importance was the bright vibrant colors to draw the audience in and with the colors now appearing dull and unattractive, I can see how the colorblind would be less willing to explore the site further.

Web Designs

Grayscale & Color Sites:

With colorblind filter:

Tritanopia (No Blue):

Deuteranopia (No Green):

Protanopia (No Red)

The only very noticeable change to my page happened when I applied the tritanopia filter on my site. Since that filter filters out blue and the background of my page was blue, it instead appeared a greenish hue and my side menu appeared more orange-red. With the other filters, I think the site hierarchy is still clear because the menu is the only really noticeable change in color. When I was picking colors, I knew that red/green color blindness is more prominent in people and tried to stay away from using too much of those colors.