Final mockup approved by client. Improved design solution for buttons.
ShareThis
Posts
Template:CurrentVersion
-
← Older revision Revision as of 15:04, 21 November 2024
Line 1: Line 1:
−
6.7
+
6.7.1
Showing posts with label mobile devices. Show all posts
Showing posts with label mobile devices. Show all posts
15.2.11
Nuli! Nuli! Project: Wushu Logo Design Finalized
The finished logo (and arrows) has a flexible transparent background. As requested I did not replace the links with buttons; instead I also produced color coded arrows to make its interactive interface more obvious and give clarity to the web sites functionality. They can easily be removed from the table cells. Client was very happy with the design so far. Neither of us were happy with the button style yet.
7.2.11
Nuli! Nuli! Project: Color Palette - Mobile Design Consideration
One of the first steps for design conception was getting color preferences from the client.
Legend for color palette
flickr pink smashing mag orange nciku green yahoo purple
flickr blue twitter blue nckiku red paper cut black
gradient color - minimalist background shading
More than likely the final design would use no more than 1- 3 colors. I will be picking from this palette for sketching ideas for graphics and text.
Moblie Device Considerations
The W3 Mobile Best Practices USE_OF_COLOR - states that you should make sure that information conveyed with color is also available without color.
Should use contrasting foreground and background colors means for a readable page that does not use colors for the background color and the text color that are too similar.
4.2.11
Designing for Mobile Device Usability
Image via CrunchBaseThe Nuli Nuli website needed to display as a "full" website on monitors as well as comfortably in mobile devices, I had to research mobile device usability.
3 categories mobile devices
1. Devices with screens that have widths between 320 and 480 pixels, that support CSS, and that support screen media types and media queries. This includes the iPhone, the G1 and many Android devices.These devices will be able to support all of the optimizations we put in place.
2. Devices that support CSS and that either support the handheld media type or support the screen media type and media queries and have screens smaller than 320px wide. We'll create separate, simplified CSS rules for these devices since their screen size will limit what they are able to display.
3. Devices that don't support CSS.
240 x 320 (a.k.a. QVGA) should be the standard for mobile development. Use 320 pixels wide mock-up.
Lucky for me the client was only targeting the newer mobile screens, Android and iPhone, so I didn't have to contrain my design for small screen devices.
My primary referance was the W3 Mobile Best Practices. I made notes of the items to consider for visual design such as images and stylesheets. Here are some mobile device usability considerations from various sources.
* The site logo should be replaced (or adapted) for each device grouping to ensure image clarity.
* Headers should stretch to 100% of the screen width using the supplied background image where possible.
* Content images should be no larger than 200px wide for the 'default grouping' (or 80% of the device's screen width).
* Content images should be automatically scaled and optimized to screen width if an alternate does not exit.
* List icons are not to be used on displays smaller than the 'default grouping' in order to make as much space available for the actual content.
* A dynamic style sheet is to be used in order to set many values on-the-fly for each device, and cached appropriately.
most sites designed for mobile website are aligned to the left with content in vertical stacked fluid containers (no floats). Good examples of mobile websites:
http://mobile.fandango.com/ good example for CSS styling w/ client colors orange and green -- also like the black outline on red-orage logo[ check bookmarks for citations]
http://mobile.theonion.com/
http://home.mobile.msn.com/en-us/default.aspx
https://ssl.m.bestbuy.com/m/b/registration/signin.jsp note vertical placement of form labels
Subscribe to:
Posts (Atom)
