當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

平面设计前端_我如何在5个月内从平面设计师过渡到前端开发人员

發(fā)布時(shí)間：2023/11/29 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了平面设计前端_我如何在5个月内从平面设计师过渡到前端开发人员小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

平面設(shè)計(jì) 前端

2017 was a bumpy yet exciting year for me. I left my graphic designer job in March, and entered the maze of the coding world. Five months later, I finally got a job as a front-end developer at Tenten.co.

2017年對我來說是坎a而又令人興奮的一年。我三月份離開了圖形設(shè)計(jì)師的工作，進(jìn)入了編碼世界的迷宮。五個(gè)月后，我終于在Tenten.co上找到了前端開發(fā)人員的工作。

Having been a full-time front-end developer for six months, I’d like to share my story of why and how I pivoted my life path. This is for those who might be as helpless but ambitious as I am.

作為一個(gè)全職前端開發(fā)人員已經(jīng)六個(gè)月了，我想分享一下我為什么以及如何改變自己的人生道路的故事。這是針對那些可能像我一樣無助但雄心勃勃的人的。

To be clear, this post is not written from the perspective of a seasoned developer or designer who’s able to illustrate a clear road map to follow. Neither is it a crash course for learning front-end development. There are lots of great tutorials on this topic, and I will list some later in the article.

需要明確的是，本文并非從經(jīng)驗(yàn)豐富的開發(fā)人員或設(shè)計(jì)師的角度撰寫的，他們可以說明遵循的明確路線圖。這也不是學(xué)習(xí)前端開發(fā)的速成課程。關(guān)于這個(gè)主題有很多很棒的教程，我將在本文的后面列出一些。

Remember, the perfect (universal) path for all individuals does not exist.

請記住，不存在所有個(gè)人的完美(通用)路徑。

我的背景 (My Background)

I was a 24 year old graphic designer with no experience related to coding at all. In my school days, my exam scores of math, physics, chemistry and science were horribly low. These subjects scared me with dull and complex formulas, numbers, and errors. Things that interested me back then were always the beauty created by paint, music, or words. Naturally, I chose English as my major, and got fascinated by literature, culture, photography and design in college.

我是24歲的平面設(shè)計(jì)師，完全沒有編碼方面的經(jīng)驗(yàn)。在我上學(xué)的時(shí)候，我的數(shù)學(xué)，物理，化學(xué)和科學(xué)考試成績都非常低。這些主題使我感到愚蠢而復(fù)雜的公式，數(shù)字和錯(cuò)誤。那時(shí)令我感興趣的事物總是由繪畫，音樂或文字創(chuàng)造的美麗。自然，我選擇了英語作為我的專業(yè)，并且對大學(xué)的文學(xué)，文化，攝影和設(shè)計(jì)著迷。

How I learned how to design in college by myself and finally became a graphic designer after graduation is story for another day. The point is, throughout my entire life until last year, I’d dreamed of being a writer, photographer, film critic, singer and designer, but I never thought of being a developer under any circumstances.

我如何在大學(xué)里獨(dú)自學(xué)習(xí)如何設(shè)計(jì)，并在畢業(yè)后最終成為平面設(shè)計(jì)師又是另一回事了。關(guān)鍵是，直到去年，我一直夢想著成為一名作家，攝影師，電影評論家，歌手和設(shè)計(jì)師，但是我從來沒有想過要成為一名開發(fā)人員。

為什么我要編碼 (Why I Wanted to Code)

For me, graphic design serves the purpose of solving a problem with attractive visual forms supported by invisible systems or structures.

對我來說，圖形設(shè)計(jì)的目的是解決由不可見系統(tǒng)或結(jié)構(gòu)支持的有吸引力的視覺形式的問題。

As the world is facing so many critical issues, I believe that problem-solving design thinking can and should help deal with some of these issues. Of course I was only trying to layout something beautiful the first time I opened Photoshop. Yet, the more I learned about design, the more I craved to engage in critical issues with graphic design.

