a mushtaq

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg
Showing posts with label Design for Web. Show all posts
Showing posts with label Design for Web. Show all posts

Tuesday, 27 November 2012

Japanorama

Posted on 05:29 by cena
Came across a really interesting documentary series on the various facets of Japanese culture presented by Jonathan Ross who himself is clearly very into the subject matter himself. Definitely going to try and work my way through this series, I feel it's definitely relevant for my 503 D&AD brief and for the Context of Practice essay I'm proposing on the topic of culture effecting modernist design in Japan.


Source:Wikipedia
"apanorama was a series of documentaries presented by Jonathan Ross, exploring various facets of popular culture and trends of modern-day Japan.
Each episode had a theme, around which he presented cultural phenomena, films, music, and art that exemplify facets of Japan. The series was colourful in both its creative use of subject matter, and its use of bright colours that helped accent the action on screen rather than distract from it. Subjects were separated by eye catches that often featured the artwork of Junko Mizuno. Ross hosted each episode in suits so bright and stylised they could have been stolen from an anime character. 
Fans have credited the series for the care that both Ross and the BBC have placed in its production. Time was given to delve into each subject, and he was able to interview various figureheads of culture and industry, including Mamoru Oshii, Hayao Miyazaki,Takeshi Kitano, Takashi Miike with Takashi Murakami and Sonny Chiba.
The theme song of the show was Kiyoshi no zundoko bushi by Kiyoshi Hikawa."

Some clips:









Read More
Posted in Design for Web, OUGD504 | No comments

Wednesday, 21 November 2012

Website: Animated GIF's?

Posted on 10:22 by cena
I was thinking about maybe adding animated gifs to the website to break up the flow a little bit, especially in the text heavy sections as the website is based on my summer research which was a pretty in-depth study culminating in a book which had a few sort of 'essays' on a certain topic I guess. I intend to have images throughout the text, so it's like a long article but some .gif's in the text could be cool. Found a few on mma-gifs.com















Read More
Posted in Design for Web, OUGD504 | No comments

Thursday, 15 November 2012

Duo Duo website

Posted on 12:39 by cena
This website is layout is bang-on how I want my summer research website to look, I thought I'd post it up as I feel it's minimal yet also pretty experimental and the style can easily be suited to my summer research products.

I need to see if it's possible/easy enough for a beginner to create a slideshow as this website uses, I feel a slideshow would be best for my greatest fighters section.

I also really like how the logo for the website hides underneath the images, and reveals itself when transitioning to the next photo in the slideshow. I also think the way they cut out all photos and portfolio work and place as PNG's it makes the work really feel IN the page rather than sort of on the page, if that makes sense.






Read More
Posted in Design for Web, OUGD504 | No comments

Thursday, 8 November 2012

Design For Web - Studio Duo Duo

Posted on 11:27 by cena
I stumbled upon this website when looking for design studio's and I actually love the website design. It's pretty much what I tried to achieve on my scamps, but way more refined and effective in my opinion. What I like the most is the navigation bar actually at the bottom, something I didn't even think of but it works very well, it leaves a nice big space in the middle where your eye looks for the content.

It also utilises a slideshow minimally and very effectively which will be perfect for my Fighters section if I choose to go down the slideshow route. I like the way they cut out the background of images such as the camera and add a drop shadow in the image preparation. It adds much more focus and reality to the experience, probably only works with 3d objects though.

I'll make a new scamp and wireframe taking into account some pointers from Duo Duo's website.

It has a cool little touch with the slideshow where the logo is hidden beneath the slide, so when you click next, the slide transition happens and you see the logo reveal itself for a split second before it's covered again. Cool










Read More
Posted in Design for Web, OUGD504 | No comments

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.














Read More
Posted in Design for Web, OUGD504 | No comments

Tuesday, 16 October 2012

10 Websites - Good/Bad/Unsure

Posted on 01:32 by cena
As preparation for the Web briefing of the 504 Design Production module next week I am going to look for and analyse a list of websites I like and dislike, or maybe some I'm not too sure about. This will be a useful exercise as it will allow me to consider how websites are made and how they come across to their audience, in this case me. It will help me to gain a better understanding for when it comes to working with web myself.

I've never been much into web and digital design so this section of the module will hopefully be quite eye-opening for me.


~ ~ ~


Jordan: History of Flight - GOOD
http://www.nike.com/jumpman23/historyofflight/





Pulled the blind with my mouse myself to open them. Interactive features.


I chose this website as it's fun and interactive to use. It's obviously aimed at 'sneakerheads' who follow and are aware of Nike Air Jordan's but as the title is History of Jordan it also aims to educate and raise awareness of small facets of each Air Jordan shoe issue and the layout is really easy to use and it's intention is clear.

The transitions between each shoe is really effective as all the little shapes and cut outs spring out, each shape has more info in a speech bubble once you click it and some are even interactive! So you can move a ball into a hoop in order to get the information. I think this website is really effective and captures the product and audiences tastes really well.




Super Silo - GOOD
http://www.supersilo.com/




Super Silo is Dutch Illustrator Martijn Van Dam's freelance name and I've chosen his website as I like the simplicity of use, the colour and the way it perfectly captures his work. It's a point taken from this website for any future websites I make, Van Dam captures and accentuates the work he shows on his website very well. It also has nice chunky buttons and roll overs which light up against the dark grey background and work really well. The type and layout is clean and effective too, and bold.



Momkai - GOOD
http://www.momkai.com/

Momkai is a digital creative agency based in the Netherlands with a focus on web design and digital branding. I've chosen this website as I really like how flexible it is, it's the complete opposite of rigid. It kind of lets you use the website how you want to use it. 

This is the homepage...

It's a pretty unique layout with a clear sense of what you're reading. I knew straight away Momkai was the name, it was a creative agency and underneath were it's projects. It's inviting you to click and find out more.

Once I clicked on the Momkai logo , it didn't load up a new page but the column expanded in real-time and gave all the relevant information about the agency, it's ethos, contact details and features, but still had links to the projects. I can close the expanded column simply by clicking the x button.

Once a project is clicked the navigational column again moved in real time to the left and had a nice sub menu that opens next to it on the left with relevant links for the project

Again, clicking on the logo in the expanded view allowed me to read the relevant Momkai info but there and then, I read the same page in two different contexts. So as I said, I really like the loose and interactive feel of the website. The colours and type all have an effective grid layout and it's easy and a pleasure to flick through. It feels almost futuristic.




Metallic Yellow - Good/Bad - Unsure
http://www.metallicyellow.eu/





Metallic Yellow is the online presence of Allan McEvoy, a Berlin based graphic designer. There's a lot of these 'anti-graphic design' websites out there now along with a similar style of graphic design with a pretty odd aesthetic, almost designing something to look undesigned. I enjoy the style and I find it interesting but I think sometimes people go too far with their websites too and just make them unusable and a bit horrible to use with floating headers, disappearing links and all kinds of layers just working against each other.

I feel positively and negatively about this site as it's also got a similar 'anti-art' aesthetic, I think it suits the graphic designer as his work itself is pretty experimental and so a generic website would probably take away from the work but the websites themselves can pull it off or not sometimes and risk the danger of just looking amateur and very 1998. The good points I take away from the website is it's no fuss or frills, it does the job and is easy to use and the focus of the website is his work, as it should be.


Google - Good
http://www.google.com




An obvious choice but definitely a valid choice. It's simple and efficient to use, and unique in a few ways. It often has interactive google graphics when it's a famous date or anniversary, and unlike other search engines it's absolutely clear of any adverts or banners. The focus is on searching for what you want and it does that very well. If you sign in you can have custom backgrounds but these never add anything other than a wallpaper. It also does a sort of live search so it searches as you type which is very useful.



We Are Pollen - GOOD
http://wearepollen.eu/







We Are Pollen is an European Graphic Design studio. I've chosen this website as a good example of web design as it's bold and minimalistic to use, there's no sub menus or sub-pages. It lays out the images to fill your screen, I'm not sure if they stretch or shrink depending on your screen resolution but they really capture your interest. The menu at the top to navigate around is simple and has a nice use of type and space, and the images of the projects on the homepage themselves also link to the project.

