Tag Archives: html5

25 Magazine or News Style Web Designs for Inspiration

As the media news sites  – and their print-media-related cousins – struggle to find out how to become profitable without dying in their intent, most news sites follows a traditional formula, by putting in first place their websites, second their mobile versions and last all their related social media affairs. The truth is no one has find the all-in-one formula to overcome this massive fight. But since, as, designers, part of our job is to create sites that works for our clients, sometimes we must do more research job to find how to make it a little more succesfull than the ones they replace.

This selection of good samples, updated by the moment, is meant to give you a general picture on this, helping to ironing any issues you might find and helping to orientate yourself on this hard choice.

With more websites and blogs publishing large amounts of content on a daily basis, one of the priorities in designing these types of news sites is to create a layout that allows visitors to find the content that they are looking for. The more content that is published, the bigger the challenge this becomes. Many sites and blogs are turning to magazine or news style layouts to display excerpts, headlines, and links to full content.

Most magazine-style sites include image thumbnails for some or all of the excerpts, and many also category those excerpts to make it easier for visitors to find specific content. If you are working on a magazine or news style layout this showcase of 25 websites should help to provide some inspiration.

This is Fake DIY

Billboard

Conde Nast

The Next Web

W Magazine

Spin

The MMQB

The Daily Beast

Newsweek

The Blaze

Vogue.co.uk

The Fiscal Times

Walker Art Center

This is Awesome

Esquire.co.uk

Melbourne Geek

Time

Quartz

VanityFair.fr

Elephant

Livestrong

.net Magazine

The Boston Globe

Clutch Magazine

Tennis.com

In the examples of content-rich websites that follow, you’ll see many of these best practices applied effectively in order to maintain an enjoyable, friction-free experience.

POLYGON

http://www.polygon.com/

What is it?

Polygon is a videogame review site from the founders of gadget-enthusiast upstart The Verge (also profiled here).

Why we like it

  • Whitespace – Polygon’s 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 – There’s an impressive realtime search bar that’s sticky at the top of the browser window, enabling quick drilldown on specific games.

THE VERGE

http://www.theverge.com/

What is it?
As the new kid on the block that’s populated by the likes of Gizmodo and Engadget, The Verge is taking a fresh, bold approach to covering the wide world of technology.

Why we like it

  • Story 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

http://www.condenast.com/

What is it?
Being the parent company of many of the best-known magazines around (including a couple we’ve featured here), almost makes Conde Nast’s site genetically predisposed to offer a mountain of content that could easily be overwhelming if not approached with caution, forethought and disciplined design.

Why we like it

  • Bold visual hierarchy – Beginning with the absolutely giant, beautiful content slider in the header of this site, there’s 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 user’s hands by enabling them to filter down what they see based on their specific interests.

BLIK

http://www.whatisblik.com/

What is it?
Blik 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.

Why we like it

  • Strong information hierarchy – You’re 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

http://www.usatoday.com/

What is it?
As 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.

Why we like it

  • Clean, 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 navigate
  • User-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

http://www.newyorker.com/

What is it?
The venerable publication famed for its satirical cartoons brings a stately approach to presenting its content online.

Why we like it

  • Masonry – The New Yorker’s 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 Yorker’s signature font throughout.

AIGA

http://www.aiga.org/

What is it?
The 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.

Why we like it

  • Grid 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

http://www.alistapart.com/

What is it?
One 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.

Why we like it

  • Clean & simple typography – ALA’s 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 ALA’s articles, you’ll notice that there aren’t 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

http://theblackharbor.com/

What is it?
A showcase of art spanning an eclectic variety of styles from the artist collective I Shot Him Because I Loved Him, Damn Him.

Why we like it

  • Rigid 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, they’re given the opportunity to reveal more content.

EBONY

http://www.ebony.com/

What is it?
One 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.

Why we like it

  • Giant imagery – Much like Polygon’s 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 – Ebony’s 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

http://www.wired.com/

What is it?
The 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.

Why we like it

  • Readability – 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

http://bostonglobe.com

What is it?
This 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.

Why we like it

  • Whitespace – Being a newspaper, by far the most important content is the text, meaning that careful attention has been paid to ensuring a pleasurable reading experience
  • Visual 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 hover

CO.DESIGN

http://www.fastcodesign.com/

What is it?
Fast Company’s design blog showcases all the latest goings-on in the world of product and graphic design. Needless to say, there’s a lot going on in those areas these days…

Why we like it

  • Giant imagery – Each article is accompanied by a truly massive header image that lets the reader know in no uncertain terms just what they’re about to read.
  • Intro sliders – Many of Co.Design’s 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

http://www.thinkwithgoogle.co.uk/quarterly/index.html

What is it?
Google’s 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.

Why we like it

  • Whitespace – 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

Make 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:

Prioritize – When everything’s important, nothing is. You should clearly establish what content is required by the user up-front, and what can be hidden. Once you’ve figured that out, make that hidden information easy to find when needed.

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

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

Make user flowcharts – Chart the journey of different groups of visitors through the site. Challenge yourself as you’re 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.

