Quiero diseñar un sitio web. ¿Cómo debo proceder y tomar referencias para lo mismo?

Muy buena pregunta, soy desarrollador que contribuyo activamente en el diseño de productos.

PASO 1 Inspiración:

Si observa continuamente lo que otros diseñadores o sitios están haciendo por sus estructuras metálicas, lentamente obtendrá una imagen en su mente de cómo una estructura metálica ayuda a organizar la información para la pantalla.

y para ese uso Wirify, simplemente agregue el enlace grande a su marcador y acceda a cualquier sitio web deseado, haga clic en el marcador, verá que el sitio web se convierte en una estructura alámbrica.

PASO 2 Dibujar:

Dibujar a mano en papel es siempre un buen punto de partida para cualquier diseñador. Proporciona una manera rápida y fácil de enfocarse y organizarse. Si eres muy preciso con los bocetos, incluso podrías usar esto como tu estructura metálica final.

PASO 3 Wireframing:

Un wireframe lo ayuda a organizar y simplificar los elementos y el contenido dentro de un sitio web y es una herramienta esencial en el proceso de desarrollo.

Una estructura alámbrica es básicamente una representación visual del diseño del contenido en un diseño .

Al igual que la base de un edificio, debe ser fundamentalmente fuerte antes de decidir si le da una capa de pintura cara.

Las cosas a considerar al crear una estructura alámbrica son:

a) Elige tus herramientas

Sugiero Mockflow o aquí está la lista de Mashable de 10 herramientas gratuitas de Wireframing para diseñadores

b) Establecer una cuadrícula

Las cuadrículas son muy necesarias para lograr un diseño simétrico y paralelo.

cada vez que mira un sitio web bien diseñado, encontrará que su contenido comienza desde un punto específico en el cuerpo y termina en uno, que se gestionan mediante el uso de cuadrículas.

c) Determinar el diseño con cajas

d) Definir jerarquía de información con tipografía

Qué evitar mientras se enmarca el alambre:

Demasiado sucediendo en la página.
Énfasis en el color y el diseño.
Demasiados detalles

PASO 4 Maquetas / Visual:

Ahora el Wireframe final se puede convertir en Maquetas finales o Visual:

Algunas herramientas comunes para las maquetas son Adobe Photoshop, Corel Draw y Sketch muy nuevos pero ya populares, etc.

Las cosas a tener en cuenta al convertir a una maqueta son:

Jerarquía de información

Es posible que deba considerar qué resaltar y qué información lateral, y el esquema de color, el reposicionamiento y la tipografía se deciden.

Tipografía

Elija una tipografía visualmente atractiva y legible para el sitio web con la combinación correcta de alternativas. El tamaño de fuente, el peso y los colores juegan un papel crucial en la legibilidad.

Esquemas de color

Un esquema de color que representa la identidad de la marca y los colores psicológicos como rojo para el peligro, verde para el éxito, etc.

Ahora puede entregarlo como diseño final o puede hacer un prototipo [opcional]

Sugiero UXpin, invision, proto.io o también puede consultar la lista completa aquí Herramientas de creación de prototipos | cobre

Originalmente [y con más profundidad ] escrito en Wireframe, Mockup y otras etapas de diseño | dLotus

Lea también: UI, UX: ¿Quién hace qué? Una guía del diseñador para la industria tecnológica

Si alguien que lee esta respuesta / pregunta está confundido acerca del diseño web / Desarrollo front-end, lea esto:

En el pasado, cuando alguien discutía el desarrollo, generalmente se refería al backend, pero en los últimos años ha habido una necesidad real de diferenciar entre los diseñadores que trabajaron estrictamente en Photoshop y los que podían codificar HTML y CSS. Fue aún más lejos cuando los diseñadores cruzaron las líneas para trabajar con JavaScript y jQuery.

Entonces, cuando hablamos del término “diseño web”, realmente estamos hablando de aquellos que funcionan con Photoshop y Fireworks, y aquellos que codifican usando HTML, CSS, JavaScript o jQuery (podría ser importante decir que jQuery es un biblioteca compilada de Javascript) [son desarrolladores front-end].

src: No hablo tu idioma: Frontend vs. Backend – Treehouse Blog

