designing effective websites
play

Designing Effective Websites Day 4 - April 29 Homework: Applying - PowerPoint PPT Presentation

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


  1. Designing Effective Websites Day 4 - April 29

  2. 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?

  3. 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?

  4. 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

  5. styletil.es

  6. Webstiles • http://webstiles.namanyayg.com/ • inspired by StyleTiles • provide a quick-to-use HTML/CSS template

  7. 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.

  8. 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."

  9. • The opportunities and growth in mobile are huge. • Must consider what mobile means for our own sites.

  10. 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?

  11. • 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.

  12. 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.

  13. 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).

  14. From Where Are Your Visitors Linking?

  15. Mobile:Design Constraints • Initial reaction often focuses on limitations. • Designing for mobile first, we embrace the constraints. • Forced to prioritize up front.

  16. 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.

  17. 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.

  18. 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/

  19. Location

  20. 2 Things to Consider

  21. 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.

  22. 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)

  23. 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.

  24. Maintain Clarity and Focus • Remember "One Eyeball and One thumb". • Must be clear and focused. • Make it easy for visitor to get things done.

  25. `

Recommend


More recommend