#ux/ui

[zatrapa-gaylien]

UI/UX 101 para Amateurs (porque, en serio, lo necesitan)

Para este mensaje quiero que me visualicen como los Volturi juzgando desde el palco. Será más divertido.

Hay que entender que estos consejos son agnósticos en el estilo que tengas para hacer tus cosas. Y no tienen por qué seguirlos. Yo a veces ignoro algunos y no exploto (principalmente el de contraste). Pero esta será el primer y único aporte de caridad que haré para esta comunidad que hace codes. Dado que con el reciente drama, lo mismo, algunos se interesan (lo más probable es que no).

Si alguien viene a contradecirme algo, que me enseñe su nómina primero.

Estructura

Dentro del concepto de estructura existen dos modelos, se les llama F y Z. Esto es de parvulario casi, y seguro que intuitivamente habéis llegado a lo mismo sin saberlo:

F es cuando un diseño tiene una columna.

Z es cuando un diseño no tiene una columna.

Ahora, sobre eso, os tenéis que preguntar una cosa: ¿Cómo leemos? Si vuestra respuesta es otra cosa que no sea «De izquierda a derecha y de arriba a abajo», ¡Felicidades por no ser de Occidente! Me sorprende que hayas encontrado esto. Para los demás, leéis de izquierda a derecha y arriba a abajo.

El cómo leemos influencia el cómo se estructuran las webs. Por eso, si por casualidad visitas una web asiática, te quieres pegar un tiro. Simplemente, su estructura no está pensada para como nos hemos educado desde Primaria.

Sobre eso, hay que tener en vital importancia como se presenta el contenido. Nuestra cabeza prioriza siempre el lado derecho porque, como ya hemos dicho, leemos en esa dirección. En el diseño en Z da igual, porque no hay columna. Pero en el F sí.

Así pues... ¿Qué es lo imporgtante en un foro? ¡El foro! Así que si ponen una columna (por favor, nunca dos, no son una red social donde necesitan esa funcionalidad), siempre en el lado derecho.

Contrastes

Esta es una norma que me salto a veces. Quiero decir, en mi foro Brave New World me la salto. Pero hay que tenerla en cuenta.

La norma radica en que NO SE DEBEN USAR COLORES CLAROS SOBRE UN FONDO CLARO, NI COLORES OSCUROS SOBRE UN FONDO OSCURO. Es un poco de calle, pero sorprende la gente que lo ignora.

¿Que por qué lo hago yo? Quería poner la bandera Republicana (de Españita) en los grupos. Y para mí un meme vale más que mil palabras.

Sin embargo, el contraste es algo que varía mucho. Depende no solo de los colores (y lo estridentes que sean), sino de la fuente y su tamaño. Podría proporcionar checkeadores, pero es algo con lo que tendrán que ir a ojo. ¡Good luck!

Fuente

Aquí no hay debate. Mínimo 16px (o lo que es lo mismo, 1rem). Con un interlineado de 1.5 veces el tamaño de la fuente (24px o 1.5rem). Su vista lo agradecerá.

Puede haber elementos secundarios más pequeños. Y el punto anterior de Contraste influye. Así que deben ir un poco a ojo. Por norma general, si necesitan zoom para ver algo (EN ESPECIAL LOS MENSAJES DE UN FORO, QUE SON EL CONTENIDO PRINCIPAL), la fuente es demasiado pequeña.

Resolución

Sé que muchos de ustedes no han pasado de pantallas de 800px de alto. Sé que imponerles que atiendan a resoluciones más altas que 1080p les sonará a clasista. Pero no saben lo rotas que se ven sus skins cuando se las mira por otra pantalla que no sea la suya. Y desde luego, no saben lo horrible que son de visitar, incluso con 170% de zoom, en una pantalla 4K.

¿Cuál es la solución? Es un secreto que diseñadores de todo el mundo saben desde 2003, pero se lo voy a compartir: usen un cuerpo para el foro de 1280px de ancho (incluso se puede menos, yo hice una con 1100px) Y CÉNTRENLO. No es tan difícil.

Navegadores

Sé que hace unos años estaba muy de moda decir «Skin codificada para Chrome uwu» y quedarse tan anchos. A esa gente tengo que decirle: ¿OS HABÉIS FUMADO ALGO?

Entiendo que Chrome (y derivados) son el navegador más usado. Entiendo que targeteando a eso, en específico, se cubre el 90% de la userbase. PERO NO, GENTE, TENGAN UN MÍNIMO DE PROFESIONALIDAD. MIREN DE CUBRIR AL MENOS FIREFOX TAMBIÉN Y, SI PUEDEN, SAFARI.

Móviles

Honestamente, esto es algo de lo que pueden sudar. Yo lo hago con mis skins por flexear, pero no es necesario. He mirado mis Analytics y solo 4 usuarios en 4 foros (retirando duplicados, 30 en total) visitan foros en móvil. No renta el esfuerzo de pensar todo de 0 para eso.

Cabeceras

Voy a empezar esta sección con una skin que no peca tanto del error. Una de un foro de un... ¿semipana? De alguien con quien hablo semiregularmente, que me cae bien y no tiene una skin que me parezca fea.

