|
14 wunderschöne Inhalt-Heavy-Websites für Inspiration
""\"\\\"What is ith\\\\nThe national professional membership organization for the graphic arts, AIGA has its hands in many avenues of outreach for its members, including conferences, perks, publishing and more. In this instance, presenting their overwhelming amount of available content in an effective way meant exploring outside the traditional layouts of similar organizations.\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/bostonglobe.com\\\\n\\\\nWhy we like it\\\\nGiant imagery Each article is accompanied by a truly massive header image that lets the reader know in no uncertain terms just what theyre about to read.Intro sliders Many of Co.Designs articles open with an image slider containing key images from the body of the article. They serve as an excellent visual intro for the text that is to follow, and get the reader primed for the overall tone of the article.Think Quarterly by Google\\\\n\\\\n\\\\nWhat is ith\\\\nOne of the best-known magazines for Black-American articles, opinion and insight, Ebony covers an incredibly broad number of topics in its mission to share the perspectives of the African-American community.\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/www.newyorker.com\\\\\\\/\\\\n\\\\nWhy we like it\\\\nWhitespace Being a newspaper, by far the most important content is the text, meaning that careful attention has been paid to ensuring a pleasurable reading experienceVisual hierarchy Articles with an image are more attractive and therefore more important than those without. This rule is further emphasized by the size of the accompanying image, with the leading story having significantly more space devoted to it.Hidden content The leading stories in each news category are smartly hidden in the mega-menu, which is revealed on hoverCo.Design\\\\n\\\\n\\\\nRead others takes on planning and creating good, content-heavy websites:\\\\n\\\\n \\\\nDesigning a good website that accommodates a lot of content is a tricky balancing act to pull off. Does one attempt to present the user with all the information in a clean, organized manner, or reveal it bit-by-bit, in an effort to create an engaging breadcrumb trail that tugs the user along the road to enlightenmenth Get it wrong, and you risk overwhelming your visitors, wholl then leave without retaining any part of what they just read. Get it right, though, and youll have gained a new audience member who not only understands your message, but also might just bring a few friends with them when they return.\\\\n\\\\nWhat is ith\\\\nThis widely-reknowned newspaper caught the attention of the Web last year, when they rolled out a major site redesign one of the first mainstream sites to embrace responsive design methods.\\\\n\\\\nPolygon is a videogame review site from the founders of gadget-enthusiast upstart The Verge (also profiled here).\\\\n\\\\nWhat is ith\\\\nOne of the de-facto bibles of designing for the Web, A List Apart publishes daily, thought-provoking articles on the finer points of our craft. This is deep, thought-provoking stuff, so a usable interface and pleasurable reading experience are paramount.\\\\n\\\\nWhy we like it\\\\nClean & simple typography ALAs design is well-known in the Web design community for microscopic attention to detail when it comes to the typography on the site. Each line, heading and pull quote is fastidiously and consciously adjusted for perfect readability.Disciplined editing Despite the length of ALAs articles, youll notice that there arent any overly-long sections of content. Each post has been carefully broken up into easily-digested paragraphs of 2-3 sentences each.The Black Harbor\\\\n\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/theblackharbor.com\\\\\\\/\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/www.whatisblik.com\\\\\\\/\\\\n\\\\nWhat is ith\\\\nThe original home of pan-genre tech and geek journalism, Wired covers a breathtaking variety of detailed content making accommodating it all comfortably on their website quite the achievement.\\\\n\\\\nWhy we like it\\\\nReadability Clear sans-serif type, and comfortable column widths keep things simple and easy to read.Consistent typography All headlines, quotes and other text content elements are cohesive across the sprawl of this site.Boston Globe\\\\n\\\\n\\\\nWhat is ith\\\\nGoogles quarterly publication with their musings on the trends and movements of the Web is a surprisingly refreshing reading experience coming from a company with a reputation for deeply-entrenched engineering background.\\\\n\\\\nWhat is ith\\\\nA showcase of art spanning an eclectic variety of styles from the artist collective I Shot Him Because I Loved Him, Damn Him.\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/www.fastcodesign.com\\\\\\\/\\\\n\\\\nWhy we like it\\\\nStory collage The homepage begins with a big, colorful jigsaw puzzle of leading stories headlines, providing a glimpse into the articles they link to, as well as a strong visual draw for the eye.Thumbnail sliders At certain points, the pages are broken up by a useful carousel of image thumbnails, each allowing the user to drill into a specific story.You Need To Read This Now By giving its top stories a bit of whitespace and accompanying them with an explicit directive, The Verge is able to focus attention on the hottest news it has to offer.Conde Nast\\\\n\\\\n\\\\nSemantic Categorization Categorize your content in a way that makes sense to your user not to you, nor your client, nor your colleagues. Be ruthless in identifying and eliminating internal jargon and acronyms that you toss around in a usual day at the office.\\\\n\\\\nWhy we like it\\\\nClean, organized grid The clean, sharp lines and rigid layout of this design maintains an orderly feel to this site, which keeps it from feeling disorganized or difficult to navigateUser-adjustable layout USAToday offers visitors the choice between a List or Grid view of their top stories. This allows users to control how much they take on at once allowing them to effectively choose their preferred approach to browsing the content.The New Yorker\\\\n\\\\n\\\\nPrioritize When everythings important, nothing is. You should clearly establish what content is required by the user up-front, and what can be hidden. Once youve figured that out, make that hidden information easy to find when needed.\\\\n\\\\nWhy we like it\\\\nGiant imagery Much like Polygons fine example, Ebony uses striking and large images to not only set the tone, but also give users strong implications as to the most important articles on their homepage. Their homepage slider alone takes up the vast majority of the screen on laptop resolutions and below.Bold typographic hierarchy Ebonys signature headline font, Didoni, serves to call out the major articles on the site at the present moment, with secondary stories headlined in Trade Gothic.Wired\\\\n\\\\n\\\\nDesign Consistently Keeping all your elements, typography and spacing consistent across the whole site takes on a whole new level of importance when taking on a content-rich site, not only for the users sakes, but for minimizing future maintenance headaches. For example, keep related image assets all the exact same dimensions, so they can be reused seamlessly across the site.\\\\n\\\\nWhy we like it\\\\nMasonry The New Yorkers homepage echoes the trend of the cascading, tiled content block layout that keeps the user scrolling down, scanning for items of interest.Variety There are a wide range of image sizes on offer in this layout, which prevents monotony setting in while browsing through.Minimalism The overall aesthetic here is clean, structured, and minimalist that lets the content speak, while using the New Yorkers signature font throughout.AIGA\\\\n\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/www.wired.com\\\\\\\/\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/www.theverge.com\\\\\\\/\\\\n\\\\nWhy we like it\\\\nWhitespace The whole layout of this site feels crisp, fresh and open. Type is laid out for maximum impact, instead of content density.Overlays & reveals The index of this online magazine is very nicely done, with thumbnail activating a huge, stylish pull-quote and link to the article upon rollover. Approaching the reveal in this way also allows the reader to continually return to the central theme of the issue.Wrapping it up\\\\nMake no mistake none of these examples successfully navigated the minefield of creating a content-rich website by accident. It takes a ton of time, strategy and deliberate planning in order to not only execute these designs, but also ensure that future content updates fit flush within the overall user experience. Therefore, it pays to keep the following guidelines in mind:\\\\n\\\\nWhy we like it\\\\nWhitespace Polygons articles feature long-scrolling, untraditional layouts that break up the dense bodies of text into digestible chunks with huge, beautiful imagery, akin to custom-designed magazine spreads. Here, the content in each article has been intentionally laid out, instead of simply pasted & posted into a one-size-fits-all template.Strong information hierarchy Dramatic-looking pullquotes highlight the core points of the reviews.Usable search Theres an impressive realtime search bar thats sticky at the top of the browser window, enabling quick drilldown on specific games.The Verge\\\\n\\\\n\\\\nAfraid of being exposed, dying to be seen theres a dilemma for you.\\\\n-Philip Roth, The Human Stain\\\\n\\\\nWhy we like it\\\\nRigid grid Each article is represented on the homepage by a moderately-sized photo, all presented in a clean grid layout, to prevent visual confusion, given the variety of colors, styles and subject matter to be accommodated.Content reveal Simply displaying the descriptions and captions of each picture underneath them adds content bloat instead, The Black Harbor only reveals this information as an overlay when the user indicates interest by hovering over an image. In addition, when users hit the bottom of the homepage, theyre given the opportunity to reveal more content.Ebony\\\\n\\\\n\\\\nWhy we like it\\\\nBold visual hierarchy Beginning with the absolutely giant, beautiful content slider in the header of this site, theres literally no way you could miss what Conde Nast believes are the most important things for you to see on this site.Customizable Filters This site wisely avoids attempting to present all of the available content, and instead puts control in the users hands by enabling them to filter down what they see based on their specific interests.Blik\\\\n\\\\n\\\\nWhat is ith\\\\nAs one of the largest newspapers in the US, USA today knows a thing or two about managing a large amount of content in a limited space.\\\\n\\\\nMake user flowcharts Chart the journey of different groups of visitors through the site. Challenge yourself as youre designing to answer common questions, or consider how you would accomplish typical tasks that a new visitor might have within your proposed site structure and page layouts.\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/www.aiga.org\\\\\\\/\\\\n\\\\nWhat is ith\\\\nAs the new kid on the block thats populated by the likes of Gizmodo and Engadget, The Verge is taking a fresh, bold approach to covering the wide world of technology.\\\\n\\\\nWhy we like it\\\\nGrid style The grid size of each article is proportional to the amount of information it contains, giving visitors an instant visual representation of importance and time commitment.Consistency Despite covering a profusion of different design styles, typography and color schemes in its imagery, the actual site retains a solid consistency in terms of how it displays captions, headlines, article content, etc.Strong information hierarchy Each article offers the same Title\\\\\\\/Subtitle\\\\\\\/Excerpt structure. Articles of special importance remain fully saturated, instead of the secondary posts, which are more muted, and only come to life on hover.Buttons Non-rectangular buttons punctuate this layout, noticeable by virtue of their shape. These calls-to-action are nicely styled and stand out just enough to catch attention.A List Apart\\\\n\\\\n\\\\nSo, whatd we missh Share your tips for creating killer, content-heavy websites in the comments!\\\\n \\\\n\\\\nhttp:\\\\\\\/\\\\\\\/www.ebony.com\\\\\\\/\\\\n\\\\nWhat is ith\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/www.polygon.com\\\\\\\/\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/www.condenast.com\\\\\\\/\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/www.usatoday.com\\\\\\\/\\\\n\\\\nIn our online travels, weve identified several tools and principles that should live in every designers utility belt. They can be used to attack the challenge of creating a content-rich site:\\\\nWhite space allowing the content (and your visitors eyes) room to breatheBoxes, borders & graphical planes Segmenting the information into visual categoriesAn intuitive search method Letting your users jump straight to the info they needGrids Although not always necessary for comprehension, keeping content within a rigid, consistent structure helps reduce the effort required to process itStrong information hierarchy Establishing a consistent design language using content types (blurbs, excerpts, call to actions)Visual hierarchy The relative importance of different content areas and elements can be visually implied in many ways, ranging from typographic treatments (headlines, sub-headings, pull-quotes, etc.), to image sizes and saturation, placement, etc.\\\\nIn the examples of content-rich websites that follow, youll see many of these best practices applied effectively in order to maintain an enjoyable, friction-free experience.\\\\nPolygon\\\\n\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/www.alistapart.com\\\\\\\/\\\\n\\\\nWhat is ith\\\\nFast Companys design blog showcases all the latest goings-on in the world of product and graphic design. Needless to say, theres a lot going on in those areas these days\\\\n\\\\nInformation overload is a brick wall for website engagement that sets in very quickly and once it does, it can be very difficult to regain your visitors attention.\\\\n\\\\nhttp:\\\\\\\/\\\\\\\/www.thinkwithgoogle.co.uk\\\\\\\/quarterly\\\\\\\/index.html\\\\n\\\\nWhy we like it\\\\nStrong information hierarchy Youre never in any doubt as to what the most important thing is that you should be looking at, especially while browsing the products which follow many of the best practices for an ecommerce product page.Grid style With a kaleidoscope of colors, shapes, lines and patterns inherent to their wide range of products, keeping a clean, rigid grid structure helps impose a sense of orderliness upon what could be a chaotic mess of visual elements.Dynamic mouseovers Blik allows the user to indicate interest in an item by providing more information in a dynamic hover state, instead of unnecessarily cluttering the resting state of the site upfront.USA Today\\\\n\\\\n\\\\nWhat is ith\\\\nThe venerable publication famed for its satirical cartoons brings a stately approach to presenting its content online.\\\\n\\\\nWhat is ith\\\\nBlik is one of the biggest destinations around for art supplies, and with such a diverse range of media and materials to accommodate, it needs to ensure that its creative audience can quickly find the items they need when inspiration strikes.\\\\n\\\\nWhat is ith\\\\nBeing the parent company of many of the best-known magazines around (including a couple weve featured here), almost makes Conde Nasts site genetically predisposed to offer a mountain of content that could easily be overwhelming if not approached with caution, forethought and disciplined design.\\\"\""
|
