Maps In Modern Web Design: Showcase and Examples - Smashing Maga Advertisement Geo-location was a hot topic in 2009. With so many applications on GPS-enabled smartphones, more maps than ever were accessible to the average person. But how can Web designers and developers take advantage of an increasingly location-aware user base? This article explores existing trends, conventions and the possible future of interactive maps online. The Fundamentals Of Online Maps When most people think of maps on the Internet, Google, MapQuest and TomTom might come to mind. This isn’t a lesson in cartography, but understanding the purposes that maps can serve in modern Web design is important. Navigation and directions,Show relationships and trends geographically,Show points of interest. Interactive Maps The expansion of Web technology over the past decade has opened a number of doors to presenting data online. Interactive maps on the Internet present data most effectively when they invite action from the user. Panning and zooming are fundamental to the interactive map.
Trendspotting: Rich Autocomplete in Site Search | Get Elastic One trend I’ve noticed on a few enterprise software sites is the use of rich autocomplete in search results, although I haven’t seen it on other retail categories. For example, Dell.com uses a simple autocomplete feature in its search box. Autocomplete is helpful to the customer because it prevents errors from misspellings or synonyms the search engine doesn’t support (and the dreaded “0 results found”). With rich autocomplete, the retailer can include thumbnail images, prices, value propositions, special offers etc. Apple Store Because the brain recognizes and interprets images faster than text, showing thumbnails of Final Cut Pro software for quick scanning is better than a list of text links. Though Apple tries to sneak in calls-to-click unrelated to “Final Cut Pro” like the App Store and the Snow Leopard operating system, these options disappear as the customer continues to type characters in the box (from “Fi” to “Final” for example). Adobe Microsoft Just the beginning?
Data Visualization and Infographics Resources - Smashing Magazin Advertisement Data visualizations and infographics can make complex datasets easier to understand and comprehend. By creating a graphical represenatation of data and statistics, complicated concepts and information can make more sense in less time. Many visualizations focus on representing a specific set of data or statistical information. But visualizations and infographics can be used poorly, too. Also consider our previous articles: Data Visualizations and Infographics which lists examples and types of infographics and data visualizations.Data Visualization: Modern Approaches showcases modern examples of data visualization and infographics. 1. Here are some blogs and website that provide great information for information designers, including how-to articles, visualization showcases and galleries, and other resources. Strange Maps Strange Maps features only map-based graphics, both modern and historical. Wall Stats Visual Complexity Cool Infographics Data Mining Edward Tufte Infographics News
How Conceptual Metaphors are Stunting Web Innovation Venkatesh Rao is a researcher in the Xerox Innovation Group, and the project manager for Trailmeme, a research beta technology that allows users to blaze and follow trails through web content and the Trailmeme for WordPress plugin. He blogs at ribbonfarm.com. As much as we focus on developing new technologies, it is also essential that we break free of certain metaphors that bind and restrict our thinking about what these technologies can ultimately achieve. The familiar "document" metaphor, among others, has cast a long shadow on how we think about the web, and is standing in the way of some innovation. The Conceptual Metaphor In his classic study of media theory, Understanding Media, Marshall McLuhan wrote, “We look at the present through a rear-view mirror. Consider these terms: page, scroll, file, folder, trash can, bookmark, inbox, email, desktop, library, archive and index. It is important to understand that the document metaphor is more than a UI metaphor. The solution? Conclusion
InfoGraphic Designs: Overview, Examples and Best Practices | Ins Information graphics or infographics are visual representations of information, data or knowledge. These graphics are used where complex information needs to be explained quickly and clearly, such as in signs, maps, journalism, technical writing, and education. They are also used extensively as tools by computer scientists, mathematicians, and statisticians to ease the process of developing and communicating conceptual information. They can present a rich amount of information without intimidating you. You may be interested in the following related articles as well. Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful. Don’t forget to and follow us on Twitter — for recent updates. What is InfoGraphics? Infographics are traditionally viewed as visual elements such as signs, charts, maps, or diagrams that aid comprehension of a given text-based content. Little History of InfoGraphics! Why Using InfoGraphics? Elements of Information Graphics
Useful Usability Article Of The Future: Scientific Research Meets The Web Scientific journal Cell has undergone a design change to add a dynamic element to their research articles. Taking a page from web page information architecture, Cell has adopted a new layout that makes navigation easier, and forgoes the staid look of traditional research papers. Ars Technica reports: What Cell came up with was a format it has christened “Article of the Future.” Articles of the Future are broken down into their respective sections (Introduction, Discussion, Figures, and so on) with a navigation section at the top, allowing readers to jump to the sections they are most interested in. The landing section of each article is a bullet-point summary and abstract next to a representative image, allowing readers a quick take-away message if that’s all they’re looking for (video descriptions called a “PaperFlick” appear here, when available). Ars Technica: “Cell launches “Article of the Future” format”
Design Trends (Predictions) in 2010 As we are stepping in a new decade, I can foresee that web design in 2010 is going to be fun and filled with experimental works. With the new CSS3 and HTML5, designers and developers are trying to utilize the new features to create impressive designs. Sketchy and large background styles are fading out. Serif Fonts In the last decade, most web sites were designed in either Verdana or Arial (sans-serif fonts), but that is going to change in this new decade. Big Headings Big headings in header (as part of design interface) will gain more popularity in 2010. Custom Font Embedding As Typekit is expanding their font list and more free quality fonts are available (e.g. Texturized Background The big background trend is going to be gradually out-of-date and be replaced with subtle and texturized (particularly the light noise) background. Minimalist & Grid Minimalist and grid designs are not today's new. CSS3 New Features CSS3 Animation Rounded Borders and Box Shadows Text Shadow RGBA & Opacity Conclusion
Content Analysis Heuristics Most website designers are aware that an important part of understanding the background of any website redesign project is performing a content inventory as well as a content analysis. After all, authorities Lou Rosenfeld and Peter Morville include this famous Venn diagram in their classic Information Architecture for the World Wide Web: Clearly, we are supposed to understand the current website content before we begin the process of redefining and reorganizing the website. So we all dutifully go through the website and prepare a content inventory spreadsheet capturing page titles, details of page content, and so on. Each content inventory contains a different set of columns and fields; each has a purpose specific to the needs of the particular site being analyzed. So doing a content inventory is all well and good, but what exactly is it about the content that we are supposed to understand? Content Analysis Heuristics Each of these heuristics will be discussed in detail in turn. Collocation
Complete Beginner’s Guide to Information Architecture Timothy Greig structures the information flow of a library website. Photo by Timothy Greig Information architecture is an often misunderstood job title. Are they Designers? Developers? Managers? Along the way we’ll share some of the tweeters, books, and resources we found useful for budding information architects. A Common Workplace Scenario An information architect joined my team on a project I worked on in Atlanta. Who is an Information Architect? I find it easiest to derive what a job entails by listening to the people who do that job. Jesse James Garrett says: Information architecture encompasses a wide range of problems. Jesse James Garrett The Information Architecture Institute defines Information Architecture as: The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability. Information Architecture Institute Lastly, to quote Andrew Hinton: Andrew Hinton in Linkosophy Each quote is insightful. Evolution of the IA