Lo hago porque a veces me gusta pegar a mis amigos. Y porque no es NI DE LEJOS, un foro con un caso grave de lo que comento.

Ese foro es DC New Frontier. ¿Cuál es el problema? En principio nada. A fin de cuentas, si el foro va a tener tablón, la suma de este y la cabecera no debería ser más de una vista (vista es un scroll completo de la pantalla, 100vh en CSS). Y la skin lo hace. Sin embargo, lo hace en todas las vistas (subforos y temas). Y eso es un problema.

¿Por qué? Se preguntarán. Porque debes hacer scroll cada vez que vayas a lo que te interesa. La información. Ya sea el propio tema o el listado de temas. Y lo mismo, una vez no pasa nada, dos tampoco. Pero cada vez acumula al medidor de coñazo. Y eventualmente o te acostumbras, o navegar implica querer pegarte un tiro. ¡Miren qué cómodo queda si se quita en temas (y lo mismo pasará con subforos)! No es muy difícil implementar un js que elimine un elemento si la ruta no es "/". Pueden preguntar a ChatGPT incluso. Les dejo uno que furula con ese foro.

Y ojo, como he dicho. DC New Frontier lo hace bien. Solo un scroll. Hay foros donde la cabecera es un scroll entero y luego va el tablón. NO HAGAN ESO.

Contenido inaccesible

Llegamos al último punto. ¡Al fin! ¡Mi tortura termina! Por suerte, es lo más de calle. Incluso más que la parte de Navegadores. Y es, como dice el título, el contenido inaccesible.

Para ello, me remito a otro foro que tengo afiliado. Fragments of the Masks (@fom-rol).

¿A qué me refiero con «Contenido inaccesible»? Básicamente, que todo enlace en el foro no debería ser cubierto por un bloque invisible. Salvo que esa sea la intención. Cosa que, en este caso, no creo que lo sea.

¿Por qué no lo creo? Miren el tablón, con su lindo Últimos Temas. Intenten pulsar el primer enlace. No pueden, lo sé.

El motivo de eso es que una imagen lo cubre. La imagen de cabecera. Hipotéticamente, se podría apañar la imagen para arregarlo. Pero es un error causado por la confusión de z-index.

Idealmente, la solución más sencilla es pensando mejor la cosa antes de ponerte a codear, o testeando antes de publicar. Pero todo el mundo tiene errores, ¡incluso yo! Así que dejo un apaño guarro AQUÍ.

[404icy]

hi! icy here! ♡

i am currently studying computer engineering as my college major. i have great interest with the intersection between design and engineering.

in my free time, i love to learn (just learning in general). some of my favorite hobbies are ballet, reading books and playing video games. i also love being creative... i also really like anything related to astronomy and self-improvement.

academic interests: engineering, computer engineering, ux/ui design, human computer interaction, design, ai, robotics, astrophysics i have degrees in history (focus is on american immigrant history), visual communication design (graphic design) and liberal arts.

i don't think i'll ever stop learning.

i hope that sharing my journey would help and inspire someone out there. ♡

icy's (big sis advice portion): i know it may get overwhelming sometimes but here is a reminder that you are right in the middle of something you used to pray for... be kind to yourself and trust the process...

333

⋆｡°✩⋆｡°✩⋆｡°✩⋆｡°✩⋆｡°✩⋆｡°✩⋆｡°✩⋆｡°✩⋆｡°✩⋆｡°✩⋆｡°✩⋆｡°✩⋆｡

gif source: new game! ahagon umiko programming (my fave character from the series btw)

[alocad4]

Diseño web

¡Hola! Les dejo mi servicio de diseñadora web, si me ayudan a compartirlo les agradecería. <3

[happywebdesign]

https://groteskcph.dk/

[jwt5000]

totally awesome sneak peak at my next web typography assignment, everyone go give Dmitry Ivanov a big consensual kiss.

[goprotoz]

[this-is-not-a-slow-burn]

It also compresses the space so that it fits on mobile screens. I absolutely loathe this move towards "unifying" the UI. Tons of websites started doing it around 2018 ish. This allegedly makes the experience for users who are on both mobile and desktop more "seamless". If both versions look the same, it "unifies" the experience. But in reality it destroys UX for large swaths of the user base. THey don't care though.

And like Marypsue said, one of the reasons for sqashing the user avatars is making the posts less identifiable, thus making it easier to slip advertising in.

But I guess fuck us desktop users for not being impulsive youth with that disposable income you want having their eyes on your ads.

@Staff why is nobody listening to the userbase? I understand there's often a lot of pushback from established users when things are changed. And some of it is just discomfort at having to adjust to changes, and being used to how things were. But for chrissakes, you guys are literally decimating the user experience. You're fundamentally changing how Tumblr functions, and it's disheartening. OP makes many many very good points about how and why this change is detrimental to the experience that is Tumblr. Not just a complaint from established users that "we liked it better the other way!" but actually demonstrable use case flaws that are making the experience bad. So is the lack of response, (or outright mocking) simply reactionary stubbornness? Is it defensive hurt feels? Is it "they don't know what they're talking about. We're the experts on this stuff." Is it "they just don't know what's good for them." Is it "We're hemorrhaging money and have to do something drastic to attract new users. Fuck the people that have been here since 2008. If they love this place so much they should be happy we're doing something to keep it going!" ? Because honestly it's feeling like y'all are being deliberately obtuse and it's incredibly insulting.

