TK PER LA PROGETTAZIONE DI UN SITO DI STUDIO WEB DESIGN
Printed 2015-04-20
COMPITO È necessario aggiornare radicalmente il design del sito. Crea un sito web più moderno e, soprattutto, high-tech. Crea qualcosa non solo tecnologico, ma mega-super elegante per giustificare il tuo posizionamento. Castcom si propone come un team in grado di lavorare con l'alta tecnologia e in grado di realizzare un progetto di qualsiasi complessità. OBIETTIVO 1. Per comunicare all'utente finale che Castcom non è uno studio web, è un'agenzia digitale che fornisce una gamma completa di servizi di marketing su Internet per un cliente: dalla creazione di una strategia di marketing allo sviluppo di software e pubblicità chiavi in __mano. 2. Ispira la fiducia dei clienti. 3. Vendi il servizio. Attività di marketing - Aumento della conversione - Leggibilità delle informazioni. Inoltre, tutti i testi dovrebbero essere desiderati per essere letti. Per fare questo: o È necessario sviluppare una griglia del sito modulare in modo tale da predeterminare la posizione del testo. E anche per calcolare il numero massimo di testi che l'utente può presentare "per 1 volta", se non diluito con le immagini. o Scegli un carattere: dimensione, colore. Sviluppa attentamente la dimensione del carattere da applicare per questa o quella intestazione. - Presentazione competente e interessante del portfolio. - Semplifica l'aggiunta di lavoro al portfolio. Nella vecchia versione del sito per il layout di 1 progetto, non dobbiamo solo creare una pagina, ma anche creare un'illustrazione, che sovraccarica il designer. Pertanto, è necessario sviluppare un modello di portfolio standard in cui i gestori dei contenuti caricheranno i layout del progetto su jpeg. - Rendi il sito più dinamico, vivace. - Crea un buon layout reattivo. Pensa alla "ricostruzione degli schermi". POSIZIONAMENTO SU SCHERMO Per la prima schermata è più adatta una descrizione del tipo di attività aziendale (posizionamento). È necessario prendere più piccioni con una fava nella prima schermata: posizionamento e tecnologia/sviluppatori fantastici. Mettiamo i servizi al secondo posto. Ma non hanno bisogno di prestare molta attenzione: più sono concisi, meglio è. Nella migliore delle ipotesi, usa una combinazione di infografica e blocchi con testo da nascondere/comprimere. I blocchi di testo di grandi dimensioni verranno ritagliati automaticamente e per aprirli completamente è necessario fare clic sul pulsante. I blocchi di height limitata sono particolarmente convenienti per i dispositivi mobili. OPERE COMPLETATE/PORTFOLIO Per visualizzare i progetti, implementare una griglia complessa, dove le immagini possono essere di varie dimensioni, e la griglia stessa viene ricostruita, adattandosi ai diversi schermi. Di conseguenza, alcuni progetti hanno due opzioni per le immagini che possono essere caricate. La tecnologia Ajax viene utilizzata per caricare nuovi elementi del portafoglio. RECENSIONI DEI CLIENTI Dopo i progetti, è necessario organizzare le recensioni dei clienti. Correggi l'height del blocco con la recensione e aggiungi il pulsante "leggi completamente" se la recensione è lunga. I blocchi di testo di grandi dimensioni vengono ritagliati automaticamente e per aprirli completamente è necessario fare clic sul pulsante. I blocchi di height limitata sono particolarmente convenienti per i dispositivi mobili. Disponi i loghi dei nostri clienti qui sotto. PRESENTAZIONE È necessario mostrare la presentazione in modo molto organico, per farlo nel modo più accurato possibile e non attirare troppa attenzione. È possibile trasformare una sorta di immagine intuitiva in uno stub, quando si fa clic su di essa, la presentazione si apre a schermo intero. Ad esempio, poiché qui i creatori hanno creato uno stub per il video: redcollar.ru NOTIZIE SUL TEAM Per implementare un blocco separato con una foto o un'immagine per ogni membro del team, ogni membro del team dovrebbe avere un nome e una descrizione del lavoro. SULL'AZIENDA Tutte le informazioni di testo si trovano sullo sfondo dell'immagine elaborata nello stile del sito. ANIMAZIONE ED EFFETTI SUL SITO - Tutte le immagini di grandi dimensioni presenti sul sito devono essere caricate con script a seconda della width dello schermo. Ciò è necessario per risparmiare traffico sui dispositivi mobili. - Disabilita tutti gli effetti complessi e le animazioni sui dispositivi mobili in modo da non caricare una GPU debole. - Utilizza anche uno script del Financial Times che rimuove un ritardo di 300 ms quando fai clic su elementi su iPhone e vecchi dispositivi basati su Android. - La maggior parte degli effetti deve essere legata allo scorrimento. Reindirizzamenti e la pagina 404 corretta. È necessario salvare tutti gli URL presenti nel progetto. Oppure richiedi un elenco di URL che richiedono reindirizzamenti 301. E pre-incorporarli nelle impostazioni del server. Ciò eviterà molti errori quando si avvia un sito con nuovi indirizzi di pagina. REQUISITI DI PROGETTAZIONE 1. Web design reattivo 2. Design piatto 3. Scorrimento verticale 4. Tipografia noiosa per evidenziare i titoli. 5. Disegni modulari 6. Effetti CSS3 7. Navigazione fissa del menu in alto 8. Design widescreen 9. Contenuti scaricabili 10. Infografica interattiva 11. Menu pieghevole laterale (nelle pagine interne) 12. Schemi di colori semplici. Utilizzare nella progettazione di uno, due o tre semplici colori monocromatici puri in combinazione con il classico bianco o nero per altri elementi di design. Una sorta di variazione cromatica del minimalismo. Requisiti per il modulo di feedback: - Titolo: Ordina una chiamata - Allineamento del modulo al centro - Quando il modulo viene chiamato, lo sfondo principale del sito viene oscurato. - Il modulo ha i seguenti elementi attivi: o Chiudi croce o Pulsante Chiamami - Campi da compilare: o Nome o Telefono Requisiti individuali per alcuni elementi del sito: - Disegna il preloader per tipo in questo modo: www.deleteagency. it/servizi. Quelli. durante il caricamento della pagina, dovrebbe apparire un preloader disegnato in base al logo Castcom. - Quando selezioni il testo sul sito, crea una sorta di evidenziazione. Ad esempio, qui: www.nimax.ru - www.trionndesign.com sergiopedercini.com http://www.alln1hob.com/ Il menu in alto è l'allineamento a destra. Il menu è ridotto a icona. Quando in bilico distribuito in un nastro traslucido. - Considera di posizionare il logo al centro. Ad esempio, qui: elfsight.ru - http://www.alienationdigital.co.uk/inside-alienation/Page-2.html - un fantastico impaginatore. Lì, presta attenzione al fatto che ogni notizia ha un'immagine, se non c'è un'immagine, quindi mostra uno stub. Disegna uno spazio vuoto. Disegni che ti piacciono: Sito: Pro CHI SIAMO www.utlab.ru Invio di informazioni: - Team di progetto - I principali fattori che influenzano il costo della SEO - Come realizziamo i progetti funcfunc.ru Sezione "Chi siamo" - come lavoriamo. Portfolio - presentazione del progetto. http://www.fish-art.ru/#/slide4 - Disponibilità di foto dei membri del team con descrizioni del lavoro. http://welovescience.ru/#scienceagency - Invio di informazioni sull'azienda. - Disponibilità della foto di squadra http://www.aimbulance.com/en/about/ - Suddivisione del testo in blocchi. Sull'azienda, su di noi, sui nostri premi. http://serenity.su/about/ - Invio di informazioni in prima persona - Disponibilità di foto - Blocco con premi http://le-dantu.ru/#1 - Blocco Il nostro team. Una presentazione interessante di ogni membro del team. CONTATTI grape.ru/contacts Pagina dei contatti http://1optima.ru/contacts/ - Pagina dei contatti - Mappa all'intera pagina, come substrato. - La presenza di un modulo di feedback http://artw.ru/company/contacts/ - Come ottenere una descrizione. La presenza di un blocco con una descrizione dei diversi modi per arrivarci. PERCEZIONE GENERALE DEI SITI http://tochka-ru.ru/ http://www.akaru.fr/ - Un sito molto tecnologico, la presenza di animazioni geometriche. Design personalizzato. http://www.nimax.ru/ - Design adattivo originale a due colori http://redcollar.ru/ - Grafica molto buona. - Design luminoso http://droids-digital.com/ - Stile generale del sito - Modulo di callback con una scelta dell'oggetto. http://www.axiomadev.ru/ - Blog - Elenco degli articoli - Sezione Informazioni sull'azienda http://www.mstagency.ru/ - Disponibilità di infografiche e presentazione del portfolio per anni. - http://www.mstagency.ru/portfolio/stachka/ - ad esempio, in questo stile per distinguere le notizie http://www.deleteagency.com/ http://www.alienationdigital.co.uk/ - Elenco di articoli, design come giornali http://www.propcom.co.uk/ - Un sito molto elegante. - Considerare l'utilizzo del menu simile a destra oa sinistra per le pagine interne http://www.ironpaper.com/ - Menu principale e sottomenu a comparsa. - Lo stile di design generale è molto vicino a quello che vogliamo ottenere come risultato http://www.astramg.ru/ - Invio di testo e informazioni - Pittogrammi. PORTFOLIO http://www.akaru.fr/fr/references/ - Portafoglio. Pagina intera, pagina in diretta. Con il movimento del mouse si muove. Quando passi con il mouse su ciascun blocco, viene visualizzato un suggerimento. http://suprematika.ru/portfolio/category/web - Invio del portfolio. - Possibilità di visualizzare il portfolio utilizzando le frecce di navigazione: http://take.ms/zne8c - Elenco generale del portfolio http://marty.com/puma - un interessante portfolio con il lavoro svolto http://shibui.me/ - un interessante menu a sinistra - animazione sulla pagina di destinazione. - animazione di visualizzazione del portfolio - Scorrimento orizzontale interessante - Modulo di feedback http://lipka.ru/portfolio/ - Presenza della grafica originale disegnata nel portfolio http://atelier.ua/web/ - Presenza di pittogrammi per ogni categoria di portfolio o elemento del menu. http://www.laurab.net/ - animazione quando si passa con il mouse su un elemento. Un sito con un'interessante presentazione del portfolio. Pittogrammi interessanti per la visualizzazione di elenco, tile e impaginazione. http://wistech.biz/#portfolio - animazione del portfolio PROCESSO DI LAVORO E DESCRIZIONE DEI SERVIZI http://www.itech-group.ru/services/index - Descrizione dell'elenco dei servizi. Pittogrammi http://renart.ru/ - Descrizione del lavoro di processo. La presenza di palchi e animazioni. http://www.jbidigital.co.uk/ - Cambia il cursore sul sito - Descrizione dei servizi, ad esempio qui: http://www.jbidigital.co.uk/we-design/ - Elenco di notizie o articoli : http: // www.jbidigital.co.uk/our-two-cents/ http://www.pirogov.ru/services/sayty/ - Invio di una grande quantità di testo. Leggibilità - Per strutturare l'elenco dei servizi. POSTI VACANTI http://ony.ru/agency - Blocco con posti vacanti http://www.traffic-isobar.ru/careers - Pagina con un elenco di posti vacanti
