Now is the Moment of Power

As soon as the words MMA are spoken the thoughts that come to mind for most individuals are brutal, hard hitters, rough, blood, mans sport, barbaric, caveman. A lot of people tend to believe that the best Martial Artists today are the hard hitters. These people are not aware of the subtle qualities that a true Martial Artist must have to be a successful Martial Artist.

MMA is not just a sport it’s a way of life. A true instructor is trying to teach his students to develop themselves not just Martial Arts. MMA can be applied to every form of one’s life not just fighting. It’s different than soccer or rugby and the average sport in that it makes you look inward, and look and analyze yourself. Training in MMA is not just a fight education it’s a life education.

What’s so great about Power? Let’s talk about Power vs. Speed

Christopher Smith an instructor at the IMB academy of CT once told me that hitting hard is not the point in MMA. He made a very valid point about speed is faster than power in a sense that in a fight if the faster combatant is able to use his speed and hit first theoretically, the more powerful combatant will never get a chance to fire. Especially at the elite level. To hit precise and fast as well as avoid being hit yourself is the true challenge.

The still fighter/stationary vs. the Mobile fighter

The stationary fighter tends to be a sitting duck. He’s easy pickings and easy pray for the mobile fighter. The mobile fighter can be aggressive or elusive. He is extremely difficult to hit.

Hidden qualities and why they are useful

Footwork – is the delivery system it enable a fighter to get in and out and to control the action
Speed – makes the fighters job easier. If he is faster he may be able to neutralize his opponent’s power.
Distance –is the ability to understand, maintain and control if a fighter can do this he can dictate and control the action in a fight
Timing- is an attribute that works with speed for a devastating effect and can also neutralize speed. Timing is an internal and mental attribute. It will not erode with age. However it can get better.

Discover who you are and who you can be.

Click the image to see it in a larger size!

Legacy of the Iron Dragon

Throughout the creation of this website I focused on my target audience. I thought of the reasons my target audience would be attracted to the site and what would make it come alive. I have designed websites before many times and never really took the time to make a mock up first in Photoshop. I thought that this part of the project was just extra work that I would have to code later on, so why not just start with coding. I learned a lot from this project. I learned that sometimes it’s not a bad idea to create a mock up in Photoshop and present it to the customer then work on the coding aspect. That part is hard because you have to consider what it possible to do in html beforehand. It’s a challenge if you create a great design and then do not know how to make it work html. Rework is really not fun and I learned that when developing a site I must try to avoid things I cannot do in HTML.

The users who commented on my blog this week from class were BLOGETERY IN MOTION and Battered Not Broken . Based on each individual’s advice I deleted the fire from my dragon and I think this was a great advice. The second assignment in this class required us to read a lot on websites in the Web Style Guide book. This is what I really based all my ideas on. I thought about the scrolling, did I want a long website or a site that scrolled. I also thought a lot about target audience and consistency. That book was a great place to work from. I am actually thinking of purchasing it myself.

Elements & Principles

Photos/ Illustrations & background:
All of the photos throughout this project are my original photos. I also used the videos that I created and added to YouTube for the media page. I used all the text I created when pitching my idea and even had a drawn picture of the dragon from hand and used that. The dragon was a challenge!! I had a pencil drawing and scanned it into Photoshop and highlighted it with the pen tool. I then colored it in using the paint can. Next the challenge was the text in the content area over it kept blending in. Therefore each page where there was text, I had to lighten the back of the dragon. In HTML I might need to figure out a different solution for this. I am not yet sure what I will do. For the background I used a lot of variety. Each page has a different background look and feel to break the site up so you can tell the difference between the pages. Each page I used a lot of special effects on the text to make it pop. This was challenging but really fun to experiment with!

Layout/Functionality:

I started with the content area varying in size but changed my mind after. It was not as consistent this way and since there is already enough variety in the background images I decided to make them the content area all the same size. I placed the navigation on the top and the bottom to make it easy to find. I also added a highlight on the specific page you were on so you knew the difference. The content is read left to right. If I were to change it into another language it would be Chinese and I would have to adjust to that style. At the moment it is not targeted at international users. I kept the footer at the bottom traditionally.

Colors:
I did go with the color scheme I originally intended and added some other colors to it including red. I used blue because it 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. I think these color choices are meaningful for my target audience and content.

Overall this was a fun project that taught me a lot about designing a website and how important it is to consult the target audience and really sit and look a the template before jumping into adding it to the HTML design part of web designing.

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.

For this one I used both photoshop and another program called fireworks which is similar. They both have the animated GIF feature. I took stills from a video sequence in final cut pro exported them  and combined them after  filtering them in photoshop (pen and ink)  to make an animated GIF.

 In the end I mad life a lot more difficult but was way more successful with this than with my first attempt. Click to watch refresh to reload!! I am really happy about t his one!

Please click the image to view!