The project pages are again, very simple and effective. The colour scheme of the website is really cool, only using black text and using hovering overlapping text headings really well with a nice turquoise/cyan highlighting feature when you highlight text which works really well with black and contrasts. The site shrinks and stretches to fill the page when you adjust the size of the window which is impressive





Maryland Web Designers Corporation - BAD
http://marylandwebdesignerscorporation.com/





This is a badly designed and pretty horrible website to use anyway, but considering the irony that they offer web design solutions and are trying to sell themselves as amazing graphic designers - it becomes even worse.

The colours don't work well together, there's an overload of information and it generally looks generic and pretty cheesy. It has a pretty dated website design with the central website frame with borders on each side. It's also static so when resizing windows nothing changes.




YUNA - Good
http://www.iamyuna.com/







Online presence of Yuna Kim a digital designer with a focus on print, web and branding. I think this is a very cool website as it's coded in HTML5 and shows it working well. It has no loading pages that open in new tabs and it never disappears off site while a page loads, it has really cool transitions and as a portfolio of work it's very cool and effective how it's coded with shapes. For example triangles for branding, circles for print. The menu is very efficient too, the solution is such a simple solution to organising work but something few sites think of







Sixties Press Poetry - VERY BAD
http://www.sixtiespress.co.uk/

This website is hilariously bad. The header looks like it was designed on MS Paint and there's no actual colour scheme or noticable consideration for text. Your eyes don't know where to look which I've noticed the good websites control really well and you basically just have no idea what it's about, what it's going on or where to click.






Xerox - BAD
http://www.realbusiness.com/#/customer-care/virgin

For a big company, this is a pretty bad website. There's no clear focus of what it's about or where to click. None of the colours really stand out, the menu isn't bold or asking you to click on it, it's pretty hidden away and has these horrible gradient fills on it. The sub menus are grey against white, which again isn't easy to read and the overall site hierarchy and layout is very confusing. I don't even know how to get to the homepage from one of the links. It has way too much going on with pop ups and notices that appear and hover around. Your eyes don't know where to go.









SOUP - Good
http://www.soupagency.it/#services

Soup is an Italian creative agency. This website is bold, minimal and not fussy at all. The links and buttons are clear and the colour scheme complements each other well. I also found this interesting as it's one of those websites where it's literally one big long page, which has shapes and backgrounds which transition into each other nicely, the links in the menu literally scroll you to the relevant part of the long page in real-time which is really cool.

it adds a sense of interactivity to the website. I like how you find out about the agency through interactivity, you move your mouse over animated roll-overs and animations which educate you about the agency.











Read More
Posted in Design For Print, Design for Web, OUGD504 | No comments
Older Posts Home
Subscribe to: Posts (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. //...
  • Graphic Design is Good For Your Health
    Following on from my dissertation and some of the conclusions and aims I applied towards my physical resolution - this article has been real...
  • Morihei Ushiba - The Art of Peace
    I've ordered The Art Of Peace by Morihei Ushiba , it's a philosophy book on Bushido and Martial Arts philisophy by a legendary Aiki...
  • Woodblock printing - Notes/Process/Formats
    My notes: Used to print books before movable type Moku hanga technique differs in that it uses water-based inks Water-based inks provide gre...
  • Foil Blocking & Spot Varnish examples
    I've been looking for examples of different print techniques to see examples of how, for example in this case, foil blocking and spot va...
  • 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...
  • 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...
  • Bushido Quotes
    Here are really interesting Bushido quotes which reflect "The Way Of The Warrior" in martial arts and particularly Samurai culture...
  • Tokyo World Design Conference _ 1960
    Tokyo World Design  Conference                 1960                            As I'm now still keeping a close eye on the development o...
  • List of Illustrations - Practical (Wimbledon) & Pre-Practical Body of Work
    List of Illustrations – Primary Practical (Wimbledon ) Emirates247 {2012) ‘Novak Djokovic Australian Open 2012’ [Image Online] Available at:...

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)
      • Graphic Design is Good For Your Health
    • ►  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)
    • ►  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