Now is the Moment of Power

Have you ever considered designing your website for an international audience? I never even thought about it until this week. Target Audience is what I mainly focus on when designing a site.  Apparently I never thought about designing for an international crowd .  I was extremely naive to the differences that can make or break a company based on the translations of words, images color and so much more.  I would like to share a little about what I have learned about designing a website in multiple languages. I am also going to  provide  a guide on what to think about when designing for an international crowd.

After reading How fluent is your interface? as well as a case study on Cultural similarities and differences in the design of university websites, I realized it is extremely important to think about translation. Of course everyone knows you have to be careful translating text but do they know that images and colors must be translated as well?

Some tips for designers designing multilingual websites:

1. Translations do not just included language. You must translate the text, date, number formats, symbols, color, flow and functionality (1)
2. Put together a script on which of these items  you need to translate and separate them into sections to make it clear that you have not missed any part of the site
3. Start by translating your information into proper English
4. Next translate your information into the language of the country
5. Make sure that the site/product name translates appropriately into the different language you will be considering before moving forward with the site design. i.e just because it means one thing in English does not mean it does in German. It could mean something completely different in another language
6. Consider the fact that some of the words translated do not exist in specific countries. Therefore you may want to keep the original term listed with a definition explaining what it means(1)
7. Have multiple reviews and prepare them a check list to review the translated site before publishing to confirm everything is correct
8. Translate number formats correctly. Do the research on how a company displays numbers, dates, and currency
9. Images don’t always translate! (1) Make sure your image representations convey the same meaning in the other languages you are considering translating to. Make sure they are not controversial. Do this with symbols as well
10. Make sure the graphics and text are arranged in the proper flow. Chinese read top to bottom and Arabic users read right to left. Make sure you arrange the site the right way for its target audience (1)
11. Colors represent different things in different languages some colors are also favored in different cultures i.e. Brazil favors bright colors, French favors blues white and reds. (2) Consider the colors you will be using for your site  based on the different target countries you are designing it for
    Color chart offered by (1)

Citations
Russo, P., & Boor, S. (1993). How fluent is your interface? Designing for international users. Proceedings INTERCHI ‘93 Conference on Human Factors in Computing Systems: INTERACT ‘93 and CHI’93. Amsterdam, 24-29 April (pp. 342-347). ACM Press.
Callahan, E. (2005). Cultural similarities and differences in the design of university websites. Journal of Computer-Mediated Communication, 11(1), article 12.

Overall I am having a hard time putting my ideas on a Photoshop template. I want to work with a lot of blending imagery and can’t seem to make it happen. This is what I have been working on . It may not look like much but I put in the most effort in creating a template I ever have before. I realized it really helps to create sketches live in Photoshop rather than sketches. I don’t want to worry about image copyrights so I decided to take my own and get drawings and make them into images.

Goals of the Site:
Richard Bustillo is one of a handful of individuals who personally trained with Bruce Lee. Often referred to as the Iron Dragon. Richard Bustillo is a world renowned Martial Arts Grand Master. He has taught Martial Arts all over the world. Grand Master Bustillo, possesses a wealth of knowledge and a Martial Arts resume that is second to none.

Target Audience
The goal is to connect these gyms to each other, provide a place to advertise, honor Richard Bustillo and allow students to see what is available in the areas they are located.

Structure/Pages

About IMB
Iron Dragon (Richard Bustillo)
Instructors (gym and locations)
Media
Forum

The site will allow anyone to view upcoming events in any location affiliated with IMB. It will provide a place for these gyms to advertise seminar and serve as a place to share some of the knowledge each instructor has had with Sifu Bustillo.
The target audience is IMB students, instructors, gyms, around the world. This also includes the average mixed martial artist.

Design Aspects

Imagery: I was hoping to work with a silver colored dragon to cover the left side of the page. It’s been reported through multiple studies that information is processed easier left to right. I would like to have each page reflect the same color scheme but to be a little more open without the dragon on the left hand side. I would rather have it focus on the information at hand and add many images that are focused on Richard Bustillo’s legacy.

Color scheme: I would prefer to use a blue, black and white color scheme. Blue is a calming strong color. Blue is a light and friendly color. Blue coveys confidence, intelligence, stability, and unity. Black is as well conservative and goes with any color. Using the color black can convey elegance, sophistication or mystery. White

Text: I struggled with the navigation in weather it should be black on blue or white on blue.
Page length: After reading the different styles of pages in Web Styles…..I believe I would like my site to have short pages and favor graphics within the site.