Escribo sobre Startups, Tecnologías, Productos y cosas similares.

Lea más de mí @ dlotus o @ Quora | Arpit Goyal

¿Qué es el diseño anticipatorio?

¿Cuáles son las consideraciones de diseño para un albergue juvenil?

¿Es el mejor diseño de icono plano en este momento?

¿Cuáles son algunas banderas rojas al entrevistar a un candidato de diseño de producto?

¿Qué conocimiento necesito tener para diseñar cosas para impresoras 3D?

¿Cómo se diseñan los autos?

Me estoy acercando a esto como si no tuvieras experiencia diseñando, no tenía clara la pregunta. Además, esta vía sería mucho más detallada si hubiera establecido sus objetivos en el diseño de sitios. Sin embargo, debido a que esa información no está allí, comencé a presentarla como si nunca hubiera diseñado un sitio y solo estuviera interesado en la profesión. Me estoy acercando a esto como diseñador visual también.

Primero probaría algunas cosas gratis para que pueda controlar la estructura de un sitio. Luego procedería con pequeños experimentos en línea.

Cosas gratis para probar: Weebly (aprenda cómo se organizan los sitios, simplemente colocando piezas) o Cargo (mueva piezas, realice una ligera codificación) Tumblr (pruebe html en su diseño) Realmente no puede destruir ninguna de estas cosas, son muy versátiles y puedes crear un sitio muy rápidamente y comenzar a orientar tu mente sobre cómo pensar como un diseñador.

Luego echa un vistazo a Jessica Hische’s: Don’t Fear the Internet para aprender a codificar, repasar los conceptos básicos del diseño web y explorar lo que significa diseñar de manera elegante y profesional.

Luego, avance un poco más después de completar esos cursos, y eche un vistazo a los Tutoriales y capacitación en video en línea en Lynda.com, o el material de curso abierto del MIT, o Code Academy, o compre un libro HTML CSS.

Naren Miyan

Quieres crear un sitio web. Simplemente vaya a este sitio web y descargue esta herramienta Microsoft Expression Web 4 (versión gratuita). Estoy seguro de que esta es la mejor herramienta de diseño web que es gratuita y tiene todas las opciones como la aplicación MSWord donde crea documentos de Word y la única diferencia es que crea documentos / sitios web html con esta herramienta. Lo amarás

una vez descargado, SIGA LOS SIGUIENTES PASOS

FINALMENTE VAYA AQUÍ PARA APRENDER CÓMO CREAR EL SITIO WEB

Configure un sitio web vacío con Expression Web 4

Deepak Singla

Como no ha mencionado nada sobre su experiencia, déjenos asumir que es nuevo en el diseño de sitios web.

