Ayuda para maquetar una web
9 seguidores
Hola, a ver si alguien me resuelve una duda o por lo menos me ayuda aportando algún enlace a tutoriales o algo.
Me han pedido maquetar una web, cosa que no he hecho nunca, siempre la diseño en Illustrator y le paso todo "desmenuzado" al desarrollador. Pero esta vez me han pedido que la pase ya maquetada, con que lo hacéis normalmente, y como??!!! También me han pedido maquetar una App, pero imagino que será el mismo método.
Alguna alma caritativa por favor, mi futuro depende de que lo pueda hacer.
Muchas gracias con antelación.
Usuario desconocido
Zoe, te he cerrado el otro tema que habías abierto que era igual que este. Intenta no duplicar hilos.
En cuanto a lo de maquetar la web, si tu futuro depende es eso y no tienes ni idea, busca quién la maquete por ti esta vez. No es algo que se aprenda mirando un tutorial. Hay muchos sitios en internet en los que aprender si tienes tiempo y ganas pero si no es así búscate un profesional que lo haga bien.
alicenomore
A ver, no necesito a nadie que maquete por mi, solo necesito aprender a hacerlo, para un puesto de trabajo, donde aparte de diseñador buscan a un maquetador web. Ya se que no se aprende en un dia, pero al menos unos conocimientos básicos.
W-art
Hola Zoe...yo te diría que si solo neceistas maquetar, lo mejor es hacer un cruso presencial de HTML y CSS. Hay muchisimo material formativo online...pero por mi experiencia, es mejor que las bases te las dé un profesor en condiciones. En 2 semanas puedes estar maquetando perfectamente tus propios diseños de una forma solvente.
alicenomore
Ojalá, pero tengo que hacer una prueba y tengo un día para aprender algo, aunque sea poco. No descarto los cursos, de hecho estoy en uno de ellos pero esta orientado a Wordpress.
W-art
¡¿Un día?! ,,,me pregunto si seguirán vendiendo esas pastillas para no dormir en épocas de exámenes
Por si te sirve de algo...http://elcentrohtml5.sourceforge.net/Aprenda-HTML5-en-5-minutos
¡Suerte!
alicenomore
Nociones de HTML si que tengo, pocas, pero me defiendo, lo que no se si montarlo con Dreamweaver o como lo hace la gente, imagino que cada desarrollador tendrá su manera.
Alex Bailon
En un día ni de coña. Hay que ser realistas, ya me parece paradójico que diseñes páginas webs con illustrator, pero pedir aprender a maquetar en un día es no tener ni siquiera las ganas de saber lo que es maquetar y lo que conlleva.
No quiero parecer grosero, pero si realista.
samuelvgm
Es imposible que en un proceso de selección superes el código presentado por alguien que tiene experiencia como Front-end con el tuyo de un día.
alexrchies
Hola Zoe. Olvídate, en un día es absolutamente imposible. Evidentemente dependerá de los requisitos de la empresa pero la maquetación actual no es como era hace 10 años. El "temario" es mucho más denso de lo que la gente piensa y eso si ya no entramos en detalles como validaciones de la W3C, accesibilidad, correcto uso de los marcadores, tipos de Doctype, etc...
Si quieres meterte en el sector, tómatelo con calma pero con mucha constancia porque tienes cosas nuevas cada día. No importa demasiado con que diseñes, hay quién lo hace con Photoshop, con Illustrator, con Fireworks ... pero eso es sólo una parte muy pequeña ya que también deberías usar herramientas de mockup como Axure, Balsamiq o similares.
No vas a poder competir con gente que lleve un mínimo de tiempo maquetando en una prueba técnica porque se ve enseguida (y te lo digo yo que he evaluado a mucha gente en ese campo).
Un saludo.
porlacalle
¿En serio? ¿Maquetar en un día? Es un insulto a los que nos dejamos los ojos maquetando día a día.
Por otro lado, lo de entregar diseños web en Illustrator es para pegarse un tiro.
alicenomore
Imagino que la prueba será la maquetación de una home (ya que me han pedido que lo haga en un dia), como he dicho antes es una prueba de trabajo. Y si, diseño las web en Illustrator, cada uno tiene su método, y creo que no soy la única. Antes usaba Ps, pero ahora por "exigencias del guión" uso Illustrator
También soy consiente que en un dia no se aprende a maquetar, pero que mínimo que una respuesta de como empezar, un tutorial o un programa que se suela usar para maquetar.
Críticas muchas, soluciones pocas.
alicenomore
Por cierto alexrchies, gracias por tu respuesta. Tomo nota
porlacalle respecto a tu comentario, al desarrollador le paso la página desmenuzada en .png, así es como me la suele pedir siempre, raro si, pero soy una mandada. Así es el sitio donde trabajo actualmente (no comment)
Me han pedido pruebas de trabajo bastante brutales, como diseñar 3 carteles, 3 banners, el rediseño de la home una web...en 2 días. Seguro que alguno lo hace, pero con poco tiempo las cosas o no salen o no salen bien y si, a mi también me parece de tener poca verguenza.
samuelvgm
Zoe
A ver, es que no hay tutorial que te sirva para el caso que estás planteando: un día de margen. Tutoriales, cursos, clases, artículos, hay muchos, pero ninguno que te sirva para un día, y la clave es esa y el porqué la gente no puede ayudarte. ¿Qué más da el programa que se utilice? es que tampoco tienes tiempo de controlarlo, empieza con el que te sientas más cómoda (dices que dreamweaver), no hay tiempo para otra cosa.
Como mínimo busca información sobre buenas prácticas de maquetación: no usar tablas, evitar los estilos en línea, etc. Que es lo más básico. Eso es como aprender que no debes de sumergir bajo el agua un coche, pero no te está enseñando a conducir, no sé si me explico.
Empieza a maquetar como sepas y cada vez que encuentres algo que no sabes hacer, busca en sitios como Stackoverflow.
alexrchies
De cara a maquetar, olvídate de Dreamweaver o programas automáticos, te van a dar más problemas que soluciones. Mi recomendación es que uses Brackets, SublimeText o algún editor similar.
A la hora de maquetar, lo que necesitas es tener un conocimiento muy fuerte de HTML y CSS y eso incluye todas sus variantes, que son muchas.
Para empezar, te recomiendo combinar estos elementos:
Mozilla Developer Network: En el apartado Plataforma Web tienes un buen punto de partida. Aprende HTML antes de HTML5 y CSS antes de CSS3 y asegúrate de entender bien la base, yo diría que en maquetación es todavía más crítico que en cualquier otro aspecto, si cabe.
Codepen: Es la forma más fácil.
W3Schools: Una de las mejores referencias rápidas.
el de HTML y el de CSS.
CSS Lint
Por último, empieza a visitar con asiduidad sitios como Smashing MagazineA List Apart y CSS Tricks.
Al principio puede parecer complicado pero con constancia y sin agobiarte demasiado por lo que no entiendes pronto empezarás a cogerle el truco, las cosas necesitan su tiempo para entenderlas. Y una vez domines todo esto que te mando tendrás una buena base pero sólo es eso, la base, la punta del iceberg.
Suerte
Alex Bailon
Offtopic
Claro que se puede diseñar webs con illustrator, igual que se pueden hacer los iconos de iOS7 con word, cada programa sirve para una cosa, fireworks y photoshop, los veo muy hermanados si te dedicas al diseño web, pero illustrator lo veo muy lejos del diseño web, pero muy muy lejos, es una perdida de tiempo.
y por cierto Zoe, eso de pasar las imágenes en .png cualquiera que se dedique al diseño web, sacará las armas! png sólo cuando es necesario o en el caso de ocupar menos que un jpg (qué es pocas veces).
Si necesitas pasarle las imágenes cortadas al maquetador y usas mac, mírate Slicy, te ahorrá mucho tiempo, tanto que te parecerá una broma eso de los sectores de photoshop.
alicenomore
Pues ese es el tema, que hay tanto tutorial diferente que no se cual es el mas adecuado y como funciona la mayoria de los desarrolladores.
Pues si, el desarrollador con el que trabajo me pide las imágenes en png, y ya paso de discutir mas con el. Y como he dicho antes no lo hago todo en Illustrator, salvo que alguno me lo pida, yo tambien me lleve las manos a la cabeza en su dia. Cada persona tiene su manera de trabajar y algunos nos tenemos que adaptar a la manera de trabajar del sitio donde se trabaje.
samuelvgm
alexrchies
Buena respuesta, más no te pueden ayudar. Siguiéndola, a medio/largo plazo (dependiendo de cuanto tiempo le dediques) podrás competir por ofertas de trabajo que incluyan maquetación.
Pero con 24 horas, si aún quieres intentarlo, usa Dreamweaver (que es un horror para cualquier que sepa de esto, pero si es lo único que conoces y necesitas resultados inmediatos úsalo. Luego pásate a cualquier otro de los que te han dicho). Y mira buenas prácticas para evitarlas y que no te descarten ya en el primer párrafo.
samuelvgm
Zoe
Mira esto, que es lo más básico del todo y te van orientando paso por paso si todo se te hace muy complicado:
A Beginner’s Guide to HTML & CSS:
http://learn.shayhowe.com/html-css/
Codeacademy:
http://www.codecademy.com/tracks/htmlcss
alicenomore
Gracias samuelvgm !!!
danonino
Zoe te recomiendo este curso
http://www.acamica.com/cursos/11/maquetando-el-monstruo-web
lueego leer, leer, leer, practicar y practicar, de a poco, comenzando por codear webs básicas, hasta ir subiendo el nivel, leer buenas practicas, manuales y tutoriales.
360º
Alex Bailon
No puedo estar más en desacuerdo con este comentario.
Illustrator en su versión CS5 y 6 ha dado un gran paso hacia el mundo web. Podemos optimizar imágenes, nos guarda opciones de fusión, tamaños si pasamos a Photoshop... y no hablemos de la diferencia a la hora de trabajar con textos o de la velocidad que te puede dar uno u otro, o del simple hecho de que trabajar con vectores siempre es mejor.
Si es cierto que yo cuando paso una propuesta para que la maquete un tercero se la doy en photoshop con sus capas bien diferenciadas, agrupadas, etc... pero cuando voy a maquetar yo uso siempre Illustrator, tanto para hacer la propuesta como para separar los elementos y maquetar, y llevo mucho tiempo maquetando ;)
Usuario desconocido
Al final, cada uno trabaja con la herramienta que le resulta más cómoda o qué mejor domina. Yo no diseñaría en illustrator ni loco pero está claro es que ni photoshop ni illustrator son programas pensados para diseñar webs.
Adobe se ha cargado Fireworks pero ahora hay nuevas apps como Sketch, Mackaw y unas cuantas más que están intentando hacerse un hueco con software específico para web y UI
Alex Bailon
@360 Sí? Nose, llevo trabajando años y años con la suite Adobe y jamás se me pasaría por la cabeza hacer una web con illustrator, pero bueno como dice @laba cada uno trabaja con la herramienta que mejor le vaya.
Probad Slicy los que tengáis mac y ya veréis la de tiempo que os ahorra a la hora de explotar las imágenes para el diseño web o el de apps. Una pasada.
vektorama
Mucha suerte Zoe, pero creo que si lo que vas a hacer es una prueba para un puesto de trabajo lo tienes ucomplicado, la maquetación es algo que se puede aprender relativamente rápido, pero hacerlo bien es otra cosa muy distinta.
Intentalo, haz la prueba, a ver si tienes suerte, pero si buscas un trabajo de maquetador yo te recomiendo que hagas un curso HTML,css (que es lo básico) y luego cuando controles a por html5, css3, diseño adaptative, LESS...