Surface Magazine

March 13, 2017


World, I'm seriously obsessed with this web design... here's why:

En un mundo donde todo parece sacado de una plantilla genérica de Wordpress, aquí no tienen miedo de distribuir el contenido en tres columnas de diferentes tamaños (>), pero además: cada columna tiene su propio layout y contenido específico / In a world where everything seems to be a big generic wordpress template, at Surface Magazine they're not afraid to distribute the content in three big columns of different widths (>) but also: each column has it's own specific layout and content. 

- A la extrema izquierda está un carrousel con las secciones destacadas, ¡a todo el largo de la pantalla!, pero además, las imágenes que vemos en cada noticia son gifs de los videos que se mencionan en el artículo, así que inmediatamente sale de lo convencional y parece uno de esos periódicos estilo Harry Potter. / To the left we have a carrousel presenting the featured posts, all across the screen! To make it even better, we have some gifs with bits of the videos that are mentioned in the article and the end result looks a bit like those Harry Potter newspapers

- La columna central está en forma de cuadrícula (grid) y se mueve en scroll independiente de las otras columnas. Aquí nos presentan una selección de los posts más recientes y relevantes de cada sección. Igual que en la primer columna, a veces los íconos son gifs animados que le dan continuidad a la personalidad de la página. / At the center we have a column where you can scroll up and down independently from the rest of the website. Here's a selection of the newest articles and it also includes some gifs as in the first column, which gives a nice consistent look and personality to the site.

- La columna del lado derecho es la más angosta y está reservada para mostrar encabezados de noticias recientes y también se mueve en un scroll independiente. / The column at the right is the smallest one and it's reserved to display the headers of the top stories. It also scrolls independently.


- A pesar de que tenemos mucha información al mismo tiempo, el menú en la parte superior nos permite navegar en el contenido fácilmente y si extrañan la columna vertical, hay un menú desplegable (hamburger menu) en la esquina superior izquierda de la página. / Despite having lots of information, the menu at the top allows us to easily navigate through the content and if you miss the vertical sidebar, there is also a hamburger menu right at the top left corner.

Diferente contenido = Diferente layout / Different content = Different Layout

Stories

Una cuadrícula organizada en la que vemos un ícono con la imagen principal, sección, título y un teaser del artículo. (5 columnas x infinite scroll), además de un submenu con las categorías disponibles que aparece sutilmente cuando nos desplazamos hacia abajo. / An organized grid in which we see a thumbnail, section, title and teaser of the article. (5 columns x infinite scroll), plus a submenu with the available categories that fades in as we scroll down.

* ver imagen anterior / see image above.

Images

Cuadrícula con íconos pequeños o grandes / Grid with small or large thumbnails.


Video

Una cuadrícula con íconos de los videos, categorías, título y un teaser del texto. Una vez haces click en una imagen te lleva a una página en la que destaca el título del artículo, el video y una opción para mostrar el texto de la historia... o no. A grid with a thumbnail of the video, category, title and teaser. Once you click on the image it takes you to a page where you see the title of the article, the video and the option to show the written story... or not.



City Guides

De nuevo tenemos un menu en forma de cuadrícula pero aquí el nombre de cada ciudad se encuentra sobre la imagen. Una vez seleccionamos la ciudad, aparece un mapa con los diferentes puntos de interés pero lo más interesante es que podemos elegir si queremos ver el mapa o las historias de la ciudad. / We see the thumbnails on a grid but here the name of each city is over the image. Once we've selected our city we can see a map and some points of interest, however the interesting thing is we can choose whether to see the map of the city or the stories written about it.


Last but not least...


Search

En la parte superior derecha tenemos el ícono para buscar algo en el sitio. Al hacer click, aparece gradualmente el espacio para ingresar la búsqueda y en la parte inferior sugerencias con el contenido más visto, promoviendo que el usuario permanezca en el sitio sin ser molesto. / At the top right corner, we have a search icon all the time. When you click on it, a search page fades in very subtly and presents us with a selection of the most viewed posts, which promotes user engagement without being intrusive.


More

Los artículos aparecen en una sola columna al centro para poder leer sin distracciones, mientras que el contenido sobre el sitio (current issue, about, subscribe...) aparecen a dos columnas, mostrando una imagen del lado izquierdo y el contenido a la derecha. Todo de manera muy concreta.
The articles are displayed in one single column at the center of the website to avoid all distractions, while the content about the site (current issue, about, subscribe...) are shown in two columns: an image on the left side and the text on the right side. Very straightforward.


All in all it feels like you always have a choice on how you want to see your content... it's almost like live customization! The only downside to me is that it feels like there's more ways to see the content, than actual content... but, that can always change with time. I like it.

Credits

This website was developed by King And Partners, a design studio based in New York City.
You can see more about the design of this website from their perspective here.

© Artifier. Design by Fearne.