Otro año, aquí estamos. Haciendo el ya tradicional repaso y análisis de los mejores diseños web. Este año viene fuerte puesto que a parte de sitios increíbles también hemos ampliado el listado a nada más y nada menos que 20 websites. ¡A tope con los mejores diseños web del 2019-2020!
[superfeatured]7076[/superfeatured]
Para los nuevos, aquellos que nos habéis encontrado a través de Google, deciros que ya estáis tardando en suscribiros a nuestra lista de emailing donde vamos enviando las últimas novedades en diseño y cursos super interesantes: Suscríbete ahora
Los puntos que más valoramos en el momento de entar un website en el listado anual, son los siguientes:
En definitiva: que nos la ponga muy dura.
Como ya hemos comentado, este año venimos cargaditos. Nada más y nada menos que 20 reviews comentadas en profundidad y con extra de screenshots. Recalco el hecho de que el orden de aparición, no tiene nada que ver con la calidad del site en cuestión. Este es simplemente un recopilatorio de lo mejorcito del diseño web.
Va venga. ¿Empezamos no?
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/Active-Theory-03.mp4"][/video]
La primera referencia de este listado está dedicada a la página web de Active Theory. Un claro exponente en el uso de las tecnologías de diseño y desarrollo web de alta calidad.
Esta página web está dedicada al trabajo que este estudio de diseño web realiza. Es por este motivo que han puesto toda la carne en el asador, para demostrar su capacidad y potencial a los clientes que quieren conocerlos.
Destacamos el uso de grandes tipografías las cuales hacen que esta página web tenga un diseño que salta a la vista que ha estado pensado por auténticos profesionales del diseño web. Es evidente que tienen muy en cuenta todas las tendencias en diseño tanto web como gráfico.
Además de todo lo anterior, la imagen general de la página web está basada en un concepto distopía futurista muy similar al de la película Blade Runner.
Con un simple menú de navegación situado en la parte lateral derecha de la página web podemos navegar a través de sus apartados con absoluta facilidad.
También es muy interesante el efecto inicial al caer en la home.
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/Active-Theory-04.mp4"][/video]
Por otro lado, el efecto que hace el cursor al ser arrastrado por encima de la pantalla simula un efecto acuoso muy interesante y que va muy acorde a toda la línea del diseño de la página web.
La segunda referencia de este listado está dedicada a la página Boë Gin, que el estudio de diseño web Tayburn de Reino Unido ha realizado para la marca de Ginebra.
Boë Gin quería destacar su paso al frente y quedar desmarcada del resto de productos de Ginebra que hay en el mercado.
Esta ginebra se caracteriza por su gran colorido y sus fantásticas combinaciones. Así pues tenía que quedar presente en el diseño web.
Esta referencia la hemos escogido y forma parte de este ranking como uno de los mejores diseños web del 2019 - 2020 por su uso indiscriminado y totalmente desacomplejado de colores y formas.
Aparte de eso nos parece muy interesante el tipo de formato que presenta la web. Haciendo uso de una tipografía muy actual: fuerte y con mucha presencia.
Efectivamente, ya de entrada nos podemos imaginar que la página web tiene un aspecto muy indú, con un carácter asiático y en el que todos los elementos de esta cultura están presentes de una forma u otra.
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-2.mp4"][/video]
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-1.mp4"][/video]
La tercera referencia de este listado está dedicada al diseño web de este site dedicado a un certamen de diseño digital en Milán.
La forma en que usan la gama cromática junto con los efectos y transiciones, son super interesantes.
La navegación de esta página web está basada en el scroll vertical. A través del scroll, podremos navegar por los distintos apartados de la página web. De esta forma, podremos quedar maravillados con los recursos digitales de diseño web que se han empleado en esta maravilla de la tecnología.
Os invito a que le deis un vistazo personalmente y juzguéis con vuestros propios ojos por qué este diseño web está seleccionado como una de las mejores páginas web del año 2019 - 2020.
En el cuarto lugar de este listado en el que estamos repasando los mejores diseños web del año 2019-2020 os presento esta joya del diseño y la vanguardia. Es tal el nivel de este diseño web que no sé ni por dónde empezar.
Este website ha copado gran parte de los premios anuales y ha salido en un sinfín de listados dónde se valoraba el diseño y el desarrollo de las mejores páginas web. Nosotros personalmente ya habíamos hecho eco de este "trabajazo" en un par de artículos de nuestro blog.
Llegados a este punto yo creo que lo mejor es que hagáis clic y veáis el motivo por el cual está en esta lista y en tantas otras.
Destaco:
Éstos son solo unos pequeños apuntes que nos ayudarán a entender por qué este diseño web forma parte de nuestra recopilación anual y sin duda pasa a ser uno de mis preferidos.
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-1-1.mp4"]
[/video] [video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-2-1.mp4"][/video]
Ahora damos paso a una referencia que está en este listado porque consideramos que aporta un toque muy creativo en cuanto a la usabilidad y navegación de los usuarios de su página web.
Este site está dedicado a la creación que Vladimir Gruev, diseñador digital y programador web, hace para sus clientes. Como buena carta de presentación se ha hecho una página web espectacular con un diseño muy actual y un nuevo concepto de usabilidad que nos muestra de lo que es capaz este tipo.
El menú está dividido en cuatro apartados que se han colocado de forma estratégica en los laterales de cada dirección: Norte Sur Este y Oeste.
En el centro tenemos una pequeña explicación rápida de lo que nos vamos a encontrar en cada uno de los apartados en caso de hacer clic.
Por si fuera poco, la mayor sorpresa llega cuando hacemos clic en alguno de los apartados del menú. En su interior podemos ver como la creatividad le sale por las orejas a esta sublime pieza de la comunicación digital.
No dudéis en visitar la página web y maravillaros con el uso de las distintas tecnologías y el buen gusto por el diseño web.
El diseño web de este site contiene algunas de las tendencias en diseño web más importantes que durante el año 2020 lo van a petar..
Tipografías gigantes que se incorporan y forman parte del mismo diseño como un elemento más, pasando a ser un aspecto clave de la comunicación con el usuario.
Si tienes el placer de navegar por esta página web podrás experimentar un diseño en el que todos los elementos han estado pensados al detalle.
La gama cromática por la cual está compuesta, también resulta muy interesante. Tenemos un color verde selva muy salvaje y frondoso combinado con un sutil blanco verdoso.
El formato de navegación de esta página web es en el clasico scroll vertical, así que girando la ruedecita del ratón, podremos llegar a visualizar todo el contenido de la página web de forma muy sencilla y práctica.
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-1-2.mp4"]
[/video] [video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-2-2.mp4"][/video]
El diseño de esta página web está dedicado a un festival internacional de creación y cultura digital en el que se pone mucho énfasis en la relación entre la creación artística y las implicaciones económicas de las nuevas tecnologías.
Como no podría ser de otra manera, el diseño web tiene una gran importancia en este proyecto.
Cuando navegamos por esta página web, parece que estemos descubriendo los apuntes escritos en la libreta de un viajero. El contenido va apareciendo aquí y allá de forma aleatoria. Al principio parece que el caos es la única norma que rige en este diseño. Sin embargo, si somos profesionales y nos fijamos en los detalles, podremos comprobar como aquí todo está en su sitio.
Ahora damos paso a otro de nuestros preferidos. Atentos que aquí tenemos crema.
La página web está dedicada a un colectivo creativo especializado en el diseño de arte interactivo. Este colectivo colabora con artistas, diseñadores interactivos, programadores, ingenieros, escultores y creadores en general.
La forma en que se ha planteado el diseño es espectacular. Grandes tipografías, imágenes distorsionadas y pequeños vídeos al estilo gif, que hacen que la navegación sea muy atractiva además de actual y realmente vanguardista.
Esta referencia contiene más de una de las tendencias web que el próximo 2020 van a estar marcando el devenir del diseño.
La navegación como en la mayoría de los casos, basa su funcionamiento en un scroll down vertical con el que el usuario puede ir a través de todos los apartados de la página web.
Además, en cada uno de estos apartados podemos hacer clic para llegar a apartados interiores de la página web. No dudéis en navegar por esta maravilla de página web y en hacer clic en todos los sitios en que se os dé la oportunidad.
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-1-3.mp4"][/video]
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-2-3.mp4"][/video]
Uno de los motivos y aspecto que más interesante nos ha parecido en el diseño de esta página web, ha sido el hecho de dividir la información en diferentes bloques de forma irregular.
Si optamos por navegar en el apartado home, lo tendremos que hacer mediante un movimiento de scroll en el eje vertical de nuestra coordenada.
A primera vista, tal vez os da la sensación que este diseño web no tiene nada en especial, pero si navegamos un poco por el website, podremos apreciar que todo el contenido está dispuesto de una forma exquisita.
Al igual que en otros diseños web, la tipografía tiene mucha importancia, ya que forma parte de las tendencias venideras en diseño web y en diseño gráfico.
El puntero que nos indica dónde está nuestro ratón está personalizado y además de elevar el aspecto creativo general de todo el website, también nos sirve de guía al respecto de lo que vamos a encontrar una vez hagamos clic en alguno de los elementos en los que nos indica de forma visual.
Sin duda el año que viene va a ser un gran año para el diseño y desarrollo de páginas web, puesto que el uso de las nuevas tecnologías están alcanzando puntos nunca vistos antes.
En este sentido el website de Hxouse es un claro exponente de lo lejos que hemos llegado en el diseño y desarrollo de páginas web. La comunicación con los usuarios ha mejorado de forma exponencial en los últimos años, llegando a un punto en el que el diseño interactivo es importantísimo para conseguir que un proyecto sea merecedor de estar entre las mejores webs del año 2019 2020.
La página web que tenemos en frente nuestro es uno de los mejores ejemplos de todo lo que os acabo de contar.
El usuario podrá navegar a través del contenido de la página web de una forma muy vanguardista haciendo que la experiencia del usuario sea impresionante y que no estorbe o sea una extravagancia difícil de entender.
Experiencia y navegación se dan la mano para conseguir uno de los mejores diseños web del año 2019 2020.
No dudéis en visitar esta página web y comprobar con vuestros propios ojos de lo que os estoy hablando.
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-1-4.mp4"]
[/video] [video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-2-4.mp4"][/video]
Esta página web está dedicada a un estudio de diseño y dirección artística situado en París y cómo os podéis imaginar su tarjeta de presentación online es excelente. Están especializados en desarrollar experiencias digitales, conceptos interactivos, publicidad y creación de branding.
Es habitual encontrarse con este tipo de referencias entre los mejores diseños web de cualquier año ya que acostumbran a poner todos sus esfuerzos en demostrar su potencial artístico y creativo sin ningún tipo de complejos.
Como ya hemos visto en alguna otra referencia anterior, la información está perfectamente sintetizada con un estilo de navegación de scroll vertical en el que podemos encontrar toda la información de forma muy dinámica fresca actual y vanguardista.
Y como no, tipografías grandes y coloridas, haciendo uso de negritas y cursivas. Todo formando un espectacular conjunto del que te será difícil salir sin haber experimentado sensaciones y haberte sentido inmerso en una experiencia digital muy cañera.
Estamos seguros que este diseño web tan atractivo y vanguardista no te dejará indiferente. Sin duda es perfecto merecedor de estar entre los mejores diseños web de 2019 - 2020.
Como ya sabréis la tecnología móvil se está abriendo paso a un ritmo tremendo, tomando el control de las comunicaciones y del diseño interactivo y digital. La mayoría de páginas web que se precien un poco ya están preparadas para que su versión móvil sea perfecta.
En este sentido hemos creído importante aportar nuestro pequeño granito de arena y seleccionar uno de los conceptos más bien resueltos a nivel de aplicación web. El site de Fleet ofrece un diseño muy minimalista que muestra todo lo necesario en el mínimo espacio posible la pantalla de un teléfono móvil. En esta pantalla podemos entender cómo funciona la aplicación en cuestión.
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-2-5.mp4"][/video]
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-1-5.mp4"][/video]
Bajo el paraguas de la denuncia social nace esta idea "la violencia no es mi cultura".
Con esta premisa tan profunda os traigo este diseño web. Un diseño que sin duda marcará tendencia durante el año 2020.
Vemos cómo se apoyan en grandes tipografías, un cursor personalizado, imágenes que se distorsionan en plan glitch (otro de los efectos que va a ser tendencia durante el año 2020 en lo que se refiere a diseño web y desarrollo web).
Además si hacemos clic por cualquier área del website, tendremos una grata sorpresa que no os quiero desvelar de antemano.
La navegación de la página web, como no, es de scroll vertical. A través de esta navegación tenemos la oportunidad de acceder a todos los contenidos de la página web de forma muy dinámica, atractiva y vanguardista.
Esta empresa que se dedica a la creación de mecatronix interactivos para el entretenimiento del futuro, ha decidido que su página web no puede ser nada ordinaria. Por este motivo, han apostado por un diseño web muy actual que sin duda tiene presente todas las tendencias web del próximo 2020.
Vemos como la navegación por scroll vertical a tomado el control de casi todas las páginas web creativas.
Pero sin duda lo que más llama la atención de esta página web es como usan las tipografías y la gama cromática a lo bestia.
Incluso los efectos que hacen los overs al pasar por encima de algunas de las tipografías son de un atrevimiento sin precedentes. Nada que hayamos podido ver desde hace años.
No dudéis en visitar esta página web y comprobar por vosotros mismos por qué está en este listado con los mejores diseños web de 2019 2020.
Esta referencia está especialmente dedicada a todos aquellos que todavía tienen dudas entre cómo poder sintetizar bien el contenido de una página web para hacerlo accesible a cualquier persona en el mínimo espacio y tiempo posible.
El diseño de esta página web no tiene ningún tipo de elemento superfluo. Simplemente se limita a mostrar los trabajos de diseño del estudio en concreto de una forma muy visual y con un toque abstracto.
El sitio web utiliza tecnologías webgl para conseguir los espectaculares efectos de distorsión.
Ya estamos llegando a las últimas referencias de este listado en el que nos estamos dando un paseo por los que han sido los mejores diseños web del 2019 2020.
En esta ocasión el diseño web que os traigo está hecho como portfolio personal de un creativo y desarrollador italiano. Al ver el diseño eso salta a la vista. Podemos ver cómo en el diseño se han empleado varios recursos que van a ser tendencia del diseño en 2020. Además algunos otros ya lo han sido durante el 2019.
El uso de las tipografías extra grandes y en diferentes formatos además del uso del color de la tipografía como elemento principal y primordial del diseño web.
Podemos navegar a través de la página web con el ratón haciendo scroll vertical para ver la mayoría del contenido. Ya hemos visto es una de las formas de mostrar el contenido que más se está imponiendo y se va a imponer en el 2020.
Ya por último también quiero destacar la forma en que la imagen se presenta. Veréis que al hacer scroll down por la página web, se puede distorsionar creando el famoso efecto glitch.
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-1-6.mp4"][/video]
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-2-6.mp4"][/video]
Me encantan este tipo de páginas web. Una microsite dedicada a mostrar tipografías y a sus variaciones para explicarnos como hoy en día se crean las tipografías en el mundo digital.
Más allá de eso si nos centramos en el diseño web podemos ver cómo se ha jugado con la tipografía como les ha dado la gana.
También como recurso de diseño se han dispuesto los bloques de información y la gama cromática completamente fuera de control pero con un resultado muy bien premeditado.
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-1-7.mp4"][/video]
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-2-7.mp4"][/video]
Esta página web nace como un tributo a Wim Crouwel, uno de los pioneros del diseño gráfico alemán en el campo de la tipografía. Wim Crouwel exploró el proceso de la construcción de un alfabeto completo en un grid de 3 x 3.
De todos es conocido el talento alemán en lo que a diseño gráfico y diseño de tipografía se refiere. Alemania siempre ha aportado mucho talento a estos dos campos y cómo no también al diseño en general.
Lo que más me llama la atención de esta página web es su aspecto ochentero, con una tipografía muy pero que muy retro y con una retirada visual a los primeros games de ordenador con los que los chavales empezaron a jugar allá en los años 80.
Podemos navegar por toda la página web mediante el uso del scroll vertical sin necesidad de tener mucha idea de qué es lo que estamos haciendo. Con unas cuantas vueltas en la ruedita del ratón podremos llegar hasta el final de la página web.
Un perfecto merecedor de estar entre los mejores diseños web del 2019 - 2020.
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-1-8.mp4"][/video]
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-2-8.mp4"][/video]
En la penúltima referencia de este listado encontramos esta obra maestra del diseño web que está dedicada al estudio de diseño digital de Brooklyn, Nueva York: Rogue Studio.
Sin duda una de las mejores páginas web del 2019 2020,. Rogue Studio se dedica a crear identidades corporativas y diseño digital para empresas ganadoras.
El diseño tiene cantidad de elementos que son y serán tendencia en diseño web durante el 2020. De hecho esta referencia ya forma parte de nuestro artículo donde repasamos y arrojamos un poquito de luz cuáles van a ser las tendencias en diseño web del 2020.
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-2-9.mp4"][/video]
[video width="918" height="656" mp4="https://codewebbarcelona.com/wp-content/uploads/2019/11/mejores-disenos-web-2019-2020-1-9.mp4"][/video]
Finalmente en el puesto número 20 nos detenemos en esta obra maestra del diseño web que se hace eco a través de su contenido de cuáles van a ser 8 de las tendencias en diseño del año 2020.
Os invito a que os deis un paseo por esta página web y que os maravilléis de la obra maestra que tanto con su diseño web como con su contenido os hará pasar un buen rato.
Tipografías grandes, transiciones, imágenes que distorsionan... Podéis ver que el formato web, cuando hablamos de award winning websites, está claramente encaminado desde ya hace años a la experiencia interactiva. Canvas, webgl, Threejs, PixiJs, son algunas de las tecnologías utilizadas para conseguir este tipo de experiencias tan inmersivas.
Os insto a que visitéis el post que hemos creado hablando sobre las tendencias en diseño web que vienen para 2020, ya que estoy seguro os será de gran interés.
Como habéis podido ver, este año hemos incorporado un total de 20 websites y cada uno de ellos han sido acompañados de más de una imagen visual. Y puesto que las transiciones y animaciones son de gran importancia, también hemos añadido vídeos para que veáis cómo se mueven cada una de la páginas web que hemos seleccionado. Esto es debido al hecho de que cada año recibimos miles de visitas a raíz de este tipo de posts, así que hemos pensado que este nuevo enfoque os va a gustar a todos los usuarios interesados en el tema.