Designing Effective Websites Day 4 - April 29
Homework: Applying the Principles to Your Design • Looking at your wireframe (or even your existing site), list adjustments you could make to improve emphasis? • Can you envision opportunities for harmony/ contrast in your site? • Does your design or theme employ Repetition, Variety or Scale? Are there pages or sections of your site that could?
What Does this Mean for Me??? • Should I create a Design "Comp" now? • Can I just start coding my HTML and CSS? • What if I am using WordPress?
Another Designer Tool • Style Tiles • Creator: Samantha Warren • Goal: consistent fonts, colors and interface elements to communicate the essence of a visual brand • Help form a common visual language between the designers and the stakeholders
styletil.es
Webstiles • http://webstiles.namanyayg.com/ • inspired by StyleTiles • provide a quick-to-use HTML/CSS template
Last Week… • Read the HyperArts.com post: What is Responsive, Adaptive and Fluid Design? Defining Terms in a Multi-Device World. • Watch Luke Wroblewski’s Mobile First (https:// vimeo.com/38187066) presentation that coined the term “Mobile First.
Mobile First • Luke Wroblewski's take on designing for the mobile audience FIRST. • Another "small" book that would be a great addition to your personal library. As web creators, we need to be aware of more than "...just the syntax."
• The opportunities and growth in mobile are huge. • Must consider what mobile means for our own sites.
Traditional vs. Mobile • Our "traditional" website may still receive a majority of the traffic (…maybe not) • Are you prepared for increased traffic? • Have we considered their use cases?
• The local review service had over 45M unique visitors in 2010. • Only 3.2 M (7%) came via their mobile app. • But mobile was responsible for 35% of their system searches.
Native Mobile Apps • Apps you actually install on your device (usually via an "app store") • Directly access the device's hardware and system resources. • More robust and geared to specific goal(s). • More difficult to develop and implement.
Mobile Web Solution • Run in the mobile browser of your device. • Even if you have a Native Web App, you still need a Mobile Web Solution. • "Web links don't open apps, they go to web pages," Jason Grigsby (Mobile Strategist).
From Where Are Your Visitors Linking?
Mobile:Design Constraints • Initial reaction often focuses on limitations. • Designing for mobile first, we embrace the constraints. • Forced to prioritize up front.
Screen Size • Must understand what user is looking for or to do. • Must identify what is truly important. • Forces us to eliminate any content that is of questionable value.
Time and Place • Mobile devices are with the owners at all times. • Usage context has a big impact on design. • Now we are designing something that is used anywhere and anytime.
Time • Mobile usage different times of the day when compared to that of non-mobile devices. • The length of our mobile use sessions are shorter - coming in bursts. http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/
Location
2 Things to Consider
Organizing Our Content and Actions Given the constraints of mobile, we must look to: • Align with how people use their mobile devices and why. • Emphasize content over navigation. • Maintain clarity and focus.
Align With Mobile Behaviors • Lookup / Find (urgent info, local) • Explore / Play (bored, local) • Check In / Status (repeat/micro-tasking) • Edit / Create (urgent change / micro-tasking)
Content Over Navigation • On mobile, content takes precedence over navigation. • Users want immediate answers upon first glance. • Don't want to force the mobile user to have to navigate to get to the info they want.
Maintain Clarity and Focus • Remember "One Eyeball and One thumb". • Must be clear and focused. • Make it easy for visitor to get things done.
`
Recommend
More recommend