隨著世界面臨如此眾多的關(guān)鍵問題，我相信解決問題的設(shè)計(jì)思維可以而且應(yīng)該有助于解決其中的一些問題。當(dāng)然，我第一次打開Photoshop只是在嘗試布局漂亮的東西。但是，我對設(shè)計(jì)了解得越多，就越熱衷于處理圖形設(shè)計(jì)中的關(guān)鍵問題。

But, after many endeavors to achieve my ambition, I was deeply disappointed at the impact that graphic design could make in Taiwan (or maybe the whole world?).

但是，在為實(shí)現(xiàn)自己的雄心壯志而付出了許多努力之后，我對圖形設(shè)計(jì)可能對臺灣(或可能對整個(gè)世界？)產(chǎn)生的影響深感失望。

There’s no doubt that I’m still aware of the power and importance of great design. But most of the time, designers are only allowed to deal with the “client’s problem,” instead of tackling “real problems client have.” Designers spend most of the time guessing their client’s wishes with no profound data and analysis, but only intuition, experience, or common sense.

毫無疑問，我仍然知道出色設(shè)計(jì)的力量和重要性。但是在大多數(shù)情況下，只允許設(shè)計(jì)師處理“客戶的問題”，而不是處理“客戶的實(shí)際問題”。設(shè)計(jì)師大部分時(shí)間都在沒有深刻的數(shù)據(jù)和分析的情況下猜測客戶的意愿，而只是憑直覺，經(jīng)驗(yàn)或常識。

I got tired of this game two years into my graphic design career.

在我進(jìn)入圖形設(shè)計(jì)生涯的兩年后，我對這個(gè)游戲感到厭倦。

That’s when I decided to take a serious look at the always trending front-end development topic on Medium.

從那時(shí)起，我決定認(rèn)真研究Medium上始終流行的前端開發(fā)主題。

I found that being a developer with design skills allowed you to have way more control and authority over each case and client. Besides, working on web development or applications allows you to efficiently propagate information.

我發(fā)現(xiàn)，作為一名具有設(shè)計(jì)技能的開發(fā)人員，可以使您對每種情況和客戶有更多的控制和權(quán)限。此外，從事Web開發(fā)或應(yīng)用程序可以使您有效地傳播信息。

I left my graphic design job at the end of February. With no elaborate plan and limited saving in the bank, I started my journey of transforming into a front-end developer.

我于2月底離開了圖形設(shè)計(jì)工作。由于沒有詳盡的計(jì)劃和銀行的有限儲蓄，我開始了轉(zhuǎn)型為前端開發(fā)人員的旅程。

該怎么辦 (What to Do)

Taking the first step is always hard. But if you recognize what the reason propelling you is, things get simpler. For example, if your purpose of becoming a developer is getting paid better ASAP, then you should learn the hot stuff in the market.

邁出第一步總是很難。但是，如果您知道推動自己前進(jìn)的原因是什么，事情就會變得簡單。例如，如果您成為開發(fā)人員的目的是盡快獲得更高的報(bào)酬，那么您應(yīng)該了解市場上的熱門話題。

In my case, because I realized that my current goal was to earn the power to combine design with development skills, I focused on showcasing both abilities.

就我而言，因?yàn)槲乙庾R到我當(dāng)前的目標(biāo)是獲得將設(shè)計(jì)與開發(fā)技能相結(jié)合的能力，所以我專注于展示這兩種能力。

So, I set a goal, and made a list of required tasks with my shallow understanding of front-end development:

因此，我對前端開發(fā)有了較淺的了解，從而設(shè)定了目標(biāo)，并列出了所需的任務(wù)：

1.目標(biāo) (1. Goal)

Get a front-end developer job

獲得前端開發(fā)人員工作

2.如何實(shí)現(xiàn)目標(biāo) (2. How to achieve the goal)

Build my portfolio site for showcasing my ability