here's your fucking feedback @staff

list of problems the removal of icons causes:

i cant see my friends

ruins the sense of community

can't tell at a glance who's online right now and what they're interested in

literally cannot tell without scrolling back up who put a post on my dash if it has a single addition attached to it. or like. 2 paragraphs in the op.

i cant click my own icon at the top of the dash to quickly view my own blog

can't tell who someone used to be if they change their username

squashes the margins between the menu and posts, making the whole dash feel more cramped

ruins the quick visual cue of how long each post is and where it ends when you're trying to scroll past ones youve seen before

people put a lot of creativity and individuality into icons, and now i never see them

makes people who primarily reblog instead of make their own posts all but completely disappear

list of problems solved by removing icons:

?????

who the fuck was asking for this

ive never in my life seen a website or app that has profile pics forcibly HIDE them, so i guess you did it you made the dash unique again in the worst way

here's some more feedback: maybe when you run an a/b test you should, idk, actually have a feedback form people can fill out about it somewhere

[sitiweb-re]

UX/UI design combina funzionalità ed estetica per creare esperienze utente intuitive, piacevoli e accessibili, migliorando usabilità e soddisfazione. https://www.sitiweb.re/design-ux-ui-migliorare-lesperienza-utente/ #Design #UX/UI #esperienza #utente#CampagneSocial #CreazioneSitiWeb #CrescitaOnline #DigitalMarketing #DigitalMarketingReggioEmilia #Ecommerce #LocalBusiness #MarketingOnline #PromozioneDigitale #SEO #SEOReggioEmilia #SitiWebProfessionali #SocialMediaMarketing #StrategieDigitali #WebAgency #WebAgencyReggioEmilia #WebDesign

[josegremarquez]

Código que genere un menú horizontal en html

código HTML que crea un menú horizontal dentro de un encabezado utilizando la propiedad display y sin un archivo CSS externo, todo dentro de una etiqueta <style>: HTML <!DOCTYPE html> <html> <head> <title>Menú Horizontal con CSS</title> <style> nav { background-color: #f1f1f1; overflow: hidden; } nav a { float: left; display: block; color: black; text-align: center; padding: 14px…

[shoutgraphics]

💻 Mobile and Desktop website mockups 🌹 Designed for the Garden Wall Floral Company website. Find your Fremont County florist at gardenwall.net _ 🔗 More Web Design: shoutgraphics.design/web/

[sportscom]

인터넷 대출 랜딩페이지 제작 가이드| 신속하고 간편한 대출 신청 경험 제공 | 랜딩페이지 디자인, UX/UI, 전환율 최적화

인터넷 대출 랜딩페이지 제작 설명서| 신속하고 간편한 대출 신청 경험 제공 | 랜딩페이지 디자인, UX/UI, 전환율 최적화 경쟁이 치열한 온라인 금융 시장에서 성공적인 인터넷 대출 사업을 위한 필수 요소는 바로 효과적인 랜딩페이지입니다. 랜딩페이지는 고객과의 첫 접점이자 대출 신청으로 이어지는 중요한 관문입니다. 본 설명서에서는 효과적인 인터넷 대출 랜딩페이지 제작을 위한 단계별 전략을 제시합니다. 디자인, UX/UI, 전환율 최적화 등 핵심 요소를 다루어 고객에게 매력적인 경험을 제공하고, 대출 신청으로 이어지는 성공적인 랜딩페이지를 구축��는 방법을 알려제공합니다. 신속하고 간편한 대출 신청 경험을 알려드려 고객 만족도를 높이고, 전환율을 극대화하는 전략을 함께 살펴보세요. 본 설명서에서는 다음과…

[samyakcomputersclasses]

Elevate your skills with our Web Design Course at Samyak Computer Classes. Master the art of creating stunning websites! 🖥️✨

[nile-bits]

We’re Hiring – Engineering Manager

We are seeking an experienced and motivated Development Manager / Software Engineering Manager to lead our development team. The ideal candidate will have a strong background in .NET technologies, Microsoft DevOps, microservices, and Azure architecture. You will be responsible for managing the end-to-end development process, from initial concept through to deployment, ensuring the delivery of high-quality SaaS applications.

Apply Here:

https://www.nilebits.com/blog/2024/07/we-are-hiring-engineering-manager/

[happywebdesign]

https://pierregeorges.ch/

[casesdedesign]

ergonomic chair design checkout page design shopper/buyer checkout stepstodeliver stepstoreceiving the product

[prokopetz]

Honestly, the thing that really burns my ass about mobile web design these days isn't even the bloated ads – it's the pages where there's nowhere that's safe to touch to scroll because every single pixel is a clickable hotspot that whisks you away to somewhere else, including the text. I truly believe the owners of websites that do this should die.