Vía Vandelay Design

25 Outstanding CSS Websites Showcase for Design Inspiration 

The CSS is an amazing technology, can be used to create amazing sites and experiences at no cost, we love what free resources can do in the hands of good teams of designers and programers, here is a small list of good sites made entirely on CSS and HTML5 with some of the most amazing experiences you can fin there.

The tools like those done by those brick-named companies that create amazing software is not always the best option, sometimes you need to code by hand and learning a few frameworks dont hurt… find some here BTW

Use this as an inspiration to get started with a project, in case your brain needs something to get inspired… and come over, we love desing and we love to reach blogs for you….

1. Drupal Works

Website

2. Safarista

Website

3. Kinoz

Website

4. Wegraphics

Website

5. Raycreativ

Website

6. Dubbed Creative

Website

7. Bixal

Website

8. Sky’s Guide Service

Website

9. Carl Rosekilly

Website

10. Gotmilk

Website

11. Tileabl

Website

12. Mealeo

Website

13. Stilyagi Film

Website

14. Day Tona Tarnow

Website

15. Next Motion

Website

16. Design Disease

Website

17. Process Type Foundry

Website

18. Julian krispel

Website

19. Le 28 Thiers

Website

20. Vartro

Website

21. Emily Whitesmith

Website

22. ON&E BLOG

Website

23. Duoh

Website

24. Blog Cafundó Estúdio

Website

25. Kokoromoi

Website

Vía Graphic Design Junction

Good web design is crucial for making the right impression

First impressions are important… Presentable clothes, matching accessories, getting to meetings on time – it all matters. It shows people around you that you care.

Online, first impressions matter too. Website visitors make judgements about website credibility in as little as 50 milliseconds, and one in five website visitors will leave your website, not giving you a second chance.

Staying on top of the current trends makes it possible to create a website that will impress your audience, and will hold users attention for the first crucial 10 seconds, and beyond.

So what are the Web Design trends for 2017?

First things first. Web design is not art.

Art expresses feelings, raises questions, provokes emotions. By contrast, design helps people to find answers, take action, or complete a task.

More than ever before, everything in web design, from imagery to navigation, to content, must serve a purpose. Many websites are now decades old, and some have collected huge amounts of clutter along the way. If you are redesigning an existing website, start with a clearout (content audit), and focus on what’s important by mapping key customer journeys. If, on the other hand, you are building a website from scratch, consider wireframes, sitemaps and top tasks as your starting point. Prioritise clarity over absolute completeness.

New, decluttered WWF homepage.

Persuade with numbers

Numbers project confidence. A web designer that built 60 websites comes across as more competent than the one who has ‘many years experience in the industry’. A company that has offices in 4 countries seems more established than the one with ‘international presence’. Even when the numbers are not very meaningful, being precise and specific still works. Carolyn Mendelsohn, an award winning photographer, owns 321 snow globes. How about that?

Carolyn Mendlesohn, award-winning photographer and author of widely acclaimed In Between series

Grids, frameworks and pre-made themes

As CSS frameworks and grids mature, more and more coders use them as a basis for their web development work. They allow beginner coders to step up their game and they help digital agencies to streamline their production. Frameworks might sometimes contribute to bloated code but they cut down development time and take care of responsiveness, which makes them a good choice for many digital projects.

In addition to Bootstrap, UIKit and Foundation, which have been around for a while, new front-end development frameworks such as Suzy, Jeet and Breakpoint are also getting traction.

Pre-made themes from EnvatoMarket and TemplateMonster can also be a valid choice. Developers of paid templates tend to respond to customer feedback and continuously iterate their product, so some of the most popular themes have now gone through many improvements, to become what they are today.

Smithsonian magazine uses Suzy framework which offers on-demand grid.

Flat Colors

Google Material Design was first introduced in 2014. It’s a set of principles and best practices for web designers and mobile app developers. Google Material Design is about going back to basics, focusing on what’s important, but still accounting for multiple resolutions and devices – an over-engineered simplicity, if you like.

Google Material Design with its flat colours isn’t the only approach to web and mobile app design but it continues to be popular and trendy. Fabulous app, Google Material Design Awards winner, is a remarkable example of Google Material Design principles at its best.

Fabulous is a mobile app that helps you to establish healthy habits.

Authentic images

The overriding rule with regards to choosing effective images for web is that they have to be relevant and genuine. When choosing images, think about the following:

  • Product
    Are product images appropriate and useful? If so, this should be your first choice.
  • People
    Can you use an authentic image to tell a believable story about people using your product and benefitting from it?
  • Quality
    How can you show that your product is of good, or superior, quality? Can you show the craft, the expertise or the materials that make it great?
  • Ethics
    Are you charitable, ethical, organic, green? Does your business give back to the community? Does it make the world a better place?

Overused staged photography will make your website look dated. Choose realistic images that portray real world and real people. Use new perspectives: selfies, feeties, drone and head-on camera pictures and videos. Try full-screen approach, with the image occupying the whole screen.