建立我的投資組合網(wǎng)站以展示我的能力

3.要做的任務(wù) (3. Tasks to do)

Learn HTML, CSS, jQuery/JavaScript
學(xué)習(xí)HTML，CSS，jQuery / JavaScript
Design portfolio site
設(shè)計(jì)作品集網(wǎng)站
Portfolio works preparation
作品集準(zhǔn)備

I assigned only these tasks for myself at first. But as I read more articles, tutorials, or job requirements, I put these skills on the list along the way:

首先，我只為自己分配了這些任務(wù)。但是，當(dāng)我文章，教程或工作要求時(shí)，就將這些技能一并列出：

Sass
薩斯
Gulp
古爾普
CS50
CS50
Basic Unix
基本Unix
Basic Wordpress
基本的WordPress
Jekyll
杰基爾
Basic AWS knowledge
AWS基本知識
Basic networking knowledge
基本的網(wǎng)絡(luò)知識

Note: To be sure, the exploding information on web bombed me with more things to learn. In the five months, I had once put Node.js, React.js, PHP and more on the list. The tasks above were the ones that I actually completed in the end.

注意：可以肯定的是，網(wǎng)絡(luò)上爆炸性的信息使我學(xué)習(xí)了很多東西。在這五個(gè)月中，我曾經(jīng)將Node.js，React.js，PHP以及其他內(nèi)容列入清單。上面的任務(wù)是我最后實(shí)際完成的任務(wù)。

To follow the plan, I set a 48hr/week working goal for myself. It meant I had to work eight hours a day with only one day off in a week. Toggl helped me keep track of my performance.

為了遵守該計(jì)劃，我為自己設(shè)定了48小時(shí)/周的工作目標(biāo)。這意味著我每天必須工作八小時(shí)，一周只休息一天。 Toggl幫助我跟蹤了自己的表現(xiàn)。

Also, I took a long-term goal -> monthly goal -> weekly agenda -> daily agenda method to make my learning schedule, and Asana was my best assistant on managing these tasks.

此外，我制定了長期目標(biāo)->每月目標(biāo)->每周議程->每日議程方法來安排學(xué)習(xí)計(jì)劃，而Asana是我管理這些任務(wù)的最佳助手。

在哪里學(xué)習(xí) (Where to Learn)

I tried to learn from many platforms, tutorials, or articles along the way. Here’s the list of the resources and my thoughts to each of them:

在此過程中，我嘗試從許多平臺，教程或文章中學(xué)習(xí)。以下是資源列表以及我對每個(gè)資源的想法：

學(xué)習(xí)平臺 (Learning Platforms)

Back then, I hated the tutorials that showed me lines of codes I didn’t have any idea what to do with. Some assumed that I knew every bit of it, or they told me to ignore it for now. Please, I genuinely didn’t understand even a line of the code on the screen, because I was a TOTAL BEGINNER.

那時(shí)，我討厭那些向我展示不知道如何處理代碼的教程。有些人以為我了解它的全部內(nèi)容，或者他們告訴我暫時(shí)忽略它。拜托，由于我是TOTAL BEGINNER ，我什至根本不理解屏幕上的一行代碼。

Those kinds of lectures pained me, and made me looked down on myself. Generally, there’s no perfect platform to learn everything. I tried to be as flexible as I could, jumping between each of them.

這些演講使我很痛苦，使我看不起自己。通常，沒有完美的平臺可以學(xué)習(xí)所有內(nèi)容。我試圖盡可能地靈活，在他們每個(gè)人之間跳來跳去。

