Progettazione di siti Web nel browser (gasp!) [Chiuso]

https://stackoverflow.com/questions/432849

10-07-2019
|

Domanda

Sono interessato alle opinioni delle persone su pro e contro, o decisamente "inferno no". sulla progettazione di siti Web nel browser e l'allontanamento da Photoshop, Fireworks, ecc.

Ho progettato un rilancio per il mio sito Web e lo sto provando nel browser e non sto guardando indietro.

Ad esempio (utilizzo una griglia da 960 px con 12 colonne):

<div id="news_section" class="floatleft columntwo spanfourcolumns">
   …content
</div>

<div id="recent_work" class="floatleft columnfour spansevencolumns">
   …content
</div>

Non solo la progettazione è diventata di nuovo divertente, ma usare le griglie, il ritmo verticale, persino il rapporto aureo, non è mai stato così facile. Per non parlare, annulla completamente il divario tra progettazione e codifica statica.

Cosa ne pensi?

Soluzione

Stai dicendo di creare prima i wireframe delle pagine nel browser (tramite HTML / CSS) e poi applicare un disegno? Questo è quello che faccio (e 37Signals segue questo pensiero pure).

A mio avviso, è bene che gli sviluppatori realizzino wireframe statici senza toccare Photoshop poiché il sito è immediatamente utilizzabile e non si perde tempo a far sembrare le cose giuste.

Inoltre non c'è molta tendenza nel design con i programmatori: mi piace lasciarlo alle persone che conoscono ogni comando PS sotto il sole :)

Uso anche il YUI Grids per creare rapidamente layout.

Altri suggerimenti

Bene, fare un lavoro usando il browser non è la cosa peggiore al mondo, ma ci sono un paio di "inferno no" & 1) NON progetta la tua app utilizzando IE. Usa Chrome o FireFox. Il comportamento non conforme di IE può indurti a pensare che il tuo CSS sia valido quando in realtà non lo è. Il tuo caso d'uso principale per IE sta testando il tuo sito in IE.

2) Non nominare le tue classi per come appaiono, come hai fatto nel tuo esempio.

Non !!

Se iDesign Steve impara a progettare direttamente nel browser,

L'innovazione ne risentirà: a Steve non interessano i limiti di CSS / HTML / whatnot. È libero di fornire il sito più impressionante che l'umanità abbia ancora visto. È dovere del programmatore medio Joe estendere i limiti di CSS / HTML / quant'altro per stipare ciò che è stato approvato in tempo, e vederlo fatto a pezzi da uno stupido browser, che sembra avere una buona quota di mercato, appena prima della scadenza. Ammettilo, scrivere CSS sembra scrivere un codice assembly. Realizzare anche le cose più elementari (layout fluido a più colonne qualcuno?) È ridicolmente difficile e ti rende alto per un po '.
Il fattore di freddezza di Steve diminuirà: non un singolo sviluppatore che conosco utilizza uno strumento WYSIWYG per generare HTML / CSS o lo considera accettabile. Quando tutto ciò di cui hai bisogno è un editor di testo, non hai un bell'aspetto. Quando un cliente lancia uno sguardo al monitor di Steve e vede un mucchio di testo anziché diverse finestre, un centinaio di icone divertenti e una bozza colorata finita per metà, può anche pensare " Mio nipote di 7 anni può anche scrivere cose ... ".
Joe ha ancora più vincoli di Steve: il sito dovrebbe essere accessibile, il layout dovrebbe essere abbastanza fluido da contenere tutti i tipi di output, giocare bene con javascript ... Se comunque CSS / HTML verranno riscritti, non c'è motivo di lottare .

Diventa un buon compagno di squadra e avvia Photoshop adesso. Joe ha bisogno del suo lavoro per pagare le bollette.

Beh, per qualcuno con il mio livello di incompetenza progettuale si tratta di uno schizzo su lavagna bianca e quindi direttamente in HTML e CSS.

I miei siti web sembrano ancora orribili ...

Negli ultimi siti che ho realizzato, ho adottato entrambi gli approcci. Ogni volta, la pagina progettata direttamente in HTML / CSS ha richiesto molto meno lavoro, ma è stata un sito Web molto meno attraente. Se ti interessa creare una pagina accattivante, inizia da Photoshop, altrimenti troppo spesso prenderai scorciatoie nel tuo CSS. Un'idea può essere creata più velocemente ed è molto più flessibile in Photoshop, il che ti porterà a sperimentare le tue idee e ti verrà in mente un sito visivamente migliore.

Non progetto mai siti Web in Photoshop; Vado direttamente dagli schizzi fisici a HTML e CSS. Lo trovo più veloce e non finisci per buttare via qualcosa su cui hai lavorato per ore (il file Photoshop).

Ho scelto di rimanere con i wireframe e la progettazione dalla carta direttamente nel browser. Certo, è ciò che mi funziona e mi ha reso un designer molto più creativo.

Anche se mi piace usare le mie librerie CSS per questo, dai un'occhiata a Google Blueprint e consulta questo articolo del web designer, Mark Boulton.

diavolo no!

stai rifacendo l'errore "tabelle per tutto", usando solo le classi anziché le tabelle.
stai mescolando la presentazione (dove la metto) con il contenuto. le tue lezioni non dicono che cos'è, dicono dove mettere.
il tuo design ha dimensioni fisse. non scorrerà con il dimensionamento di Windows, quindi avrebbe bisogno di uno scorrimento orizzontale o di un grande spazio bianco a destra.

ma non capisco perché qualcuno menziona PhotoShop. è quasi l'ultimo strumento per il web design, forse Illustrator è l'unico ancora meno appropriato per questo.

Ho scoperto che, sebbene uno schizzo fisico possa iniziare sulla strada giusta per un design, puoi creare layout molto più belli in Adobe Illustrator (che è molto più facile spostare gli elementi rispetto a Photoshop). Una volta completato il design, usa Photoshop per suddividerlo.

Un'opinione da considerare è per chi stai progettando. Se stai progettando un sito per un cliente, può essere utile eseguire modelli rapidi in Photoshop per conoscere il layout e firmare il progetto. Una volta che il cliente ha concordato un progetto, crei una cornice metallica che si adatterà agli elementi del tuo mock up e quindi puoi unire gli elementi che richiedono immagini reali fin dal tuo mock up.

Quando segui questo metodo devi considerare tutti gli elementi di design disponibili che puoi usare per implementare il tuo mock up e assicurarti di metterli insieme in una natura ben progettata e semantica, non solo qualcosa che porterà a termine il lavoro .

Compass, specialmente blueprint / semantic, aiuta molto quando si progetta nel browser. Mi piace anche mantenere il layout e gli stili su file diversi, in modo da poter disporre più facilmente degli stili che non mi piacciono mantenendo il wireframe in un posto. Consiglierei anche di usare le palette di colori e comporre su una scala di caratteri, entrambi sono utili e più facili da ottenere usando le variabili SASS.

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow