平面設計前端_我如何在5個月內從平面設計師過渡到前端開發人員

平面設計前端

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而又令人興奮的一年。我三月份離開了圖形設計師的工作，進入了編碼世界的迷宮。五個月后，我終于在Tenten.co上找到了前端開發人員的工作。

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.

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

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.

需要明確的是，本文并非從經驗豐富的開發人員或設計師的角度撰寫的，他們可以說明遵循的明確路線圖。這也不是學習前端開發的速成課程。關于這個主題有很多很棒的教程，我將在本文的后面列出一些。

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

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

我的背景 (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歲的平面設計師，完全沒有編碼方面的經驗。在我上學的時候，我的數學，物理，化學和科學考試成績都非常低。這些主題使我感到愚蠢而復雜的公式，數字和錯誤。那時令我感興趣的事物總是由繪畫，音樂或文字創造的美麗。自然，我選擇了英語作為我的專業，并且對大學的文學，文化，攝影和設計著迷。

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.

我如何在大學里獨自學習如何設計，并在畢業后最終成為平面設計師又是另一回事了。關鍵是，直到去年，我一直夢想著成為一名作家，攝影師，電影評論家，歌手和設計師，但是我從來沒有想過要成為一名開發人員。

為什么我要編碼 (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.

對我來說，圖形設計的目的是解決由不可見系統或結構支持的有吸引力的視覺形式的問題。

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.

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

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?).

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

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.

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

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

在我進入圖形設計生涯的兩年后，我對這個游戲感到厭倦。

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

從那時起，我決定認真研究Medium上始終流行的前端開發主題。

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.

我發現，作為一名具有設計技能的開發人員，可以使您對每種情況和客戶有更多的控制和權限。此外，從事Web開發或應用程序可以使您有效地傳播信息。

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月底離開了圖形設計工作。由于沒有詳盡的計劃和銀行的有限儲蓄，我開始了轉型為前端開發人員的旅程。

該怎么辦 (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.

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

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.

就我而言，因為我意識到我當前的目標是獲得將設計與開發技能相結合的能力，所以我專注于展示這兩種能力。

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

因此，我對前端開發有了較淺的了解，從而設定了目標，并列出了所需的任務：

1.目標 (1. Goal)

Get a front-end developer job

獲得前端開發人員工作

2.如何實現目標 (2. How to achieve the goal)

Build my portfolio site for showcasing my ability

建立我的投資組合網站以展示我的能力

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

Learn HTML, CSS, jQuery/JavaScript
學習HTML，CSS，jQuery / JavaScript
Design portfolio site
設計作品集網站
Portfolio works preparation
作品集準備

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:

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

Sass
薩斯
Gulp
古爾普
CS50
CS50
Basic Unix
基本Unix
Basic Wordpress
基本的WordPress
Jekyll
杰基爾
Basic AWS knowledge
AWS基本知識
Basic networking knowledge
基本的網絡知識

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.

注意：可以肯定的是，網絡上爆炸性的信息使我學習了很多東西。 在這五個月中，我曾經將Node.js，React.js，PHP以及其他內容列入清單。 上面的任務是我最后實際完成的任務。

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.

為了遵守該計劃，我為自己設定了48小時/周的工作目標。這意味著我每天必須工作八小時，一周只休息一天。 Toggl幫助我跟蹤了自己的表現。

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.

此外，我制定了長期目標->每月目標->每周議程->每日議程方法來安排學習計劃，而Asana是我管理這些任務的最佳助手。

在哪里學習 (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:

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

學習平臺 (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.

那時，我討厭那些向我展示不知道如何處理代碼的教程。有些人以為我了解它的全部內容，或者他們告訴我暫時忽略它。拜托，由于我是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.

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

Codecademy — Lots of people recommended it, but I was pretty frustrated by its tutorials back then. I always stuck in practice without any clues.
密碼學 - 很多人推薦它，但是當時我對它的教程感到非常沮喪。我總是一無所獲。
Code School — I spent lots of time here, because the teachers explain the whys clearly. Recommended.
碼學校 - 我在這里花了很多時間，因為老師清楚地解釋了原因。推薦的。
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在市場營銷方面做得非常出色，而且行之有效(至少對于我當時迷失的初學者而言)。它涵蓋了許多主題，其中一些對我真的很有用。例如，很難為前端開發人員的學生找到像樣的Wordpress教程，但是Treehouse有一個。
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的熱愛！這個社區為初學者提供了一條清晰的道路，并且知道何時將訓練輪帶離學生。在學習了基本HTML，CSS和JavaScript之后，我曾經擔心下一步該做什么，但是freeCodeCamp將小型項目放在學習軌道的正確位置。該社區還通過Medium和電子郵件分享了很棒的帖子。強烈推薦！

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.

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

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.
該頻道由紐約大學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是一名開發人員，之前曾在Spotify和Blackberry工作。他的頻道是學習JavaScript的好地方。
Linux Academy — I learned some basic knowledge of AWS here. Liked it!
Linux學院 —我在這里學習了一些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 —這里的視頻都是關于計算機的東西。有趣的是，但我可能永遠不會真正理解他們在說什么。
Eli the Computer Guy — I learned knowledge about networking or servers here.
Eli，計算機專家 -我在這里了解了有關網絡或服務器的知識。
mycodeschool — My best friend while I took CS50. It explains computer science stuff clearly. Loved it.
mycodeschool —我參加CS50時最好的朋友。它清楚地解釋了計算機科學的內容。愛它。

閱讀文章 (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:

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

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

其他有用的資源 (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部分。強烈推薦。
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.
哈佛大學的CS50 －我知道計算機科學知識不是申請初級前端開發人員工作所必需的知識，但是我忍不住上這門課程的誘惑，因為它看起來是如此有趣！回想起來，這是我寶貴的時間。
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是由才華橫溢的設計師Tobias van Schneider主持的播客節目。他在這一集中采訪了NomadList Pieter Levels的制造商。我沮喪的時候聽了好幾次皮特的故事。這個一小時的節目向我介紹了成為編碼器/設計師的無限可能。

如何找到工作 (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.

經過大約4個月的不間斷編碼和設計，我終于對前端有所了解。我還完成了我投資組合網站的近80％。同時，我剩下的積蓄僅夠我繼續生活幾個月。

It was time to look for a new job.

是時候尋找新工作了。

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.

不幸的是，我幾乎沒有任何選擇。沒有多少公司想要一個沒有相關開發經驗/背景的人，甚至更少的公司贊賞我的圖形設計能力的價值。也有人痛心地有可能是一個適合我少于五個工作機會。從好的方面來看，形勢迫使我將精力集中在這些難得的機會上。

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.

我已經看過Tenten設計公司至少三年了。它是臺灣地區唯一能夠同時利用設計，數字開發和創新的公司。我已經將他們列入我的“請雇用我”名單很長時間了，我相信Tenten是唯一一家將以我的多學科技能出售的公司。

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.

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

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.

回顧過去，我仍然不會說將自己從設計師轉變為開發人員很容易，但也沒有我想的那么難。該過程中最困難的部分是從不理解或編寫代碼，而是具有促使您前進的強大動力。

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.

恭喜您找到了這種動力。如果還沒有，請在退出前嘗試一下。如果你不去嘗試，你永遠不會知道。

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.

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

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

正式成為開發人員后的日子和艱辛是另一個故事。

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

我很高興能成為Tenten的前端開發人員六個月了。學習的旅程永無止境！

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

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