Codecademy — Lots of people recommended it, but I was pretty frustrated by its tutorials back then. I always stuck in practice without any clues.
密碼學(xué) - 很多人推薦它，但是當(dāng)時(shí)我對它的教程感到非常沮喪。我總是一無所獲。
Code School — I spent lots of time here, because the teachers explain the whys clearly. Recommended.
碼學(xué)校 - 我在這里花了很多時(shí)間，因?yàn)槔蠋熐宄亟忉屃嗽颉?推薦的。
Treehouse — The one with the most ads on Youtube! Treehouse has done a great job on marketing, which works (at least for me as a lost beginner back then). It covers so many topics, some of which were really useful for me. For example, it’s hard to find a decent tutorial of Wordpress for front-end developer students out there, but Treehouse has one.
樹屋 - 在YouTube上投放最多廣告的廣告！ Treehouse在市場營銷方面做得非常出色，而且行之有效(至少對于我當(dāng)時(shí)迷失的初學(xué)者而言)。它涵蓋了許多主題，其中一些對我真的很有用。例如，很難為前端開發(fā)人員的學(xué)生找到像樣的Wordpress教程，但是Treehouse有一個(gè)。
freeCodeCamp — Huge love for freeCodeCamp! This community has a clear path for beginners to follow, and it knows when to take the training wheels away from student. I was once anxious about what to do next after learning basic HTML, CSS and JavaScript, but freeCodeCamp put small projects on the right spots in the learning track. The community also shares great posts on Medium and by emails. Highly recommended!
freeCodeCamp —對freeCodeCamp的熱愛！這個(gè)社區(qū)為初學(xué)者提供了一條清晰的道路，并且知道何時(shí)將訓(xùn)練輪帶離學(xué)生。在學(xué)習(xí)了基本HTML，CSS和JavaScript之后，我曾經(jīng)擔(dān)心下一步該做什么，但是freeCodeCamp將小型項(xiàng)目放在學(xué)習(xí)軌道的正確位置。該社區(qū)還通過Medium和電子郵件分享了很棒的帖子。強(qiáng)烈推薦！

YouTube頻道 (Youtube Channel)

This is the best place to learn for free or for fun. Youtube videos are not only great for learning certain topics thoroughly from playlists, but are also handy for having a taste of some interesting knowledge.

這是免費(fèi)或有趣的最佳學(xué)習(xí)場所。 Youtube視頻不僅非常適合從播放列表中全面學(xué)習(xí)某些主題，而且還可以幫助您了解一些有趣的知識。

The Coding Train — Hosted by NYU’s ITP professor Daniel Shiffman, who is the most vigorous teacher I’ve ever seen, the channel provides easy-to-follow videos.
該頻道由紐約大學(xué)ITP教授丹尼爾·謝夫曼(Daniel Shiffman)主持，他是我見過的最有活力的老師，該頻道提供了易于觀看的視頻。
thenewboston— Covers almost any topics I can think of. The host, Bucky, has the power of making intimidating things sounds easy.
thenewboston —涵蓋了我能想到的幾乎所有主題。主持人Bucky具有使聽起來嚇人的聲音變得容易的力量。
Academind — Also provides all kinds of tutorials. Easy to follow. Recommended.
Academind —還提供各種教程。易于遵循。推薦的。
Fun Fun Function — The host Mattias Petter Johansson is a developer who had previously worked at Spotify and Blackberry. His channel is a nice place to learn JavaScript in an easy way.
有趣的娛樂功能 -主持人Mattias Petter Johansson是一名開發(fā)人員，之前曾在Spotify和Blackberry工作。他的頻道是學(xué)習(xí)JavaScript的好地方。
Linux Academy — I learned some basic knowledge of AWS here. Liked it!
Linux學(xué)院 —我在這里學(xué)習(xí)了一些AWS的基本知識。喜歡它！
Computerphile — The videos here are all about computer stuff. Interesting to know, but I’ll probably never truly understand what they’re talking about.
Computerphile —這里的視頻都是關(guān)于計(jì)算機(jī)的東西。有趣的是，但我可能永遠(yuǎn)不會真正理解他們在說什么。
Eli the Computer Guy — I learned knowledge about networking or servers here.
Eli，計(jì)算機(jī)專家 -我在這里了解了有關(guān)網(wǎng)絡(luò)或服務(wù)器的知識。
mycodeschool — My best friend while I took CS50. It explains computer science stuff clearly. Loved it.
mycodeschool —我參加CS50時(shí)最好的朋友。它清楚地解釋了計(jì)算機(jī)科學(xué)的內(nèi)容。愛它。

