a mushtaq

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Sunday, 21 October 2012

Design for Web: Existing Websites

Posted on 08:04 by cena
For a little introductory research for the Designing For Web OUGD504 brief based on the summer 'A History Of...' research I've looked at a collection of existing websites out there that offer somewhat similar content or at least cover the same overarching topic, which is mixed martial arts.


Here is my finished summer research product which is titled 'Mixed Martial Arts' a visually designed guide to Mixed Martial Arts, it's beginnings and roots, along with the similarities between Samurai Bushido culture and mixed martial arts. Also underneath that is the UFC 1 rebrand I did for the first UFC and MMA event in 1993.



Open publication - Free publishing - More abbas mushtaq



 I tried to keep the visual style consistent so it makes sense to apply this visual style and sensibilities to the website I'm going to produce too. I tried to go for a simplified visual style, very stripped back and similar to old prizefighting posters to give the UFC more of a legitimacy as a sport in the classic sense. It's something MMA and the UFC in North America has struggled with in the past.


Here are some relatively similar websites out there which deal with the same subject. I'll try and analyse them just how I analysed 'good' and 'bad' websites out there in a previous post.


Bleacher Report: MMA
http://bleacherreport.com/ufc




This is a website I frequent regularly to catch up on the latest goings on and as I've used this website a lot I can browse around it with ease. One of the main aspects of the website which I find particularly useful is the way the top latest story is highlighted at the top, inviting you to click on it. In this case it's "MMA Stock Report for top 25 fighters". For each article it also tends to use a slideshow method, with a PREV and NEXT button which I quite like as it allows me to read lists, top 10s, etc in a nice broken up style. With each article you also get similar and relative articles on the right which I find myself clicking a lot so in terms of the website pages linking together I think it's effective but visually I don't feel too strongly about it.

It has too many colours going on, I think the hyperlinks stand out too much with the bold and blue text and there's a kind of overload of information, especially for someone who hasn't used this website before. Also there's sometimes problems with the coding of the website, it seems the image size frame is fixed, so pictures applied to the frame just get cropped and not resized so you can't see what's going on properly, like in this..


Overall, although the visual style is not exactly groundbreaking in a design sense, it looks reasonably professional and consistent and looks pretty inviting and professional compared to the other combat sports websites out there.





UFC
http://uk.ufc.com/

The official website for the biggest MMA organisation in the world, the UFC. Kind of like the NBA of basketball. I like the way the colour scheme works it's consistent and nicely colour coded with the navigation bar at the top clear and easy to use. It suits the target audience and subject itself very well, it looks pretty modern and slightly futuristic in a way, something which suits the UFC's image. I like the boldness of the images, they're usually pretty big and pretty spaced out with some bold text underneath it. It's also good for newcomers to check out as it has pages on the fighter roster, the current champions and upcoming events. 

It's a pretty busy website still but it reflects the organisation itself, there's always stuff going on and I can't really think of any clear solutions as to how they could have handled the information any better.


The loading bar is pretty cool with the Octagon cage






MMAFighting
http://www.mmafighting.com/

I like the web font that this website uses and I like the kind of larger than normal pt size used, it's clear and easy to read. It has a lot of white space, which as you can see with previous examples is kind of rare in the news websites! It has clear 'share' buttons which are cool. It still has a lot of information around it, with big footers and comments sections and stuff going on on the right, when you read articles, the articles kind of don't feel important if that makes sense. The content kind of feels like it's been shoved onto a page. A lot of these news and reporting websites have a lot of information going on and sometimes your eye doesn't know where to look. Trending sections, Video sections, Recent Posts sections. It almost seems as if they've just put the sections in to join the crowd, rather than for usability.









Sherdog
http://www.sherdog.com

Now this site is pretty bad, especially considering the reputation of this site in the MMA world. It's kind of like the MMA encyclopedia of the world. The colour scheme and overall visual style looks very year 2000. With gradients and big block metallic text everywhere. The negative leading in between the headlines is not nice on the eyes. The image sizes are inconsistent and a bit too little sometimes, especially on the events/fights section on the right. This kind of visual style and image is exactly what I didn't want to put across with my research and products. Very grungey and heavy metal.





Mixed Martial Arts.com
http://www.mixedmartialarts.com/

Now this website's a looker, or maybe not. Again, as with Sherdog. This website looks very grungey and sweaty, with more emphasis on selling MMA t-shirts than the actual body of articles themselves. The body text is inconsistently sized. The roll-over menus look pretty dated and overall the website looks pretty dated.














