EntradaHTML en estilo apple. MENOS CSS: Menús de estilo Apple
Muchos clientes, al describir sus deseos con respecto al futuro sitio, se expresan sucintamente: “¡Queremos algo al estilo de Apple!”. En su opinión, dicha respuesta debería brindarle al intérprete una información completa, marcar inmediatamente la "i" y eliminar cualquier ambigüedad. Pero en realidad, por supuesto, todo es más complicado. Después de todo, cualquier cosa puede impresionar a una persona al estilo de Apple: la presentación de una nueva tableta, una simple caja blanca de iPhone o el sitio web de Apple. Y lo más ofensivo es, muy posiblemente, decir “hazlo al estilo de Apple”, el propio cliente simplemente no sabe lo que realmente significa. ¿Qué pasa con un artista infeliz que, tal vez, simplemente no sabe lo que se espera de él al final?
¡Intentemos resolverlo!
Principio de Apple
El enfoque de Apple se basa en un principio muy simple: no se puede hacer un producto verdaderamente de alta calidad sin asumir todas las áreas de trabajo en él. Todo debe hacerse al más alto nivel. Cuando se lanza un nuevo teléfono, uno no puede esperar la fenomenal calidad de su pantalla y el bajo precio si las grietas parpadean en su cuerpo espeluznante, y el eslogan publicitario en una enorme valla publicitaria está escrito con errores.
"Bueno, ahorramos en redacción publicitaria, no vendemos mensajes de texto, sino un teléfono", pensará la mayoría.
¡Pero eso es todo! Desde el punto de vista de Apple, la experiencia de poseer sus productos aparece incluso antes de que desembolses el dinero que tanto te costó ganar para cualquier iPod y, por lo tanto, no hay elementos insignificantes en esta cadena. Esto no es solo tecnología, no solo empaque, sino también publicidad, un escaparate, un sitio web y textos en el sitio. Aquí no hay elementos menores. Y "el propio envase puede contar toda una historia". En consecuencia, lo primero que hay que entender sobre el "estilo Apple" es una atención escrupulosa a todas las áreas de trabajo.
La segunda característica importante de los productos Apple es la elegante simplicidad. Ella juega un papel muy importante en Apple.
“¿Por qué creemos que la simplicidad es buena? Porque cuando tratamos con objetos, es importante que sintamos que los estamos manejando ".
La tercera característica crítica son los detalles. Todas esas pequeñas cosas que no notas, pero que crean esa comodidad diaria al usar los productos de Apple: animaciones de transición, sonidos, el clic que escuchas al ajustar el volumen, la sensación de suavidad con la que te desplazas por la página y mucho más. , mucho más.
Pero todo lo que he descrito hasta ahora ha estado relacionado con productos. En nuestro ejemplo original, estábamos hablando de crear un sitio web. ¿Cómo aplica estos enfoques al diseño web? Para responder a esta pregunta, echemos un vistazo al sitio web de Apple e intentemos comprender qué trucos estilísticos utiliza.
Enfoques
Fotos e ilustraciones
Lo primero que llama la atención cuando visita el sitio web de Apple son las fotos de productos de alta calidad. En verdad, creo que estas fotos hacen la mitad del trabajo de gritar el prolongado "¡Guau!" al visitante. Todos ellos son grandes, luminosos, realizados en el mismo estilo y permiten ver todos los detalles.
La propia magia de las fotos. Algunos dicen que es "un bloque regular con esquinas redondeadas", pero en tales fotografías es admirable.
Ligereza y pureza
El siguiente elemento será la ligereza: todos los elementos de la página son muy cómodos y gratuitos, el fondo blanco del área de contenido da una sensación de ligereza. Y para que no haya la impresión de que toda la página se está desmoronando, se recoge con un fondo gris claro con un marco claro.
Fuentes
Apple usa solo dos tipos de letra Adobe Myriad para los títulos y la fuente estándar de macOS X, Lucida Grande. Ambos tipos de letra son tipografías serif austeras y modernas que solo mantienen un estilo minimalista general. De manera reveladora, el deseo de alta calidad también está presente aquí: debido al deseo de garantizar que los grandes titulares en el sitio se vean hermosos en todas las condiciones, Apple usa imágenes para subtítulos, no texto.
Steve Jobs también debe su actitud reverente a las fuentes en Apple: después de dejar la universidad, asistió a varios cursos, incluido un curso de conferencias sobre caligrafía.
Esquinas redondeadas
También en el sitio están los famosos (¡cuánto sin ellos!) Esquinas redondeadas. ¡Están literalmente en todas partes! Para ser honesto, a veces parece que el iPhone se inventó solo para continuar la tradición de usar esquinas redondeadas.
Las esquinas redondeadas están en todas partes: en la carcasa del teléfono, en los íconos de las aplicaciones e incluso en el botón de inicio.
Efectos
El siguiente elemento es también el famoso destello de lente Aqua y los efectos de degradado. Recientemente, su número en el sitio ha disminuido notablemente. A menudo se utilizan para enfatizar un elemento en particular.
El menú principal del sitio web de Apple. Un tributo al famoso estilo Aqua: después de la renuncia de Scott Forstall, el minimalismo domina cada vez más el esqueomorfismo y los efectos caramelo.
Contenido
Apple no prestó menos atención al contenido del sitio, el texto y su presentación. Una característica interesante se puede considerar la ausencia de la sección "Acerca de la empresa", tan querida por muchos, porque los principales productos de este sitio son.
Efectos modernos
Cada vez con más frecuencia, el sitio está comenzando a usar animación u otros efectos similares: agregan dinámica, muestran ventajas bajo una nueva luz o ayudan a comprender cómo funciona alguna parte.
¿Y es todo?
Obviamente, este enfoque no se puede utilizar para todos los sitios de forma indiscriminada. Es el lugar en sitios de presentación o promocionales. Y lo más importante, no puede repetir el estilo, guiado solo por pautas visuales. Un sitio web es un producto completo, completo, cada etapa de la creación del cual debe llevarse a cabo a un alto nivel, con amor e ideas.
No desarrollar solo uno de los pasos destruirá instantáneamente la frágil magia del "estilo Apple".
El uso de las técnicas descritas anteriormente lo ayudará a hacer un diseño hermoso, ordenado y moderno, pero no lo liberará del resto de los pasos de creación: escribir textos competentes y usarlos en las cantidades correctas, crear presentaciones de video y fotos de alta calidad.
El culto a Apple no deja indiferente a nadie y, enfréntalo, uno de los factores clave detrás de la popularidad de Apple es su diseño único. Diseñado por Apple en California ilustra claramente que los diseñadores tratan sus productos como arte.
Cupertino, California - El 16 de noviembre, Apple anunció el lanzamiento de un nuevo libro de tapa dura titulado "Diseñado por Apple en California". Desde el iMac (1998) al Apple Pencil (2015), dos décadas de innovación en el diseño se capturan en 450 fotos de productos pasados y actuales. El libro fue creado durante 8 años y dedicado a la memoria de Steve Jobs.
“La idea de crear algo importante para la humanidad ha motivado a Steve desde el principio, este pensamiento es nuestro ideal y el objetivo con el que Apple avanza hacia el futuro”, dice Jony Ive.
"Diseñado por Apple en California" es el resultado de una estrecha colaboración entre muchos equipos de diseño y profesionales de campos completamente diferentes. Todos comparten la esperanza de que el libro permita a las personas comprender cómo y por qué se crean y existen los productos Apple. Todas las fotografías fueron tomadas por Andrew Zuckerman en una técnica que describió como "estilo deliberadamente modesto". Las imágenes ilustran los detalles del proceso de diseño, así como los propios productos terminados.
Este es un libro sobre diseño, pero no se trata de los propios diseñadores, el proceso creativo o el desarrollo de productos. Refleja objetivamente el estilo, la imagen y la ideología del diseño de Apple. Muchos productos se ven tan claros, simples y lógicos que no tienen una alternativa razonable. Para cada dispositivo se piensa incluso el diseño del instrumento con el que está fabricado.
"Como diseñadores, vivimos en el futuro, amamos lo que ya hemos hecho y estamos obsesionados con lo que aún no hemos hecho".
"Una de las cosas más importantes que hemos aprendido a lo largo de 20 años trabajando juntos es la necesidad de escucharnos unos a otros, porque las ideas más brillantes a menudo las dan aquellos que hablan muy, muy en voz baja".
Diseñado por Apple en California es un libro de edición limitada en dos formatos: pequeño (25,9 x 32,4 cm) por $ 199 y grande (33 x 40,6 cm) por $ 299. Está impreso en papel especialmente elaborado en un color especial con bordes plateados mate. Se vende exclusivamente en Apple.com en los Estados Unidos, Australia, Reino Unido, Alemania, Hong Kong, Corea, Francia, Japón y Taiwán, y tiendas Apple selectas.
Eres el feliz propietario de una pequeña pero genial empresa. Aún queda un largo camino por recorrer, pero no tienes ninguna duda de que con el tiempo tu negocio se convertirá en un motivo de orgullo y un ejemplo a seguir. Por cierto, no hace falta que espere este momento: puede posicionarse como un profesional de alto nivel ahora mismo, haciéndose convincente, como una empresa grande y seria.
¿No estás seguro de cómo debería ser un sitio así? No te preocupes, ahora te lo explicaremos todo y te diremos cómo proceder. Si sigues nuestros consejos, ya no tendrás que suspirar a Apple, Nike o L'Oreal porque el tuyo será igual de bueno. Así que aquí hay algunas pautas para crear un sitio web sólido y profesional.
Siga las tendencias de diseño web
Las grandes marcas actualizan y mejoran constantemente sus sitios. Equipos de diseñadores y desarrolladores experimentados están trabajando para crear un recurso inusual y moderno que despierte la curiosidad de las personas y el deseo de echar un buen vistazo a todo.
Sí, es muy caro, pero hay opciones gratuitas, como Wix. Nuestro editor fue creado específicamente para que pueda crear un sitio agradable para cualquier tipo de actividad y agregarle algún efecto de moda, por ejemplo, desplazamiento de paralaje o video como fondo. Puede hacer una página "larga" real y complementarla con elementos de diseño "plano" *.
Creemos que en esta etapa no le vendrá mal caminar por los sitios en busca de diseñadores y obtener una buena inspiración. Nuestras recomendaciones: revista Inspiración Web, Blog Lopart y revista de diseño Cuarto de servicio; si el inglés no es un obstáculo para ti, lee Diseño Vandelay , Revista Smashing y Depósito de diseño web .
* ¿No entiendes lo que significan todas estas palabras? Entonces necesitas leer el nuestro.
Empiece con la marca
Las grandes empresas tienen una identidad corporativa reconocible y un posicionamiento muy claro. Utilizan fuentes, colores y lemas bien definidos. Reconocerá inconfundiblemente el logo rojo de Coca-Cola, ya sea en el sitio web, botellas o vallas publicitarias a lo largo de la calle.
Entonces, ¿qué pasa si su empresa no es tan grande como Coca-Cola? Esto no significa que no necesite hacer marca. Una identidad corporativa bien pensada es importante. Gracias a él, la gente podrá identificar rápidamente su producto, y ya está a tiro de piedra para comprar. Por lo tanto, dibuje un logotipo agradable, cree un eslogan, elija fuentes de marca, colores y organice las páginas de redes sociales en consecuencia. Para obtener más consejos, consulte nuestro artículo sobre.
Mejor menos
Entendemos que desea contar en detalle sobre su producto y negocio, pero no le recomendamos que sobrecargue el sitio y canse a sus visitantes. El sitio se carga muy mal, es difícil de leer y repele a los visitantes. Lo mejor es enemigo de lo bueno, por lo que debes aprender a detenerte a tiempo.
Pensemos en lo que se puede eliminar de su sitio. Si los textos están llenos de términos técnicos y profesionales, elimínelos. ¿Crees que tus visitantes realmente necesitan conocer la biografía detallada de todos tus empleados? Improbable. Algunas cosas, por supuesto, no se pueden abreviar, por ejemplo, una descripción detallada de bienes o servicios, pero esto es normal, esta información es útil. Incluso vale la pena moverlo donde definitivamente no pasará desapercibido. Todo lo que ralentice el proceso de compra puede eliminarse sin el menor pesar.
Ahora veamos el diseño. Reduzca el número de colores a tres o cuatro, elimine las imágenes innecesarias y preste atención a la tipografía. Recuerde dejar mucho espacio libre, también conocido como "aire". Cuando hay mucho "aire" en el sitio, la gente nota todos los elementos críticos, por ejemplo, necesarios para empujar a los visitantes a comprar, registrarse, registrarse, etc.
Muestre el producto en la página de inicio
¿Quieres incrementar el número de pedidos? Por lo tanto, asegúrese de que la gente vea su producto de inmediato. Mira los sitios web de marcas famosas. Verás, colocan productos no solo en la página de compras, sino también en la página de inicio para que la gente seguramente los notará. Si lo ha hecho y está pensando en cómo aumentar las ventas, no dude en copiar esta técnica.
Por supuesto, las fotos de los productos deben ser grandes y de muy alta calidad. No olvides que esta es una tienda online donde no se puede tocar ni medir nada, por lo que la gente toma una decisión de compra mirando la imagen. Si no tiene dinero para un fotógrafo profesional, lea nuestro artículo sobre. ¡Un poco de práctica y lo lograrás! Y no te olvides de las capacidades de nuestro editor, puedes agregar una aplicación al sitio para que el cliente pueda agrandar la imagen del objeto de su interés y darle un buen vistazo.
Hacer una buena navegación
Creemos que se encontró en un sitio mal pensado y se apresuró en confusión en busca de la página deseada. Como regla general, dejamos esos lugares con las manos vacías y con el deseo de no volver nunca más. Y toda la culpa es una navegación mal concebida. No repitas este error y asegúrate de que el visitante esté despejado desde los primeros segundos.
Si le hacen la misma pregunta todo el tiempo, haga una página con las respuestas a las preguntas más frecuentes. Puedes usar la aplicación Preguntas frecuentes de Wix... Su ventaja es que las personas obtienen la información que necesitan y, al mismo tiempo, no se distrae de otras cosas.
¿Quiere demostrar que su empresa es receptiva y amigable? Agregar la aplicación " Tidio Chat en vivo»Responder preguntas en tiempo real. Puede instalarlo en su teléfono inteligente y no sentarse frente a la computadora todo el día, sino trabajar y estar en contacto al mismo tiempo.
Demuestra que la gente confía en ti
Es bueno que intente estar en contacto y responder preguntas a tiempo, pero esto no es suficiente para generar confianza con sus clientes. Para hacer esto, debe volver a trabajar en el sitio. Crea una sección separada con la historia de la empresa, cuéntanos quién eres, en qué crees y qué consideras importante. Demasiada información es inútil: el texto debe ser breve, sincero y comprensible. Es bastante difícil mostrar qué tipo de persona eres en Internet, pero creemos que una página así hará el trabajo a la perfección.
También recomendamos agregar reseñas de clientes al sitio, en la página de inicio o en una sección separada. Después de leerlos, la gente sabrá que su producto es confiable. Por cierto, Yandex y Google también prestan atención a las reseñas, lo que significa que influyen.
Crea una versión móvil del sitio.
Más de la mitad de los usuarios de Internet se conectan desde tabletas y teléfonos inteligentes. Esto significa que la versión móvil del sitio no es un capricho, sino una necesidad. Afortunadamente, no tienes que preocuparte por cómo hacerlo. En el editor de Wix version móvil se genera automáticamente, solo necesita probarlo y modificarlo. No olvide que la versión móvil no es una copia exacta del escritorio, así que elimine todos los elementos innecesarios y haga visibles los botones y contactos.
No te olvides de las redes sociales
Preste atención a cómo los colegas mayores y más experimentados administran sus páginas de redes sociales. Sí, para una cobertura más completa de la audiencia necesita tanto un sitio web como páginas en Facebook, Vkontakte, Instagram, etc. Las redes sociales son ideales para publicar noticias, escribir sobre un producto y responder preguntas. Es importante no solo hablar de trabajo, sino formar una imagen y construir relaciones normales y de confianza. Si no está realmente seguro de qué hacer, lea el artículo y siga todas nuestras recomendaciones.
Después de iniciar una página en un sitio en particular, dígaselo a los visitantes de su sitio. Agregue botones de redes sociales a su encabezado, pie de página o sección de contactos. También recomendamos agregar la aplicación: es gratuita y las grandes empresas la usan voluntariamente. Con su ayuda, puedes administrar hasta diez cuentas desde tu sitio: publica noticias, responde a los comentarios a tiempo y sorprende a los clientes con rapidez, impecabilidad y profesionalidad.
¿Listo para unirte a las filas de las grandes marcas? en Wix, ¡es fácil y gratis!
El diseño web al estilo de Apple ha evolucionado y evolucionado a lo largo de los años, a partir de 1996. Como su nombre lo indica, la idea de diseño pertenece a la corporación Apple: este es el estilo del sitio web y las interfaces del producto. El diseño de sitios web al estilo de Apple ha ganado una gran popularidad debido a su minimalismo y al enfoque en la atención del usuario en un producto específico.
Características típicas del diseño de sitios web al estilo de Apple
- Estricta jerarquía en la composición de elementos. La principal prioridad es la imagen del producto. Una foto de alta calidad, clara, grande, colocada en el centro de la página y rodeada de espacios en blanco. En las mejores tradiciones del minimalismo.
- La paleta de colores generalmente consta de tres tonos: negro, blanco, gris. Al mismo tiempo, a diferencia del estilo plano, los degradados, las sombras y los métodos de transporte de volumen se utilizan ampliamente.
- Fuentes características. Los encabezados tienen el estilo de Adobe Myriad, el texto sin formato de Lucida Grande.
- Contenido. La página principal del sitio contiene un mínimo de información. Se proporciona una descripción detallada en páginas separadas. No hay efecto de sobresaturación. El propio usuario elige la información que le interesa.
- Características técnicas. El diseño de Apple se centra en el formato HTML 5, utilizando estándares de diseño modernos. El sitio web oficial de Apple no utiliza Flash en principio.
¿Para qué sitios es adecuado?
El estilo de Apple es la manera perfecta de presentar un producto o servicio. Este estilo se suele utilizar en el diseño de tiendas online, sitios promocionales dedicados a cualquier tipo de producto: desde cursos de formación hasta venta de inmuebles. Así es como se ve el diseño al estilo de Apple para los sitios web de software:- Jumsoft http://www.jumsoft.com/money/
- Versionsapp https://versionsapp.com/
Hola queridos lectores a! El diseño y el desarrollo web se están desarrollando muy rápidamente. Cada día vemos más y más productos nuevos, ya sean aplicaciones o nuevos servicios que hacen que nuestra vida en línea sea más productiva y conveniente. Y el diseño web es solo un espacio ilimitado, limitado solo por el talento y las habilidades del "artista" (diseñador). Entonces, hablemos hoy de MENOS Es un lenguaje de marcado de estilo dinámico que simplificará la escritura de estilos CSS.
¿Qué es MENOS?
LESS es un complemento de CSS. Esto significa que cualquier código CSS es válido MENOS, pero los elementos MENOS adicionales no funcionarán en código CSS simple. Esto es genial porque el CSS existente ya es un código LESS viable, lo que reduce el umbral para ingresar a una nueva tecnología.
MENOS agrega muchas propiedades dinámicas útiles a. Introduce variables, operaciones, miembros y mixins. La capacidad de escribir hojas de estilo de forma modular le ahorra muchos problemas. 
LESS facilita mucho los estilos de escritura. Por ejemplo, usando mixins, creamos algo parecido a funciones que pueden tomar argumentos. Mixins- le permite incluir todas las propiedades de una clase en otra clase simplemente incluyendo el nombre de la clase como el valor de una de las propiedades.
1 | Esquinas redondeadas (@radio: 5px) ( |
Y el CSS compilado se verá así:
1 | #header ( |
Descargue la biblioteca prefix-free.js y vincúlela a index.html:
< script src= "prefix-free.js" type= "text/javascript" > |
Esto completa la preparación y procede directamente a crear un menú al estilo de Apple.com.
Marcado HTML
El marcado del menú es bastante sencillo. El menú se elabora sobre la base de una lista desordenada. Abra el editor HTML y pegue el siguiente código:
1 |
MENOS estilos
En esta sección, comenzaremos a escribir el código del menú en MENOS idioma. Para aquellos que son nuevos en la programación, tanto en la escritura como en la sintaxis de LESS, no se preocupen, intentaré poner todo en los estantes para que quede claro. Quizás incluso a alguien le gustará esta forma de escribir estilos para el sitio, porque es realmente más productivo.
Veamos en qué partes estará compuesto el menú: 
Como podemos ver en la captura de pantalla anterior, la navegación de Apple.com tiene las siguientes 6 partes principales:
- Se usa una sombra;
- La frontera;
- Separador entre elementos del menú;
- Degradado para el fondo;
- Efecto de atenuación al pasar el mouse;
- Texto del menú.
Hay dos formas de utilizar los estilos escritos:
- Crujido
Importante: al usar el primer método, de modo que styles.less estén conectados antes de que se conecte la biblioteca less.js. También queda recordar conectar sin prefijo.
Por lo tanto, la conexión de estilos se ve así:
1 |
Recuperación de contraseña
|