閱讀文章 (Articles to read)

Readings are a perfect medium for topics of life paths or inspiration for me. I was pumped by great articles when frustrated so many times in the five months. Here’re some of my best life guides:

對于我的人生道路或靈感來源，閱讀是一種理想的媒介。在五個(gè)月中無數(shù)次沮喪時(shí)，我被偉大的文章所吸引。這是我一些最佳的生活指南：

Why Learning to Code is So Damn Hard
為什么學(xué)習(xí)編碼是如此之難
I learned to code, build a web app and launch it on Product Hun in 2 months
我學(xué)會了編寫代碼，構(gòu)建Web應(yīng)用程序并在2個(gè)月內(nèi)在Product Hun上啟動它
Why I studied full-time for 8 months for a Google interview
為什么我全職學(xué)習(xí)了8個(gè)月以接受Google采訪
How to Go From Hobbyist to Professional Developer
如何從業(yè)余愛好者變成專業(yè)開發(fā)人員
Learn To Code in 2017, Get Hired, And Have Fun Along the Way
在2017年學(xué)習(xí)編碼，被雇用并在旅途中玩得開心
The Ultimate Guide to Learning Full Stack Web Development in 6 months, for $30
只需30美元，即可在6個(gè)月內(nèi)學(xué)習(xí)全棧Web開發(fā)終極指南

其他有用的資源 (Other Useful Resources)

JavaScript: Understanding the Weird Parts — Great Udemy course that clarify so many confusing parts of JavaScript for me. Highly recommended.
JavaScript：理解怪異的部分 —很棒的Udemy課程，為我澄清了許多令人困惑JavaScript部分。強(qiáng)烈推薦。
CS50 at Harvard — I knew Computer Science knowledge was not a must-have knowledge for applying to junior front-end developer job, but I couldn’t resist the temptation to take this course because it looked so interesting! It was worth my precious time in retrospect.
哈佛大學(xué)的CS50 －我知道計(jì)算機(jī)科學(xué)知識不是申請初級前端開發(fā)人員工作所必需的知識，但是我忍不住上這門課程的誘惑，因?yàn)樗雌饋硎侨绱擞腥?#xff01; 回想起來，這是我寶貴的時(shí)間。
NYMY — Episode 1 — Pieter Levels — NYMY is a podcast show hosted by talented designer Tobias van Schneider. He interviewed the maker of NomadList Pieter Levels in this episode. I listened to Pieter’s story several times when I was down. This one hour show introduced me to the infinite possibilities of being a coder/designer.
NYMY —第1集— Pieter Levels — NYMY是由才華橫溢的設(shè)計(jì)師Tobias van Schneider主持的播客節(jié)目。他在這一集中采訪了NomadList Pieter Levels的制造商。我沮喪的時(shí)候聽了好幾次皮特的故事。這個(gè)一小時(shí)的節(jié)目向我介紹了成為編碼器/設(shè)計(jì)師的無限可能。

如何找到工作 (How to Get a Job)

After about 4 months of non-stop coding and designing, I finally knew a little about the front end. I had also completed almost 80% of my portfolio site. At the same time, my remaining savings were only enough for me to live on for another couple of months.

經(jīng)過大約4個(gè)月的不間斷編碼和設(shè)計(jì)，我終于對前端有所了解。我還完成了我投資組合網(wǎng)站的近80％。同時(shí)，我剩下的積蓄僅夠我繼續(xù)生活幾個(gè)月。

It was time to look for a new job.

是時(shí)候?qū)ふ倚鹿ぷ髁恕?

