Showing posts with label Independant Project. Show all posts
Showing posts with label Independant Project. Show all posts
Site Mockup
Based on my research, ideas and wireframes from my sketchbook I made a mockup of the home page to get a feel for how it should look when coded.
Mobile Design Plan
Based on all my research, pre-production and thinking on my mobile site I would like to outline the design philosophy behind my mobile site.
Design
The design of the site will be almost identical to the desktop version of the website, using the same colour scheme and graphics. The mobile site is a format change, and should be recognizable alongside the desktop version.
Design
The design of the site will be almost identical to the desktop version of the website, using the same colour scheme and graphics. The mobile site is a format change, and should be recognizable alongside the desktop version.
Resolution Considerations
Desktop resolutions are now mostly widescreen, and contain a lot of pixels. Both of my displays are 1920x1080, considered 1080p (Full HD). This is not a luxury afforded by smart phones. They are designed to be small enough to fit in your pocket, and affordable enough. The smart phone competition outside of iphone is very competitive and feature a range of different aspect ratios and resolutions. I looked in to it and they can range from the iPhone 4's 960x640 to 320x480.
I need to optimize the vertical resolution so that the width does not exceed the screen size. Using some code I have managed to find a way to lock the width as well as disable scaling so that a users touch does not accidentally change the view of the website, since it is made for the phone and would become unreadable. That feature is useful for enlarging and shrinking desktop websites on a phone environment.
There is code that can be placed in the header of a HTML document to set the 'viewport' of the device and I will be using this to define resolutions. 320 is the widest I will go to ensure older devices are also supported, much like desktop resolutions can range from large to small.
Touch Considerations
Smartphones navigate and operate around touch, so there are some considerations for the design of the site. With a mouse you 'mouse over' links, and there is usually some effect, but not on a touch device. A mouse over effect would be useless and so doesn't need to be considered.
Also, unlike the refined movements of a mouse pointer, links will need to be 'clicked' with a finger, which is proportionately much larger considering the screen space of phones. Based on my messages with Dave Snider, he recommended the navigation elements be big and in this context it is obvious why. They can't be close together because a finger may touch multiple, and you need it to be big because of the size of fingers.
Code
In my research I have found considerable amounts of useful code and tricks for mobile devices. Especially how to break down columns on a mobile device. My main website will have 2 columns on some pages and so I will want to stack these rather than place them side by side.
Access Considerations
After reading the smashing magazine article on mobile web design I have had a tough time deciding on how to deliver my mobile website. There are multiple options. You can use media queries to detect the 'user agent string', which tells it what device/browser you are using and serves you the correct website for the platform. However, there are several problems with this. One is that User Agent strings change daily, and like Smashing Magazine says only enterprise sites can keep up with these changes. Also, I know people who do not like to be forced to use a mobile version. Choice is a good thing.
There re other method using stylesheets to detect the screen type, but according to Smashing magazine a lot of modern smart phones no longer 'report' themselves as mobile and so the detection may fail. This option feels too flaky for me.
The best option I can see is something that Facebook does and other website. You can register a subdomain (mobile.website.com, m.website.com etc) and let the user access the mobile or desktop version of their own volition. That way the mobile version is accessible on desktop and vice versa. I know Whiskey Media does this, and their mobile design is incredible (and works on both).
I think this is the best option. There are several downsides however. The first being that it essentially means that 2 websites have to be maintained as they are stored in separate directories on the hosting server. I don't think this will be much of an issue for me because a portfolio site is quite static. I will have to update images but that is more easily done then changing code. The other problem is that users have to choose it themselves. This can be somewhat mitigated by placing a link to the mobile version, and promoting the mobile version separately (I will place both addresses on my business cards).
I still have more to learn but with the time constraints I will fit in what I can. With these decisions out of the way it is time to code!
Resources: Helpful Links
I have been looking at a lot of articles and tutorial sites as part of my research and to best make use of them I am going to keep a log of them here so I can easily access them. Some of them are incredibly useful, offering examples, walking you through or discussing concepts that I need to understand.
Utilities
http://protofluid.com/
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://www.blueprintcss.org/
Design
http://www.thecssninja.com/css/futurebox3
http://www.miltonbayer.com/font-face/
http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
http://www.lovelyui.com/
http://border-radius.com/
Mobile Coding
http://designreviver.com/tips/how-to-designing-a-mobile-website/
http://www.andrewgreig.com/2010/07/useful-code-snippets-for-mobile-web-development/
http://webdesign.about.com/od/mobile/a/write-web-pages-for-the-iphone.htm
http://thinkvitamin.com/mobile/coding-for-the-mobile-web/
http://slodive.com/web-development/a-roundup-of-15-mobile-web-design-tutorials/
http://snippetspace.com/projects/iwebkit/
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Utilities
http://protofluid.com/
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://www.blueprintcss.org/
Design
http://www.thecssninja.com/css/futurebox3
http://www.miltonbayer.com/font-face/
http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
http://www.lovelyui.com/
http://border-radius.com/
Mobile Coding
http://designreviver.com/tips/how-to-designing-a-mobile-website/
http://www.andrewgreig.com/2010/07/useful-code-snippets-for-mobile-web-development/
http://webdesign.about.com/od/mobile/a/write-web-pages-for-the-iphone.htm
http://thinkvitamin.com/mobile/coding-for-the-mobile-web/
http://slodive.com/web-development/a-roundup-of-15-mobile-web-design-tutorials/
http://snippetspace.com/projects/iwebkit/
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Research: Mobile Design
Mobile design is a relatively new field given the rise of smart phones and their ability to utilise the web almost as well as a desktop computer. In order to find the right design for a mobile site I need to do some research.
Giant Bomb
One of my favourite websites is Giant Bomb, a site about videogames. They have an in-house engineering and design team that is constantly improving the site and developing tools for staff and users. As a subscriber I have access to their mobile site, which is a smart phone optimized version of the regular site.
The desktop website is fairly wide and expands depending on the resolution. The navigation bar is long, and the content is wide to make use of the space. There are multiple columns and large images throughout, which would prove difficult to fit on a mobile screen.
For their mobile website the design has been streamlined significantly. The logo and navigation are much smaller and simplified. The navigation is broken out below the logo now and account management now sits along side it. The main content now fits in to a long central column with more focus on the 'featured' content (in this case a thumbnail leading to a video, with a description). They apply the mobile site by using a subdomain, m.giantbomb.com and this allows them to give people the choice between mobile and desktop layout.
The site is fast, adaptive and efficient. I contacted Dave Snider, one of the main designers for Whiskey Media (the parent company) and asked him about advice he had for mobile development. Here is what he had to say:
"If you're trying to build a site that works across desktop and mobile resolutions you might want to check out some of the fun things that can be done with media queries. The real advice is to just keep it simple. Use flat colors and big buttons."
Very to the point but solid advice none the less, I feel. I will be taking his advice to heart, since the mobile site he helped design is one of the best out there.
Coding
He linked me to a site called Zomigi, which had some very useful tips regarding media queries which can be used to change elements of design by requesting different style sheets dependent on the design etc. It talks through the process of choosing what to eliminate in a mobile design or when designing for different resolutions. It shows how you can deliver different content for different size screens.
Source: http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/
I also found another article detailing media queries to produce mobile layouts, which is very interesting.
Source: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Design
On the design front, I found a website that contains a showcase of many mobile layout. There is a good variety and gives me plenty of ideas for the potential of my website.
A lot of them feature elements that Dave was talking about. Flat colours and big buttons. This seems the most sensible route.
Source: http://www.lovelyui.com/
Giant Bomb
One of my favourite websites is Giant Bomb, a site about videogames. They have an in-house engineering and design team that is constantly improving the site and developing tools for staff and users. As a subscriber I have access to their mobile site, which is a smart phone optimized version of the regular site.
The desktop website is fairly wide and expands depending on the resolution. The navigation bar is long, and the content is wide to make use of the space. There are multiple columns and large images throughout, which would prove difficult to fit on a mobile screen.
For their mobile website the design has been streamlined significantly. The logo and navigation are much smaller and simplified. The navigation is broken out below the logo now and account management now sits along side it. The main content now fits in to a long central column with more focus on the 'featured' content (in this case a thumbnail leading to a video, with a description). They apply the mobile site by using a subdomain, m.giantbomb.com and this allows them to give people the choice between mobile and desktop layout.
The site is fast, adaptive and efficient. I contacted Dave Snider, one of the main designers for Whiskey Media (the parent company) and asked him about advice he had for mobile development. Here is what he had to say:
"If you're trying to build a site that works across desktop and mobile resolutions you might want to check out some of the fun things that can be done with media queries. The real advice is to just keep it simple. Use flat colors and big buttons."
Very to the point but solid advice none the less, I feel. I will be taking his advice to heart, since the mobile site he helped design is one of the best out there.
Coding
He linked me to a site called Zomigi, which had some very useful tips regarding media queries which can be used to change elements of design by requesting different style sheets dependent on the design etc. It talks through the process of choosing what to eliminate in a mobile design or when designing for different resolutions. It shows how you can deliver different content for different size screens.
Source: http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/
I also found another article detailing media queries to produce mobile layouts, which is very interesting.
Source: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Design
On the design front, I found a website that contains a showcase of many mobile layout. There is a good variety and gives me plenty of ideas for the potential of my website.
A lot of them feature elements that Dave was talking about. Flat colours and big buttons. This seems the most sensible route.
Source: http://www.lovelyui.com/
Research: Typography in Web Design
I found this very interesting article giving examples of good/interesting use of typography in web design.
Source:
http://www.noupe.com/showcases/the-showcase-of-bold-typography-in-web-design.html
It has given me great ideas about trying to stand out using type. Whether that be in the logo or use of typefaces to distinguish different elements. The article gives a pretty spot on and interesting analysis of what makes these pages good based on their typographical choices.
Some of my favourites:
http://www.denisechandler.com/
The use of typography and illustration really make this stand out as a unique page and immediately hold my interest. There is clearly nothing else like it.
http://www.forefathersgroup.com/
The simplicity of the design here relies on the very ornamental and old fashioned typeface. It isn't too obtrusive though (although rather large) but distinguishes it from modern, more sleek typefaces used on the web.
http://www.richbrown.info/
The typography is very bold, and very high contrast. There is nothing especially fancy going on, it is just simple and bold grabbing your attention without anything visually complex.
http://www.elysiumburns.com/
The use of different typefaces here and especially different sizes helps break this very dense page down in to distinct and manageable sections. Each typeface serves a purpose and looks good individually, but also act as defining it's own section.
Combining Typefaces
Smashing Magazine wrote an excellent article on how best to combine 2 or more typefaces, and giving advice about how best to judge what works well together. I like the concept of juxtaposition, using a serif typeface with a sans serif typeface, and using different weights.
Source: http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
Source:
http://www.noupe.com/showcases/the-showcase-of-bold-typography-in-web-design.html
It has given me great ideas about trying to stand out using type. Whether that be in the logo or use of typefaces to distinguish different elements. The article gives a pretty spot on and interesting analysis of what makes these pages good based on their typographical choices.
Some of my favourites:
http://www.denisechandler.com/
The use of typography and illustration really make this stand out as a unique page and immediately hold my interest. There is clearly nothing else like it.
http://www.forefathersgroup.com/
The simplicity of the design here relies on the very ornamental and old fashioned typeface. It isn't too obtrusive though (although rather large) but distinguishes it from modern, more sleek typefaces used on the web.
http://www.richbrown.info/
The typography is very bold, and very high contrast. There is nothing especially fancy going on, it is just simple and bold grabbing your attention without anything visually complex.
http://www.elysiumburns.com/
The use of different typefaces here and especially different sizes helps break this very dense page down in to distinct and manageable sections. Each typeface serves a purpose and looks good individually, but also act as defining it's own section.
Combining Typefaces
Smashing Magazine wrote an excellent article on how best to combine 2 or more typefaces, and giving advice about how best to judge what works well together. I like the concept of juxtaposition, using a serif typeface with a sans serif typeface, and using different weights.
Source: http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
Analysis: Current Website
I want to build my new website largely off of my existing website, but with considerable improvements based on what I have learned.
Home Page
My current home page is sectioned off very distinctly allowing the user to recognize the sections. However, the header is too chunky, as are the icons. Reducing the text might also improve the page. I have placed a feed of my twitter posts on the front page which is something I think I will carry forward on to the new website.
The main feature of the page is the image slideshow. I can create images and place them in the XML and javascript based slideshow code and it will cycle through each image after a couple of seconds. This makes the home page less static as well as giving a broad tour of the work on my website. It is, however, outdated. It is good that it links to the work that is shown and I think I will carry an improved version of this concept on to my new website.
The navigation here is too big, numerous and cluttered. There are a lot of pages I need to cut down on, and I don't need so many drop down menus. It also suggests equality between all of the disciplines on display, which is not accurate (I am not very good at Flash, for example). This will just frustrate and confuse the user. Consolidating content will be my main goal.
Video Pages
As you can see, my video pages are very poorly formatted. A large paragraph of text and then an embedded youtube video. The text is unappealing and it doesn't need to come first. Also, the embedded Youtube video isn't of great quality and it's flash meaning it won't work on Apple devices.
I have thought about using HTML 5 'Video For Everyone', but Youtube have started to support H.264 and on iPhone will redirect to the app or mobile site. Also, I will want to cut down on the amount of videos I have on the site.
Project Pages
My project pages are not formatted to show of the projects themselves. They contain a large preamble in the form of a paragraph of text, and then some small images. I need to structure the page better and put images at the core, that way if people are interested they can read more.
'Art'
One of the worst problems with this page is it's name. I don't do art. It's really all my graphic design and illustration work that doesn't fit anywhere else. I will have to correct this. It needs to be updated with more recent and better images.
Home Page
My current home page is sectioned off very distinctly allowing the user to recognize the sections. However, the header is too chunky, as are the icons. Reducing the text might also improve the page. I have placed a feed of my twitter posts on the front page which is something I think I will carry forward on to the new website.
The main feature of the page is the image slideshow. I can create images and place them in the XML and javascript based slideshow code and it will cycle through each image after a couple of seconds. This makes the home page less static as well as giving a broad tour of the work on my website. It is, however, outdated. It is good that it links to the work that is shown and I think I will carry an improved version of this concept on to my new website.
The navigation here is too big, numerous and cluttered. There are a lot of pages I need to cut down on, and I don't need so many drop down menus. It also suggests equality between all of the disciplines on display, which is not accurate (I am not very good at Flash, for example). This will just frustrate and confuse the user. Consolidating content will be my main goal.
Video Pages
As you can see, my video pages are very poorly formatted. A large paragraph of text and then an embedded youtube video. The text is unappealing and it doesn't need to come first. Also, the embedded Youtube video isn't of great quality and it's flash meaning it won't work on Apple devices.
I have thought about using HTML 5 'Video For Everyone', but Youtube have started to support H.264 and on iPhone will redirect to the app or mobile site. Also, I will want to cut down on the amount of videos I have on the site.
Project Pages
My project pages are not formatted to show of the projects themselves. They contain a large preamble in the form of a paragraph of text, and then some small images. I need to structure the page better and put images at the core, that way if people are interested they can read more.
'Art'
One of the worst problems with this page is it's name. I don't do art. It's really all my graphic design and illustration work that doesn't fit anywhere else. I will have to correct this. It needs to be updated with more recent and better images.
Production Planning: Timeboxing
With a 4 week production timeline I feel the need to plan my actions to fit within this time constraint. I once listened to a talk by the Game Developer 'Double Fine', and they mentioned a concept called 'Timeboxing' for their production process, so I decided to look it up.
Source: http://en.wikipedia.org/wiki/Timeboxing
Although typically associated with software development, it seems an ideal model for me to use over the 4 week production timeline. While not taking the form of boxes, I have drawn up a time table for my sketchbook containing 2 goals (deliverables) per week, all clearly labeled with their due date. The budget does not factor in to my needs so I have omitted it.
This should ensure a tighter work pipeline by allowing me to see at a glance where I should be at any given time.
Timeboxing is a Planning technique common in planning projects (typically for software development), where the schedule is divided into a number of separate time periods (timeboxes, normally two to six weeks long), with each part having its own deliverables, deadline and budget.
Source: http://en.wikipedia.org/wiki/Timeboxing
Although typically associated with software development, it seems an ideal model for me to use over the 4 week production timeline. While not taking the form of boxes, I have drawn up a time table for my sketchbook containing 2 goals (deliverables) per week, all clearly labeled with their due date. The budget does not factor in to my needs so I have omitted it.
This should ensure a tighter work pipeline by allowing me to see at a glance where I should be at any given time.
Final Idea
Having thought of what I'd like to do for this project I decided on an idea, and have had it approved.
Portfolio & Mobile Site
I would like to produce a re-designed portfolio website as well as a mobile website for smart phones.
Here is my project proposal, outlining in more detail what the project is and my reasons for choosing it.
This is my aim, and completing the degree this year means that I will need a strong portfolio in order to start gaining experience in the industry.
Portfolio & Mobile Site
I would like to produce a re-designed portfolio website as well as a mobile website for smart phones.
Here is my project proposal, outlining in more detail what the project is and my reasons for choosing it.
Self Branding
During the course of this year I have covered many interesting types of media and expanded my skill sets. One of the more interesting aspects, however, has been talks from industry professionals. They have talked about how they started out, their industry experience and giving advice.
I made a lot of notes about these pieces of advice and one recurring thing I noticed is about the importance of portfolios, which is a form of self branding. You are selling yourself to design companies, and your portfolio should reflect what you have to offer. My current portfolio was built at a time where I just wanted to have an online presence, but unclear of how to do it. I built a site, put it up and it has been stagnating ever since.
Using the advice and all I have learned in the current academic year I propose a portfolio site to be built by me that incorporates lessons learned regarding self branding, promoting my talents, usability and technical considerations. What I present on my portfolio is also a key aspect. I currently have most of the projects that I am happy to show, presented in an overly cumbersome way. I would like to cut the content down and aim it more towards my interests and abilities.
I also propose a mobile version of my portfolio for smart phones. Something I found very interesting in the academic portion of this year is the proliferation of mobile devices and how it is changing media. The uptake of devices capable of mobile web browsing means that it cannot be ignored and I should aim to deliver an optimal version of my website for the platform. Not only should I have to consider cross browser development, but cross platform as well.
I believe the redesign will be a sufficient creative challenge, and the mobile website will be a significant technical challenge utilising modern languages such as CSS3 and HTML 5.
This is my aim, and completing the degree this year means that I will need a strong portfolio in order to start gaining experience in the industry.
Ideas: Print, Web, Interactive?
Having so much freedom on a brief is both a pleasure and a problem. We have covered so much this year. Interactive applications through processing, videos, virals, motion graphics and I have pursued illustration and print in my personal time. With so many options it is hard to pin down what I want to do.
My initial ideas involve print based work, as this is something I feel I enjoy more than other areas, and would like to expand in to. I have begun developing an idea for a print based campaign against smoking and binge drinking, using art styles based on artists from the 20th century (Saul Bass, for example) and focus on the posters as 'art' rather than authoritative messages.
My theory behind this idea is based on a quote by David Hockney.
Based on my experience with a lot of these posters they often use shock imagery and very bold type demanding certain action. This must work, in it's own way but I would like to try taking a different approach to the problem. Using art would create images that are interesting in their own right, and remembered for being clever, interesting, or just visually appealing and therefore stick in a persons mind because they want to, rather than scaring them.
It has been pointed out to me that I don't have any justification or research for my reasoning, and that I would need to do thorough research in to my target audience. Is this an effective approach regarding young people? I feel it is, but feeling alone is not enough. Not only that, but also print is a medium which has been severely impacted by the digital media revolution, reducing it's impact, people's interest levels in printed media, and the reach of it's content. Most print campaigns also feature digital components, and these do not quite fit in with my ideas.
I have also been thinking about producing something web based, as I find coding relatively pleasing and a website is in a sense interactive, making it slightly more engaging. We have had several speakers come in lately, one of which spoke about UX design (User experience and User Interface) which I found very interesting and I would like to put in to practice.
My initial ideas involve print based work, as this is something I feel I enjoy more than other areas, and would like to expand in to. I have begun developing an idea for a print based campaign against smoking and binge drinking, using art styles based on artists from the 20th century (Saul Bass, for example) and focus on the posters as 'art' rather than authoritative messages.
My theory behind this idea is based on a quote by David Hockney.
"Art has to move you and design does not, unless it's a good design for a bus."
- David Hockney
Based on my experience with a lot of these posters they often use shock imagery and very bold type demanding certain action. This must work, in it's own way but I would like to try taking a different approach to the problem. Using art would create images that are interesting in their own right, and remembered for being clever, interesting, or just visually appealing and therefore stick in a persons mind because they want to, rather than scaring them.
It has been pointed out to me that I don't have any justification or research for my reasoning, and that I would need to do thorough research in to my target audience. Is this an effective approach regarding young people? I feel it is, but feeling alone is not enough. Not only that, but also print is a medium which has been severely impacted by the digital media revolution, reducing it's impact, people's interest levels in printed media, and the reach of it's content. Most print campaigns also feature digital components, and these do not quite fit in with my ideas.
I have also been thinking about producing something web based, as I find coding relatively pleasing and a website is in a sense interactive, making it slightly more engaging. We have had several speakers come in lately, one of which spoke about UX design (User experience and User Interface) which I found very interesting and I would like to put in to practice.
New Project: Independant Project
Unit MUH85 - Independant Project
The brief for this project states that it is to test our ability to work independently. That means very little lecture guidance, and self initiated project creation and development.
This is an opportunity to apply a lot of the things learned throughout the course and very open as there is not a set product or brief. A series of quotes about design have been given about potential starting points. I may use one of these or come up with my own idea entirely.
The brief for this project states that it is to test our ability to work independently. That means very little lecture guidance, and self initiated project creation and development.
This is an opportunity to apply a lot of the things learned throughout the course and very open as there is not a set product or brief. A series of quotes about design have been given about potential starting points. I may use one of these or come up with my own idea entirely.
Subscribe to:
Posts (Atom)