Christian Betancourt is e-sports, portrait, landscape, and lifestyle photographer

Video

If a picture can tell a thousand words, then video must be even better, right? Homepage background videos can tell a story behind a product or service within seconds – Evernote, Airbnb and Loyola Marymount University are notable examples. For longer, more sophisticated video stories in web design, have a look at edstafford.org and silenza.it (It’s worth noting that mobile versions of these websites do not display videos.)

Navigation

Humans can hold between 5 and 9 items in their short term memory. A landline number such as 496 0926 is relatively easy to remember, but something a bit longer like 07700900546 is far more difficult to retain in your memory. That’s why, for a long time, web developers and UX designers strived for a maximum of seven menu items (7±2) in the website navigation. But that’s changing.

The number of visible, main menu navigation items is now reduced to the absolute minimum. Paypal has only three visible items in their primary navigation. Tate have reduced the number of items in the main navigation from 11 to just 3 during their most recent redesign in 2016. Laterooms redesigned it’s homepage in 2015 to focus solely on the booking process.

Continued influence of the mobile design means that hamburger navigation icon is more popular than ever. The jury is out on the effectiveness of this approach – it’s not just the meaning of the icon, but the size and visibility of the three lonely lines that affect the usability of the hamburger approach. Research and A/B testing seems to show that hamburger lines combined with a MENU label – such as the one on Adobe website – works significantly better than the hamburger icon alone.

Sticky navigation, such as on Pexcard by Rockpool Digital is still popular, and so are mega-menus – Museum of London built by WebCredible is a good example.

Museum of London was redesigned by Webcredible in 2016

Performance and intelligent analytics insight

Average weight of the homepage across the websites reviewed in this article is approximately 3.5MB. With all the high resolution images, interactive scripts, font replacement techniques, webpage performance requires special consideration. “If you can make the site load a second faster, you can drive engagement by 5%” according to Financial Times. Note the use of engagement as website metrics in this quote. Intelligent insight that goes beyond page views and unique visitors is increasingly important for understanding what works and what doesn’t on your website.

The aims of Financial Times redesign are shorter page load times, increased engagement, and better personalization.

The blend of personal and professional space, integrity, ethics

The line between the personal and professional space is not as clear as it was in the past. What we hear about business leaders on Facebook and Twitter, is often less formal and more in-the-moment than press releases and company’s own marketing materials. Integrity, ethics, telling people who you are, not just what you do, is more important than ever before.

Educate & Celebrate advises schools on LGBT and inclusion best practices.

Conclusion

In summary, modern websites of 2017 will use authentic images and full-width or full-screen layout to portray genuine, passionate, ethical people and products. Primary navigation will be reduced to the very minimum, and other links will be available through the ‘hamburger’ navigation, mega-menus and contextual navigation. Great websites of 2017 will use direct, persuasive language and will use numbers to demonstrate their achievements. Responsiveness, micro interactions and large, bold images continue to dominate the web, but they are only effective if website performance and page load times are reasonable.

Best of luck and have a well designed 2017!

Summer Design Lookout: Julio 2013, Sitios Web FullScreen

Algunos de los sitios mas impresionantes de la red, con todo su poder Flash, HTML5 o Multimedia a todo poder, para su placer y referencia visual, antes de plantear un sitio web siempre es útil ver un poco de referencias visuales para inspirar y afinar el estilo.

Siempre necesario aprender, y mejor aun si es de los mejores profesionales de la industria. Las marcas y compañías serias invierten buenas sumas en su presencia web, esencial si se quiere lucir bien ante sus potenciales consumidores en la red y en mundo donde la imagen lo es todo, es vital tener la mejor cara en la web que el dinero pueda pagar. A pesar de ello, los mejores sitios suelen ser aquellos de autor, donde el diseñador web pone su pasión y corazón en crear algo único, lo cual al crear un site para un tercero a veces falta ese componente de pasión para dar un plus.

Coleccionado de distintos sites, blogs de diseño y medios nuestra colección de sitios web a fullscreen para su placer visual. Recuerden que son referencias, nada de piratearse conceptos o hacer copias directas de ellos. Solo usenlos para darse una idea de lo que es posible lograr en web y crear algo único en un mercado donde la copia ya es una norma.

Continue reading Summer Design Lookout: Julio 2013, Sitios Web FullScreen

El poder del HTML5/CSS ejemplos de páginas creativas

El poder del HTML5 es increíble… En realidad pocas cosas que antes fuesen posibles con tecnologías propietarias ahora son posibles con soluciones libres y un poco de empeño…

Y pensar que hace pocos años Adobe y sus ofertas multimedia aún dominaban el mercado…

Falto que el mercado se volviese mobil para qué la perspectiva entera de la industria cambiase con el.

Muestra de ello son estos magníficos sites hechos en HTML5/CSS por buenos creativos de la industria que nos prueban que se pueden conseguir resultados de alta con herramientas libres… Para inspirancia un poco de buen HTML en el Geekcast…

Vía graphic design junction y otros
Blogsitos