Sviluppare un portfolio personale che soffi la mente in 3 settimane

Quindi hai deciso di progettare e sviluppare te stesso un portfolio personale. È fantastico! Sei molto più avanti della metà della comunità di progettazione e sviluppo web. Ma per quanto riguarda il restante 50%? Devi mostrare abilità esclusive in uno spazio minuscolo per brillare in questo settore in rapida crescita.

Nelle ultime 3 settimane - da quando ho preso questa decisione, ho imparato molto sullo sviluppo di un portafoglio unico. Ora sento che è tempo di condividere con te questa conoscenza appena acquisita.

Quello che ho scoperto dopo quelle 3 settimane è un bel portfolio ispirato al gioco.

Settimana # 1: cerca oltre quello che vedi

Almeno una volta ogni sei mesi, nasce una nuova tendenza del web. È così difficile seguire tutte queste tendenze, non importa quanti blog e sviluppatori segui sui tuoi social network. Siti Web di una pagina, parallasse, cursori, design minimalista e così via? L'elenco delle tendenze del web è infinito e potremmo continuare a contarle tutto il giorno.

Quindi, la prima cosa che farai è un breve progetto di ricerca su cosa? per quanto riguarda le tendenze del web design e dello sviluppo web. Una cosa positiva di questo tipo di ricerca è che stai ricevendo idee e forse una prima bozza di come dovrebbe essere il tuo portfolio. Il problema è che può farti chiudere la mente alla creatività e alle tue idee innovative.

Una cosa importante che non dovresti dimenticare in questa settimana è scrivere tutto il tuo materiale di marketing. Penso che questa sia una delle parti più difficili con cui avrai a che fare. Non è facile scrivere le cose che fondamentalmente potrebbero determinare se un cliente ti contatterà o meno. Scrivilo sulla carta e poniti la seguente domanda:? Se fossi un potenziale cliente, cosa mi causerebbe contattarmi ??

Non dimenticare che questo portfolio ti presenterà al mondo. Devi inventare idee originali, un pensiero innovativo e un concetto di portfolio che spazzerà via le persone.

Quello che mi è venuto in mente dopo la prima settimana è stata una decisione: "Non importa quanto sarà difficile, svilupperò un gioco web basato sulla programmazione front-end". Tre settimane è stata la volta che mi sono dato per farlo?

Settimana 2: programmare come non c'è domani

Dopo aver avuto un'idea di base, e non un momento prima, è ora di iniziare a pensare alla fase di sviluppo.

Ho deciso che il mio portfolio funzionerà come un gioco basato sul Web, quindi ho iniziato a cercare i framework JavaScript che potrebbero aiutarmi a risparmiare tempo e lavoro. L'aspetto delle strutture è che di solito sono perfette per iniziare bene, ma a lungo termine non si adattano alle tue esigenze.

Un buon esempio nel mio portafoglio sono i lightbox che forniscono informazioni su di me e si attivano quando un utente entra in una casa. Questo tipo di funzionalità non esiste su un normale motore di gioco JS.

Ora, c'è sempre un'opzione per prendere una struttura esistente e migliorarla aggiungendo il proprio codice, ma considera che a volte l'immersione in codice di qualcun altro richiederà più tempo rispetto alla scrittura personale. Inoltre, se riscrivi il codice di qualcun altro, ciò potrebbe costituire un problema nelle nuove versioni.

Dopo aver superato alcuni framework di giochi, mi sono sentito come se non avessi altra scelta che costruire il mio motore di gioco che si adattasse alle mie esigenze.

Facciamo una rapida panoramica dei principali metodi che eseguo nel gioco.

Per gestire gli eventi della tastiera con le frecce ho usato il seguente codice:

Come puoi vedere, il codice è molto semplice. Nel caso in cui l'utente premi il tasto? o? Giù? frecce chiamo il? moveY? funzione, e in caso di? Giusto? o? a sinistra? Chiamo? MoveX? funzione.

Uno sguardo veloce su uno di essi rivelerà dove è avvenuta tutta la magia:

Per ogni passaggio dell'utente, controllo con un metodo speciale chiamato? CanImove? (Posso muovere?) Se il personaggio può spostarsi sulla tela di gioco. Questo metodo include i limiti dello schermo, le posizioni della casa, il limite delle strade e così via? Se è possibile, restituisco True e il personaggio continua a muoversi, altrimenti restituisco False e il personaggio rimane nella sua posizione corrente.

Ora, poiché stiamo ancora parlando del web, ho pensato che muoversi con le frecce della tastiera non fosse abbastanza. Devi sempre pensare all'utente finale - il tuo potenziale cliente che forse non ha il tempo di "uscire nel tuo mondo". Questo è il motivo per cui ho aggiunto sia una barra di navigazione che un'opzione per "teletrasportarsi"? il personaggio direttamente a un punto specifico del gioco.

Il? Teleporto? il metodo assomiglia a questo:

Ottengo il? X? e? y? parametri dall'evento click del mouse con? event.pageX? e? event.pageY ?, dopo che ho entrambi, cambio il lettore CSS? a sinistra? e? superiore? proprietà e utilizzare il jQuery? animate? metodo per animare l'opacità del giocatore - così ho potuto creare il? Fade? effetto.

Un buon consiglio che posso dirti che sfortunatamente ho imparato a mio modo, è mantenere il tuo codice il più dinamico possibile. Scrivi il codice in modo tale che se vuoi aggiungere più contenuti al tuo portfolio in futuro, il tuo codice lo supporterà.

Settimana 3: il feedback è il tuo nuovo migliore amico

L'ultima settimana di sviluppo del mio portfolio è stata molto difficile. Ho dovuto chiudere il tocco finale del design e il codice mentre mi sono battuto per non pubblicarlo già. Era come mantenere un segreto che non sei sicuro sia completamente vero.

Ho trovato una soluzione a questa fastidiosa contraddizione. Prendi dieci persone che conosci e di cui ti fidi, mostra loro il tuo lavoro e chiedi loro un feedback. Preferibilmente, quelle dieci persone dovrebbero essere completamente diverse l'una dall'altra. Ecco le dieci persone che ho scelto per questa missione top secret:

  • Mia madre
  • Il mio capo
  • Il mio migliore amico
  • Mio nipote di 6 anni
  • Un web designer senior
  • Uno sviluppatore senior front-end
  • Un potenziale cliente
  • Un cliente con cui ho lavorato
  • Un ingegnere di QA
  • Un altro sviluppatore web super-multi-ninja (solo nel caso)

Chiedi loro di darti un feedback su qualsiasi cosa. A partire da tua madre che ti dice che non funziona sul mio computer !? (Bene, stai usando IE5.5?) Che ti ricorda che devi scrivere alcuni fallimenti di IE, al tuo nipotino di 6 anni che abbastanza sorprendentemente può darti un test di usabilità gratuito, e infine al tuo capo e al? sviluppatore web ninja? che ti fornirà un'attenta revisione del codice di dettaglio che può aiutarti a migliorare il tuo codice e renderlo ancora più efficiente.

Non hai idea di quanti feedback positivi ti possano ottenere. Insisti.

Conclusione

Anche se lo sviluppo di un portafoglio personale non è sicuramente un compito facile, vale ogni centesimo. Ho imparato molto da questo processo e ho ottenuto dei feedback davvero interessanti.

Prenditi il ​​tempo e pensa al tuo unico e? idea per il tuo portfolio, non esitare a consultare altre persone sul design, le interfacce utente e le questioni di marketing e ricorda sempre la cosa più importante? divertiti!