Email ThisBlogThis!Share to XShare to Facebook
Posted in Design for Web, OUGD504 | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • TED: Creating Your Logo
    Source:  http://www.ted.com/pages/creating_your_tedx_logo Cool to see what typefaces, spot colours etc organisations use for their logos. //...
  • MEMORABLE ACTION MOVIE/CLOSE SHAVE/INGENIOUS MOMENTS
    As part of the imagery aspect of my brief, I like the idea of adding references to films, through iconography or film stills. I'm trying...
  • Publication:: Presentation Boards
    Modernism_ Japan x Europe Presentation boards for  Monday's group discussion. Topics covered Concept Subject Research Publication Resear...
  • Tokyo World Design Conference _ 1960
    Tokyo World Design  Conference                 1960                            As I'm now still keeping a close eye on the development o...
  • Josef Müller-Brockmann: Principal Of The Swiss School
    Really interesting and articulate overview of JMB's career and the state of Switzerland, Europe and at length the world post-WWII and du...
  • designboom: Massimo Vignelli interview
    massimo vignelli designboom interviewed massimo vignelli on may 21st, 2006 what is the best moment of the day? when I go to bed with a feeli...
  • Lithography In India
    Interesting to read about lithography printing around the world for publications that have nothing to do with contemporary graphic design fo...
  • Jessica Svendsen : 100 Days : Müller-Brockmann
    Jessica Svendsen is now a designer at Pentagram, under the tutelage of Michael Beirut. Michael Beirut runs the 100 days workshop where you b...
  • 100 GREATEST REGGAE SONGS OF ALL TIME
    Source 1.   No Woman, No Cry  -  Bob Marley & the Wailers    2.   Israelites  -  Desmond Dekker & the Aces    3.   Stir It Up  -  Bo...
  • Process : Embossing
    As part of my research into basic definitions of different finishing processes I'm now looking into embossing, how it's done and the...

Categories

  • 100 Things
  • Alphabet Soup
  • Collect/Categorise/Communicate
  • Colour Theory
  • Communication Is A Virus
  • Context of practice
  • Cop3
  • Crit Techniques
  • Design For Print
  • Design for Web
  • END OF MODULE EVALUATION
  • Essay notes
  • How To Be A Best Man
  • How To Buy A Diamond Engagement Ring
  • illustrator
  • It's Your Choice
  • Lecture notes
  • Level 05 Essay
  • Level 05 Publication
  • Love/Hate
  • My Red Book
  • OUGD01
  • OUGD401
  • OUGD402
  • OUGD403
  • OUGD404
  • OUGD405
  • OUGD406
  • OUGD501
  • OUGD502
  • OUGD503
  • OUGD504
  • OUGD505
  • OUGD601
  • Personal
  • Photoshop brief
  • Proverb
  • Psychoanalysis
  • Publication
  • Room For Sale Poster
  • Stamp it
  • Study Task 1
  • Study Task 2
  • Study Task 3
  • Study Task 5
  • Task
  • Task 1
  • The Poster Brief
  • THREE
  • Typo-Gateaux
  • Typography
  • What Is A Line

Blog Archive

  • ►  2014 (21)
    • ►  March (1)
    • ►  January (20)
  • ►  2013 (105)
    • ►  December (8)
    • ►  November (7)
    • ►  October (6)
    • ►  September (30)
    • ►  July (1)
    • ►  June (1)
    • ►  May (13)
    • ►  April (10)
    • ►  March (5)
    • ►  February (20)
    • ►  January (4)
  • ▼  2012 (228)
    • ►  December (18)
    • ►  November (41)
    • ▼  October (23)
      • The Gaze: Women in Media
      • The Gaze: Seminar
      • Thinking With Type
      • Anatomy of Type
      • Lecture 3 - Panopticism
      • Examples of Type and layout
      • Design for Web: Existing Websites
      • Process : Embossing
      • You've Been Foiled!
      • Foil Blocking & Spot Varnish examples
      • Printing techniques
      • Psychoanalysis & Subliminal advertising
      • The Birth of Mad Men: Ernest Dichter by Laura Massey
      • The Engineering Of Human Desire by Tai Carmen
      • Psychoanalysis in advertising
      • Lecture 2 - The Gaze and The Media
      • Context of Practice Seminar ~ Psychoanalysis
      • 10 Websites - Good/Bad/Unsure
      • Lecture Notes 1 x Psychoanalysis
      • Study Task 1 - What is Design for Print? // Publis...
      • Study Task 1? - What is design for print? // Infor...
      • STUDY TASK 1 - What is design for print? Packaging...
      • STUDY TASK 1 - What is design for print? // Brand ...
    • ►  September (1)
    • ►  May (38)
    • ►  April (18)
    • ►  March (45)
    • ►  February (23)
    • ►  January (21)
  • ►  2011 (83)
    • ►  December (18)
    • ►  November (37)
    • ►  October (19)
    • ►  September (9)
Powered by Blogger.

About Me

cena
View my complete profile