Es posible pensar que el papel de escribir un diseño responsivo esteja todos los días del tiempo de diseño (Ai ou UID). ¿Eles tem que ser responsable de entregar los PSD con los diseños en menos tres soluciones, para escritorio, tableta y móvil? Esqueça isso. Quem faz com que o design seja responsivo ou não, no final das contas, é o desenvolvedor front-end.
Muitas agências ainda tercerizam o desenvolvimento. Cuando no hay ningún desarrollador front-end en su lado dentro de la casa, la comunicación entre los tiempos de diseño y desarrollo debe ser impecável, en caso contrario, como posibilidades de un resultado bajo del esperado es grande.
¿Mas como el tiempo de diseño puede resolver ese problema de comunicación y colocar no ar um producto que seja exactamente o que foi pensado? Entendiendo do assunto. ¿Lembra qué eu disse que o responsável por tornar o Design Responsivo é o desenvolvedor? Então vamos lá…
Técnicamente falando…
El diseño responsivo es un concepto, no es una técnica.
Ele representa una adaptación de una interfaz a cualquier resolución de tela, adaptando una experiencia de navegación de acuerdo con las necesidades de los usuarios y también de cada tipo de medio ambiente. Ele é o melhor amigo da experiência do usuário.
O Design fluido (liquido) é uma técnica de desarrollo
Ele utiliza medidas relativas para que el diseño de un sitio pueda aumentar o disminuir el tamaño de acuerdo con el tamaño del área de visualización.
Ou seja, você pode ter todo su conteúdo adaptado a una resolución de móvil, por ejemplo, y también ele pode não ser responsivo. ¿Por qué?
Porque imagina que el diseño fluido de un blog de recetas apenas “diminua” o sitio para que ele caiba en una resolución móvil. En la barra lateral de este blog vamos a recoger, vamos a ocupar digamos que el 30% de la pequeña tela del teléfono inteligente, y conteúdo ocupará los demás 70%. Temos aí uma péssima experiência de uso.
El diseño responsivo permite adaptar este contenido a una mejor experiencia, transformando la barra lateral en un menú de navegación, por ejemplo, liberando espacio para lo más importante: el contenido del blog.
El Design Responsivo no simplemente incluye el contenido, sino que adapta los elementos a la hoja de entrega al usuario o mejor contenido y navegación para aquele cenário.
Para colocar en la práctica esse conceito é preciso de técnica, y una de las mejores técnicas é o Design Responsivo Fluído: ele é Responsivo, ou seja, garante a melhor experiência ao usuário, e utiliza una técnica de Design Fluído na construção da sua base em HTML El CSS para garantizar que el contenido sea flexible.
O rejilla
¿Es común que la función de utilizar el Grid sea exclusiva del Designer de Interface? Parece que sim. Pero ya hay algún tiempo que hemos observado una cantidad enorme de diseñadores de UI que no utilizan Grid en sus trabajos (usar una línea de guía aquí y todos no son una sola cosa). Así que no confíes en UI Designer para aplicar y estudiar una cuadrícula que sea adecuada para que el proyecto pueda resolver un problema.
Definir Grid pode e, para mim, debe ser una tarea de AI. Muchos diseñadores pasan un tiempo olhando para una tela en blanco, intentando descubrir onde los elementos que deben estar posicionados, pero, se você tem um Grid Flexível, muchos de estos problemas están resueltos, deixando el diseñador con más tiempo para trabajar en diseño gráfico y otros. componentes de la página.
En vez de tomar decisiones arbitrariamente, los Grids permiten crear un lenguaje visual común en toda la página. Los componentes se relacionan entre sí, o que tornan más fácil para los usuarios escanear el conocimiento y desenvolver familiaridad con ele.
Grid é uma malha que divide a tela em partes proporcionais e possibilita a distribuição do conteúdo de forma uniforme, proporcionando equilibrio visual y estructural. Construir un diseño responsivo se vuelve mucho más fácil para aplicarlo en un grid flexible.
Benefícios do Grid…para el usuario
Facilitar la lectura y escanear dos elementos. Melhora a experiência visual.Menos esfuerzo cognitivo para interpretar o conteúdo.O olho humano percebe a distribuição proporcional dos elementos e associa as informações com mayor facilidade.
Beneficios del Grid…para el diseñador
Rapidez para agregar, alterar y mover elementos.
Benefícios do Grid… para el desarrollo
É o caminho para que o diseño que irá ao ar fique o mais pixel perfect possível.Actualización do diseño de maneira consistente.Rapidez na construção do front-end do site.
Responsivo de red
Se você está criando un diseño responsivo a primera coisa que tem que saber é que todo funciona con base en porcentajes (%). O Grid Fluído, como o nome diz, vai siempre dar una impresión de ocupar toda la tela.
¿Cuál es el mejor formato?
El famoso formato 960gs fue bastante usado durante muchos años, cuando la resolución más popular era 1024x768px. Nuestros días de hoy, el 13,28% de los monitores utilizan 1024x768px como resolución. Una gran mayoría utiliza 1366x768px como resolución. Ou seja, utilizar el Grid 960g pode tornar el diseño limitado y preso a uma grado ultrapasado. O mais comum, vem sendo ultilizar una largura de 1140pxpara que no haya Grid para que se adapte a mayores resoluciones de monitores.
Como escolher o número de columnas?
Isso vai depender de você e do su proyecto. La razón para trabajar con 12 columnas, que es el formato más utilizado, es por la flexibilidad proporcionada y por ser capaz de dividir el diseño uniformemente. O seja, puedes dividir 12 por 2,3,4 y terminar una serie de módulos disponibles (2 x 6, 3 x 4) y también en diversas combinaciones. Si divides 12 columnas por 2, percibirás que obtendrás 6 conjuntos de 2 columnas sin que sobre ninguna columna.
Mas o número de columnas pode variar de proyecto para proyecto. Básicamente, cuanto mayor o número de columnas, (14 o 21, por ej.) mayor o cantidad de posibilidades para dividir o diseño. Generalmente, este tipo de Grid se utiliza cuando se tiene mucho contenido editorial y de diseño proyectado con una longitud de 1140px o más.
Calculando como porcentajes
Los desarrolladores de PopUp Design explican un problema que es fácil como calcular el porcentaje de un elemento.
Digamos que tienes las dimensiones siguientes en Photoshop:
O seja, tenemos una barra lateral de 300px y un área de contenido de 660px. O wrap, o seja, o repository que envolta todos los elementos, tem 960px.
Para calcular estos valores en porcentajes (al igual que el valor de Pixel para porcentaje), solo utilice una fórmula:
O wrap nesse caso é o Contexto. Para calcular la barra lateral (nosso Objeto), hagamos lo siguiente: barra lateral ÷ wrap = resultado. Para descubrir un porcentaje es necesario multiplicar el resultado por 100. No caso en la barra lateral tenemos 300 ÷ 960 = 0,3125, y multiplicando el resultado por 100, finalmente llegamos a nuestro porcentaje, que es 31,25%.
O Grid dos diseñadores
Existen muchas maneras de escribir una cuadrícula de marcación (aquello que sobreponga su diseño en Photoshop o cualquier otra herramienta visual, al final, no es programador y no va a escribir una cuadrícula en CSS y HTML), puede escribir manualmente, utilizando acciones. No hay Photoshop entre otras maneras. Hoy te mostraremos lo que para mí es más fácil y puedes ayudarte a construir un Grid Flexível.
Tranquilo, no necesitas hacer mil y una cuenta para conseguir tu Grid Responsivo. ¿Sabe aquele ditado que “fiz design para se livrar dos números”? É mais ou menos assim. Cuando se desarrolla un diseño responsivo, a parte más casca grossa acaba ficando para los desarrolladores front-end. Es un convertidor preciso de píxeles en porcentajes y EM y hace que las algumas continúen siendo chatas. Pero también es importante entender el proceso de desarrollo front-end para que usted y su tiempo de diseño consigan pasar para el tiempo de desarrollo exactamente o que fue pensado.
Gridpak es un excelente generador de Grid Flexível que te permite salvar de ter que hace algunos cálculos. É só digitar a quantidade de colunas que você quer, o valor do padding entre as colunas eo valor da calha. Defina un punto de interrupción y exporte su Grid en PNG, CSS entre otros formatos.
El número de columnas de una cuadrícula se reduce a medida que la resolución de la tela disminuye, y también porque se disminuye el tamaño de la tela, aumenta el tamaño de los elementos, y la cuadrícula con pocas columnas acaba aumentando la proporción de los elementos. .
O mais comum, é utilizar siempre un número par as colunas. Sendo asim, para Tablets o número de columnas costuma ser de 8 col. e para smartphones 6 col. 8 y 6 columnas permiten una serie mayor de modulación disponible.
Mas eu sou diseñador, porque preciso entender sobre porcetagenos, EM y códigos?
La próxima vez que falar con el desarrollador de su Design Responsivo, podrá ficar de nuevo para ver si está usando porcentajes y EM en la construcción de CSS (eso es que garantizará que su diseño fluya).
Además, es importante que ningún documento de especificaciones tenga claro el Grid utilizado, la cantidad de columnas, la longitud de las columnas, el relleno y el relleno de su Grid, todos son dados, claro, en porcentajes.
Así que vai ficar mucho más fácil acompañar el desarrollo de su diseño y entender o por qué das coisas.
Entiendo, ¿pero porque no usar sólo Break Points?
Digamos que usted y/o su desarrollador decide no tornar el diseño flexible, o no tiene tiempo ni palabra para esto. Então fica decidido que o design será construido em cima de Break Points que irão indicar quando a mudança do design deve ser feita. Bom, como você já deve saber, existen inúmeros dispositivos por aquí, cada año algo novo é lançado (que o diga o novo iPhone 6 e iPhone 6s). Fica impossível prever qual a nova resolução que será adotada en el mercado. Si quieres intentar satisfacer a todos, terminarás teniendo que adaptar tu diseño a algunas docenas de puntos de interrupción y acabarás louco fazendo isso. Ok, puedes ajustar tu diseño a puntos de interrupción más “famosos” como 1200 px (Escritorios de pantalla ancha), 960 px (Monitores antiguos), 768 px (Tabletas), 480 px (Smartphones en formato paisajístico) y 320 px (Smartphones en formato vertical) Y puede ser que su diseño se agradezca en un iPhone4s, pero ¿qué garantizará que se actualizará en un nuevo iPhone6s o en un modelo de Android?
Utilizar un diseño adaptable (que también utiliza BreakPoints), puede ayudar si necesita resolver un problema a corto plazo, pero definitivamente no es una solución permanente.
Mas o Grid não vai limitar a minha criatividade?
De jeito nenhum, pelo contrario. Além de trazer organização e clareza para o design, nada o impedimento de criar áreas en su diseño que podemos ser digamos… “Grid Free”, espacios para aplicar una ilustración o algo de tipo. O Grid también puede usarse en cualquier formato de diseño, ya sea horizontal o vertical, no importa. O Grid no debe limitar su creatividad, ya que es sólo una herramienta para mejorar su trabajo.