En primer lugar, comience desde HTML básico y CSS. Hay muchos recursos en línea gratuitos de los que puede aprender, como codecademy.com, puede aprender de estos. Durante esto, no necesita recordar todas y cada una de las etiquetas HTML o propiedades CSS. Pero debe tener una idea básica sobre cómo se usan las etiquetas HTML y cosas como etiquetas de bloque, etiquetas en línea, algunas etiquetas importantes como div, img, etiqueta de anclaje, etc., para tener una visión más amplia. Hacer lo mismo con CSS en resumen, completar un nivel básico de HTML y un curso de CSS de algún recurso en línea es suficiente. Aprenda cómo asociar estilos CSS a etiquetas HTML y algunos estilos CSS básicos como el color de fondo, el color de fuente, etc.
Durante esto, no necesita dominar nada solo para familiarizarse con HTML y CSS lo más rápido posible. El objetivo de esto es familiarizarlo de tal manera que si ve algún código HTML no le sorprenderá, pero puede tener una idea aproximada de lo que hace si no lo comprende exactamente.
Ahora, después de completar esto, intente diseñar algunas páginas HTML básicas. Vaya a sus páginas web favoritas con Google Chrome, presione f12 o haga clic derecho en la página y presione “inspeccionar elemento” que abrirá la consola donde puede ver el código HTML de la página. Intente comprender cómo se ha creado la página y cómo Se han aplicado estilos. Si encuentra etiquetas HTML y propiedades CSS que no conoce sobre la búsqueda de esas (un recurso importante en este paso será w3schools.com
Vea cómo se alinea la imagen en esa página en particular donde está alineada. Cómo se han aplicado las diferentes fuentes e intente usarlas en sus propias páginas.
Inicialmente enfrentará problemas, pero las cosas se simplificarán a medida que continúe practicando. Cuando descubra que se siente un poco cómodo en HTML y CSS, comience a aprender JavaScript. Nuevamente, hay muchos recursos gratuitos en línea para aprender JavaScript. Como codecademy, udaicity (mi favorito personal), etc.

Los puntos principales que debe considerar durante esto es que no hay un atajo para el éxito cuanto más practique, más profesional obtendrá.

No espere aprender todo antes de comenzar a construir. Ensúciate las manos desde el primer día. Comience a construir cosas lo antes posible. En realidad, es el proceso de diseño de páginas web reales lo que aprenderá a diseñar

La mejor de las suertes

Deepak Singla

El diseño web es la mejor manera de expresar sus ideas en forma de gráficos. Hemos escuchado a personas decir que la primera impresión es la última impresión. Con los sitios web tenemos la misma idea, pero la limitación radica en que no podemos estar al lado para explicar lo que queremos transmitir. Todo lo que tenemos es nuestro diseño y contenido, que permitirán al usuario conocer sus ideas y comprender lo que desea transmitir o la acción que desea que realicen.

Por lo tanto, si el diseño no está bien indicado o bien organizado para usar, el visitante nunca volverá a visitar ya que el mundo está muy ocupado y no tiene tiempo para esperar. Una combinación perfecta de colores, el uso del espacio, los menús de navegación, la resolución, la integración o la información que proporciona todo junto harán que su sitio web sea un éxito en la web.

Importancia del diseño web

Una idea y una pantalla.

Nunca importa cuán brillante sea su trabajo si los visitantes no lo ven, por lo que todo lo que hay hoy en día debería tener una interfaz interactiva para retener al visitante. Debido al diseño web receptivo, la usabilidad ha alcanzado su altura. Por lo tanto, prometemos la mejor compatibilidad y usabilidad con cada dispositivo.

Centrarse en diseño web

Creamos una magnífica experiencia visual junto con la funcionalidad de navegación. Esto le permitirá traer visión en vivo a su sitio.

Flujo de datos fácil

La compleja estructura del diseño web engañará a sus visitantes. Por lo tanto, preferimos un diseño limpio para simplificar la experiencia del visitante.

Si desea diseñar su sitio web, póngase en contacto con nosotros: Contáctenos – Keshav Infotech en India

Keshav Infotech

Joomla es la mejor plataforma de diseño de sitios web en la que no necesita conocer toneladas de material técnico y códigos para administrar el back-end. Es un software de código abierto muy popular, fácil de usar y de manejar. Como es un software de código abierto, cualquiera puede descargarlo de Internet y puede usarlo sin pagar ningún cargo. Visite aquí para obtener más funciones sobre el diseño web de Joomla https://www.softprodigy.com/joom …

Keshav Infotech

Si desea diseñar su sitio web para aumentar las ventas y no exagerar, debe conocer los términos de color y sus casos de uso. Debe contratar a un diseñador web que tenga la experiencia de crear los mejores sitios web dentro de su industria, lo que garantiza que él sepa cómo funciona su negocio en general.

También puedes contactarme en caso de que necesites ayuda personal 🙂

Natalie LeRoy

Si desea crear un diseño web, entonces tendrá que crear un diseño efectivo y para esto deberá hacerlo paso a paso.

Pon tus pensamientos en papel primero
Comience a dibujar un marco de nivel superior
Agregue una cuadrícula a su PSD
Elige tu tipografía
Selecciona tu tema de color
Divide el diseño
Repensar lo establecido
Retarte a ti mismo
Ponga atención a los detalles
Trate cada componente como si pudiera presentarse a un concurso de diseño.
Afina tu trabajo
Ordena tus PSD
Diseñe el mejor de los casos, pero prepárese para lo peor
Obsesiona el diseño hasta que lo odies
Evite pasar demasiado tiempo en un concepto antes de compartirlo con el cliente.