Unfortunately, I had barely any choices at all. Not many companies wanted a man with no relative development experience/background, and even fewer appreciated the value of my graphic design abilities. It was also sad to have fewer than five job opportunities that were possibly a fit for me. On the bright side, the situation forced me to focus on these precious chances.

不幸的是，我?guī)缀鯖]有任何選擇。沒有多少公司想要一個(gè)沒有相關(guān)開發(fā)經(jīng)驗(yàn)/背景的人，甚至更少的公司贊賞我的圖形設(shè)計(jì)能力的價(jià)值。也有人痛心地有可能是一個(gè)適合我少于五個(gè)工作機(jī)會。從好的方面來看，形勢迫使我將精力集中在這些難得的機(jī)會上。

I had been watching the design agency Tenten for at least three years. It is the one and only agency that’s able to harness design, digital development, and innovation at the same time in Taiwan. I’ve had them on my “please hire me” list for a long time, and I believed Tenten was the only company here that would be sold on my multi-disciplinary skills as well.

我已經(jīng)看過Tenten設(shè)計(jì)公司至少三年了。它是臺灣地區(qū)唯一能夠同時(shí)利用設(shè)計(jì)，數(shù)字開發(fā)和創(chuàng)新的公司。我已經(jīng)將他們列入我的“請雇用我”名單很長時(shí)間了，我相信Tenten是唯一一家將以我的多學(xué)科技能出售的公司。

In the last two months of my journey, I learned as much as I could about Tenten’s junior front-end developer position. Meanwhile, I completed my personal site. When the time was ripe, I applied for the position. As backup plans, I sent my resume and portfolio to other five companies as well. And I waited.

在旅程的最后兩個(gè)月，我對Tenten初級的前端開發(fā)人員的職位了解了很多。同時(shí)，我完成了我的個(gè)人網(wǎng)站。時(shí)間成熟了，我申請了這個(gè)職位。作為備份計(jì)劃，我也將簡歷和投資組合也寄給了其他五家公司。我等了。

And finally…

最后...

回想起來 (In Retrospect)

Looking back, I still wouldn’t say that transforming myself from a designer to a developer was easy, but it wasn’t as hard as I thought it would be, either. The hardest part of the process was never understanding or writing the code, but having the powerful motivation that drives you forward.

回顧過去，我仍然不會說將自己從設(shè)計(jì)師轉(zhuǎn)變?yōu)殚_發(fā)人員很容易，但也沒有我想的那么難。該過程中最困難的部分是從不理解或編寫代碼，而是具有促使您前進(jìn)的強(qiáng)大動力。

Congratulations if you’ve found this motivation. If you haven’t, give it more try before you quit. If you never try, you’ll never know.

恭喜您找到了這種動力。如果還沒有，請?jiān)谕顺銮皣L試一下。如果你不去嘗試，你永遠(yuǎn)不會知道。

The most important lesson I learned along the way was to start doing something ASAP. I know it’s terrifying to take the first step of actually building something, but it’s the only way to truly learn something. Remember, you have nothing to lose anyway.

我在此過程中學(xué)到的最重要的一課是盡快開始做某事。我知道邁出第一步，真正構(gòu)建東西真是令人恐懼，但這是真正學(xué)習(xí)一些東西的唯一途徑。請記住，無論如何您都不會丟失。

The days and hardships after formally becoming a developer are another story.

正式成為開發(fā)人員后的日子和艱辛是另一個(gè)故事。

I’m so glad to have been a front-end developer at Tenten for 6 months now. The journey of learning never ends!

我很高興能成為Tenten的前端開發(fā)人員六個(gè)月了。學(xué)習(xí)的旅程永無止境！

中文版連結(jié) (Chinese Version) / Read more of my work on vinceshao.com

中文版連結(jié) (中文版)/在vinceshao.com上閱讀我的更多作品

翻譯自: https://www.freecodecamp.org/news/graphic-designer-to-front-end-developer-7be7bfd6a46c/