Depth has been very prominent in both of the artists I critiqued. Each poster has a very urban feel to it based on the imagery that the individuals used. One looked like one of the NYC bridges and the other was the actual city. Each represents some type of city life.

Agggre…What?

Movie Poster:

The background:

This poster shows a great use of depth. The image of the city really looks like I can almost walk right through the poster. It emphasizes depth very well.

Color Choices:

The pink, white and the purple work well together as a color scheme. It gives off a feminine feeling that goes very good with each image of the three women with their purses.

Text:
It looks like there were about 3 to 4 different fonts used each a different style. The individual used some italics, all caps, fonts from different families and different font colors.

Layout:

The placement of each image and text object was very well done. Each women is set smaller when farther back and a little lower in front showing depth once again as well as with the background image. The title is the most prominent and there is enough white space to allow the poster to not be extremely overwhelming. The pink lines and the thickness break it up into three planes. It works very well. Great job with the pen tool as well.

Battered not broken Movie poster

I really like the text elements used in this piece.

Background:
Depth is very prominent in this poster as well. I feel as if I can also reach through the poster and pull the car farthest away out. I think this poster could have a little more pop if the black and white contrast with the image in the background stood out a little more.
Text:
I am not sure if the individual tried to do this but the fact that the line “You can drive but you cant hide” has the opacity down so the background is coming through, makes its seem like the person is trying to hide the text which compliments what the text says. I really think they did very well with this.

Layout:
I love that the car gives you that effect that we our outside looking in. Everything seems spaced out enough that its not cluttered but no boring. The red spatter on the bottom right hang corner really allows me to feel that the piece is balanced.

As I worked on my assignment this week I realized things get overdone quite easily. One key point I took from the reading and video posts, was that many websites are overdone by textures and color touchups in photoshop can be taken way to far.

TEXTURE

Take this site here from the webpages that suck site. I understand that its target audience is chess players but the texture of the board as a background image is awful. I really do not see the point of the site having a background looking like that not to mention the  many other elements in this site that are done poorly.

This next site has a moving background texture. Wow understandable that this site was designed to represent the worst website ever but having a background like that is externally distracting and horrible looking. The color scheme is horrendous as well as the pixilation. Pixilation is so important with images throughout websites. A website can be ruined by a pixilated image.

 COLOR

Color and lighting are also very important factors that need to be paid close attention to. Many people who use color touching up in Photoshop overdo it. I see many designs out there with an over use of filters or levels. You can just tell that for the audience it is targeting,  it is over dramatic and looks poorly done. It is very important that when one is adjusting color that they pay attention closely to what they are doing and for what audience they are targeting.

The Original Bender

Benders collage was interesting. I think it was really good how he blocked the end on the arm with his head. I did not do this in mine for one part my image kind of just trails off in space. He used shadow very well with the cat. Maybe a little more blending? I also had some trouble with shadow (I could not get it to look like it was natural). Overall very simple not to busy design. Nicely done.

Collage Trouble in London

Perspective was done very well in this collage The green cups stand out a lot. Not sure if this is what the author was going for but my eye is drawn right to the green cups. He did a great job using the tools the edges are not visible and blurry.. Overall It looks very well done.

I as well was a fan of the site http://www.etsy.com/. I also wanted to comment on his thoughts about the wonderful colors outside. I myself am very taken aback by the colors outside. My favorite time of the year is fall when I can travel to Vermont and see the beautiful colors of the leaves surrounding me.

This week’s assignment made me realize that I am missing out. While reading the last line of Halls Marks post I realized I spend most of my life at a desk throughout the day and my nights inside at a gym working out for  MMA. This lesson this week showed me that there are so many colors in this world and beautiful ways to represent them.  We are so lucky to see these vibrant colors outside and I have been taking them for granted. Thank you class 502DC for reminding me.

Retouch 1

I started with levels and then brightness contrast. Exposure is awesome! I never used this before until now. I really liked playing with this!  After the combination of the three I added hue and saturation as well as color balance. I can definitely see myself over doing it a lot with these and decided a few times to go back to the beginning to start over. I would also start with something go through a few more effects and go back to the first one to get a different look and feel Went back to hue an saturation from a few effects back to color balance. Pretty much I played with adjustments’ in the adjustments section of image in Photoshop a lot of the day for this one.

 The original is on the left with the final on the right.

 This last one is an example of playing around  with a blue overlay.

Part2: I played a with the contrast of just the foreground snowboards. I liquefied the background.

Ok here it is after a whole lot of hours….. Please let me know what you think. The pen tool is my best friend. There are 15 photos in this collage.