I have used Photoshop For a few years randomly but never used the slice or Animation tool in it. I have to say the hardest thing was trying to save the Animation I kept doing it wrong! Here is what I have for Assignment 1.

Website home pages

As individual as you want to be…
Author of Choice Version 1

I really like how the developer placed what the site is about right there at the top of the page “A meeting ground for authors and agents.” This tells you off the bat what you need to know.

Layout: I thought this particular layout was very boxy but traditional. It looks like your target audience would need something simple and not to complex with flashes images and crazy text. I think this layout accomplishes that. Personally I would make the upper left hand book image a little smaller. I think it takes away from reading the title of the page.

Color: The color scheme is very simple with the four color choices. I would love to see the background of one of the sections be a different color than gray to allow my eye to separate them a little better. This would allow that particular area to stand out. Even if the buttons at the top had a different background color it would definitely make a difference. I do not understand what the blue dots in the corners represent are they mimicking thumb tacks?

Text: All of the text has a shadow effect on it except for the content. I would use another font choice throughout the page. In the content area, I would definitely unbold the text so that it is a little easier to read and clear. Try a web favorite text.

Imagery:I am fond of this image choice. I think it was a wise choice to make. It really explains the site. By just looking at it you know right off the bat it has something to do with writing or reading. Then, reading the text will allow you to really understand what the site is about. I do think it would be beneficial if you were to make the text stand out a lot more and the background image fade back a lot more. The opacity on the image begins to take away from the title.

Text: I would definitely get rid of the bold blocky text and use an easy to read traditional web font like Verdana.

Battered Not Broken

Layout: The layout is done well. The login is in the typical place for a login which makes it easy to find. It is also very large. I like how the green at the top goes from dark to light as well it draws my eye from left to the center. I also like the placement of the bottom copyright it is also traditional and easy to find because of this.

Imagery: I love the background image it’s my favorite part of this page. I really wish you used it in your final! I am sure the final will have something just as great.

Color:
I really like the choices of color in this site. They are very cool colors. When I look at the template I feel very refreshed.

Text: The text is clear and easy to read…for a JPG . It was smart to break up the menu with little bullets. I think you should break up the content as well. The content also is not quite aligned . I feel if it was it would be more effective.

Version 2

Text: There is a lot of white space. I feel also like the alignment of the text is confusing one paragraphs is all centered with a centered title. Another is aligned left with an aligned left tile. The last one has a centered title and aligned left text. Did you do this purposely? I think it would be more consistent if they were all aligned left or all centered.

Color:
I like the light blues and greens along with the rainbow. It is very down to earth. I personally think the color scheme works very well for the site.

Layout:
I like how the title comes in from the left it’s very traditional. Our eye reads left to right in western culture and the first thing you look at on this page is the title and then the description of what the site is about. I still think breaking it up will help me a little more understand what is where. Some sort of alignment would be good as well with the text within the content section.

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.

Throughout the class we have gone over a lot of different design principles. I decided to analyze this site above Fighting.NET and break my analysis up into different sections to review some of the design principles. My site is about  connecting the different schools and developing a tribute of Richard Bustillo, a famous Martial Artist. This site above is very similar to mine because it is about the descendants of the person who trained right next to Richard Bustillo all his life.

Design principles
Space, Composition, Balance, Harmony, Rhythm

This site is very well done. Everything is evenly balanced. There is enough white space throughout this site so that it is not overwhelming with text. There is a visual flow throughout this composition with an emphasis on the image in the center of the page. The organization gives you an idea of what the site is about right off the bat. The title is very prominent on the homepage.

Color

The color scheme used within this site is black red orange and yellow. They used earth tones a very complementary color scheme. It makes the site very bold and vibrant. It’s consistent through each page. They mainly used yellow for the text. The red and orange give the site the feeling of love andwar. Red has a tendency to higer blood pressure and stimulate the body when looked at. These are very strong colors used. 

Layout

The layout is centered and broken into sections. It has a very large header on the home page with the navigation on top. The layout is centered for each of the pages. You have to scroll to see the entire page. While reading web design chapter 6 and 7 I decided I would choose shorter web pages.

“In general, you should favor shorter web pages for:
• Home pages and menu or navigation pages elsewhere in your site
• Documents to be browsed and read online
• Pages with very large graphics
In general, longer documents are:
• Easier to maintain (content is in one piece, not in linked chunks spread across many pages)
• More like the structure of their paper counterparts (not chopped up)
Easier for users to download and print”(1)

The navigation has the tabs on the top. I am thinking of doing something similar but a lot smaller. Each tap highlights the page it’s on with an orange background. Each title has a highlight around it as well.

Text

They use a series of different text styles throughout the site. Each style is clear and easy to read. They used a couple of text styles with lower opacity as well.

Citations:

1. Web style graphics: http://www.webstyleguide.com/wsg3/index.html.

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.

Here is my example of playing with text!