如何教設計師網頁前端技術

認識我的同行都知道我有提供遠端前端教學的服務,
但因為今年掉進太多坑,所以就先暫停了,
這裡則提供這兩年來個人的教學經驗,
給各位正準備教你的設計師同事、學生一些方向^_^

從2012年到至今,我透過遠端教學教了30位學生,
絕大部分則都是視覺設計師、非資工背景的初學者,
會想要學前端技術不外乎就是希望自己能夠掌握兩樣技能:
  1. 能夠透過HTML、CSS來設計網頁版型
  2. 能夠自行設計出動畫效果(jQuery、CSS3 animation)
我透過下列的教學方針,
教一位初學者從0到會網頁排版,有能力撰寫簡單動畫,
同時能管理jQuery plugin最長只花了8週16小時(1week/2hr),
而有自學過一陣子的視覺設計師也僅花3~4週就OK,
畢竟我只是協助打通他們觀念不懂的地方並對症下藥而已:


1.建立共通語言

設計師是視覺動物,
如果你教學時只圍繞著code和程式邏輯,
時不時又穿插一些很難懂的技術名詞,
很快對方就會打退堂鼓。
所以當你在解釋一個寫code的觀念時,
必須先和學生建立一個雙方都知道的東西,
再透過它來帶入觀念,會比較容易吸收
譬如來說一般大學畢業生、社會人士都用過word,
我就會用word來解釋HTML語意化的觀念,
但通常我會看對方最熟悉的東西來代入,
吸收效果也較好。

舉例:

不好的解說方式 (一口氣講太多技術名詞,初學者難以吸收)
「HTML有許多tag可以使用,比較常用的像標題h1~6拿來下標題,還有p段落,ul li來排列表清單。現在HTML5又多了很多標籤可以使用像是navarticle等等之類的,可以更聚焦地表達網頁內容。」

好的解說方式
「HTML可以存成一個檔案,就像是你用word寫東西一樣,儲存起來他副檔名是.docx,HTML儲存起來就會是.html,客戶就是打開這個.html來看你的網頁。
像你在寫word的時候不是會設定大標題、次標題?
如果你網頁上重要標題要讓人知道的話,就必須在標題內容寫上<h1>標題</h1>,這樣Google搜尋引擎在解析網頁時,就會透過h1標籤知道這是你網頁上最重要的標題,所以每個標籤都有用意存在,並不是所有東西都必須用DIV排。」


2.實作手把手教學

當我講完一個觀念後,
就會請學生開始練習並把他實作出來,
除了加深印象外,也可以觀察他設計網頁的流程並給予協助,
過程中我也會讓他看我設計網頁的流程,
遠端軟體teamviewr的好處就是,
我可以操作對方的電腦,
而對方也可以反操作我的,相當方便。

我教2小時,講課只有45min,
其他時間都是我看對方實作。

網頁編輯器是sublime text 3,
只教基本操作,兩個插件(Emmet、Goto-CSS-Declaration),
切記一開始不要教太多的編輯器功能,
只要教最常用的那3~5%功能就好,
你要讓學生覺得一開始就很好用,他才不會排斥。
一次教太多只會造成初學者混亂,而且也記不住,
通常我教完使用sublime基本操作和emmet後,
他們就沒在碰Dreamweaver了。


3.鼓勵與讚美

在教學初期因為都在講基礎,
所以code和呈現的學習畫面都很呆板無聊,
設計師自然會覺得不曉得何時才能夠達到自己所想要的技術水平。
所以當對方實做完一個程式碼段落後,
我就會開一個知名網站出來,show出他們的code和他說:
「你看你這部份寫的code跟這個網站也一樣了,它也是用了這個觀念呈現這樣的網頁設計效果。」

請不要找國外他從來沒聽過的網站,
而是拿他看過的國內知名網站,或是他知道的某位大神設計師所做的東西會比較有感,
讓他們有覺得自己也逐漸朝「專業網頁設計師」的方向在前進


4.知識不在多、在於精

我教設計師前端技術時,
只教實務上最常用的5%,
例如在網頁排版上,
我自然會教float、position、box model、塊狀行內觀念等等,
在目前瀏覽器兼容性最好的排版觀念,
譬如一個float排版方法,我只會教一種最常見也最不會有問題的設計方式,
我的觀念是一開始你教他太多運用方法他也沒辦法吸收,
不如先教一個最常用的,等他用熟了,遇到問題再教第二個會比較實際,
在我的教學樣本數觀察下來,這樣方式導入上確實可行。


5.責任切割明確

設計師有時候因為專案需要,
除了要學會寫網頁,
同時也必須要會一些UI動畫效果,
我這裡是覺得視覺設計師只要知道jQuery的click、hover觸發slideToggle效果,
就能變化出很多效果了。

我會教設計師如何抓別人的jQuery pulgin,並修改CSS做成自己的東西,
畢竟動畫效果也只是透過HTML、CSS來跑動畫,並不是魔術。

讓學生自己實際抓別人已經寫好的jQuery效果並套在自己的網頁上,
在一些常會遇到的問題給予協助,
(例:background image失效、用chrome開發工具觀察是否有套上效果),
多套幾次就會有感覺了。

如果是太過客製化s動畫效果,
就老實跟老闆說不會把他外包出去給專業的人吧,

視覺設計師會建議學HTML、CSS設計網頁版型,
原因是他幾乎沒有重邏輯性(if、else)的東西,
只要懂觀念和know how就OK,
我個人認為設計師不要去碰太過邏輯性的東西,
把精神放在擅長的視覺傳達領域呈現會比較好些。


6.從專案中投入練習

當設計師想學前端時,
我會問對方目前有沒有機會在工作上碰網頁設計,
如果沒有那就先別學,因為一定學不會,也浪費時間。

就我觀察,
學習過程中有或沒有參與網頁設計案的學習程度,
兩者成效將近差了5~10倍左右,

所以到後期我只教有專案在身上的設計師,

我也教過沒有專案投入而且在找工作的應屆畢業大學生,
這種類型我會到Free PSD官網找一個版型讓他學切圖、排版、套效果,
每週就是不停地調校那個版型,直到滿意為止,

之後學生要面試也可以拿那個版型去DEMO,
作品不在多、在於精,
重要的是你如何透過作品去讓面試官知道你目前會哪些東西,
以及你未來還打算往哪些前端技術發展。


7.培養搜尋知識能力 & 職缺方向 & 前端資源

在教學的過程中,
我會引導對方該如何透過Google來快速聚焦搜尋到想要的知識,
畢竟身為一個開發者,培養搜尋知識能力也是很重要的,

教學過程快結束時,
我都會開inside與人力銀行的職缺和學生討論,
讓他們曉得如果要朝網頁設計師/前端設計師的方向前進,
還必須掌握哪些技術才ok,
即將畢業的學生我都會再開一些學習方向讓他們自行去消化,
透過這樣的方式拓展他們的職涯選擇能夠更加的多元。

另外也會提供一些瀏覽前端資訊的管道,
以便初學者了解目前前端趨勢,
例:使用feedly追蹤最新文章、加入FB前端社團、就近前端聚會活動

--

學生/老師我覺得是一個很有助益的互補關係,
被我教過的學生直到現在有幾位也變成了好朋友,
當學生成長時,聊得技術也越來越深,
對老師來說因為怕被幹掉所以又會有動力去學新東西XDD

我也教過30~40歲,設計經驗超過10年以上的設計師,
讓人意外的是他們學前端技術反而比一般初學者和junior設計師還要快,
觀察下來原因是他們利用自己長年下來的設計經驗套用到學HTML、CSS上,
因為控制慾強,所以看到版型歪掉就不舒服,自然就會找資源把他設計到最好,
也打破了我覺得有年紀的設計朋友會比較難學寫code的迷思。

我很喜歡教人和分享技術經驗,
可能是以前我在學前端就是因為沒人帶,
所以撞牆了三四年才覺得開始有懵懵懂懂的會了些皮毛,
不希望想要投入這個領域的初學者撞牆太久或走歪路,
希望一些經驗多少能帶給大家幫助^_^




57 則留言:

  1. 寫的很棒!!真的謝謝廖大!

    回覆刪除
  2. 你好,意外連到此篇文章,雖然是兩年前的文章,如有機會還是想請教您,目前也是位視覺設計,對於網頁技術也是零基楚,想至少能以HTML、CSS設計網頁,不要依賴Dreamweaver,目前也是先以書籍自學,以編輯器練習語法,不曉的這樣的學習模式是否ok,或是能更加提升效率的方式呢

    回覆刪除
  3. 你好,意外連到此篇文章,雖然是兩年前的文章,如有機會還是想請教您,目前也是位視覺設計,對於網頁技術也是零基楚,想至少能以HTML、CSS設計網頁,不要依賴Dreamweaver,目前也是先以書籍自學,以編輯器練習語法,不曉的這樣的學習模式是否ok,或是能更加提升效率的方式呢

    回覆刪除
    回覆
    1. 你好,
      關於網頁排版自學的部分,在先前我有寫過一篇文章,也提供給你參考,
      https://www.facebook.com/groups/358503154261390/permalink/696992570412445/

      網頁教學資源都很零散,我自己有整理一份前端資源,也提供給你:
      https://docs.google.com/document/d/13nK_XY9u5uIleTpSCw88lMupzgCSwXd6j6je44eLhMQ/edit

      如果你想就業的話,我可以丟一些東西給你,你試著實作出來後,我可以幫你看code 是否符合業界水準,既然你已經開始摸HTML、CSS,那就試著把附件的設計稿寫成網頁吧,寫完再將檔案傳到我的Mail:gonsakon@gmail.com。
      https://www.dropbox.com/s/5skli4fb25xosg5/%E7%89%88%E5%9E%8B%E4%B8%80.zip?dl=0

      如果你是高雄人的話,歡迎參加我創立的社群,我們定期會舉辦網頁前端的聚會 :D
      https://www.facebook.com/groups/358503154261390/

      刪除
    2. 非常的謝謝你!!!XD~

      刪除
  4. 作者已經移除這則留言。

    回覆刪除
  5. 我在出版社待了三年 是以插畫和編輯書本為主 但以前我有接觸過網頁設計 覺得很有興趣未來也想朝這方面發展 現在除了畫畫以外也有在lynda.com學習程式。雖然資質不好,但這個網誌很激勵我! 謝謝!

    回覆刪除
  6. These provided information was really so nice,thanks for giving that post and the more skills to develop after refer that post. Your articles really impressed for me,because of all information so nice.


    Car Cleaning Services in Mumbai


    back to original car services

    回覆刪除
  7. Superb. I really enjoyed very much with this article here. Really it is an amazing article I had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.thank you for sharing such a great blog with us. expecting for your.
    Digital Marketing Company in India
    Seo Company in India

    回覆刪除
  8. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.

    Hadoop Training in Chennai
    Dotnet Training in Chennai

    回覆刪除
  9. We have to guidance for this information is very nice. I'm really followed to our tips. Thanks again this usefulness article. I've to learn much more information on this site.SEO Training in Chennai
    SEO Company in India
    SEO Training Institute

    回覆刪除
  10. It’s really amazing that we can record what our visitors do on our site. Thanks for sharing this awesome guide. I’m happy that I came across with your site this article is on point,thanks again and have a great day. Keep update more information..
    Best Interior Designers in Chennai
    Interior Designers in Chennai

    回覆刪除


  11. Its very useful to me. Wonderful blog.. Thanks for sharing informative Post.

    Installment loans
    Payday loans
    Title loans

    回覆刪除


  12. Its a wonderful post and very helpful, thanks for all this information. You are including better information regarding this topic in an effective way.Thank you so much

    Personal Installment Loans
    Title Car loan
    Cash Advance Loan

    回覆刪除
  13. Really it was an awesome article...very interesting to read..You have provided an nice article....Thanks for sharing..
    Android Training in Chennai
    Ios Training in Chennai

    回覆刪除
  14. This is extremely great information for these blog. And Very good work. It is very interesting to learn from to easy considered. Thank you for giving information.

    Bigdata Training in Chennai

    回覆刪除
  15. I feel happy to have Spent my time in reading such a useful blog.....
    SAP Training in Chennai

    回覆刪除
  16. Its really an Excellent post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog. Thanks for sharing....

    Restaurant in OMR
    Apartments in OMR
    Villas in OMR
    Resorts in OMR

    回覆刪除
  17. You taught 30 students through distance teaching. With such a large number of students whether you have difficulty in teaching
    run 3

    回覆刪除
  18. All the latest updates from the PythonAutomationminds team. Python Automationminds lets you program in Python, in your browser. No need to install any software, just start coding straight away. There's a fully-functional web-based console and a programmer's text-editor
    Phyton training in Chennai

    回覆刪除
  19. 作者已經移除這則留言。

    回覆刪除
  20. Good Post! Thank you so much for sharing this pretty post,
    it was so good to read and useful to improve my knowledge as updated one, keep blogging.
    Good Post! Thank you so much for sharing this pretty post,
    it was so good to read and useful to improve my knowledge as updated one, keep blogging.
    Java training in Chennai

    Java training in Bangalore

    Java online training

    Java training in Pune



    回覆刪除
  21. Потрясающе креативныеи еще поразительно правдивые онлайн гадания для предсказания вашего ближайшего будущего, это именно то, что поразит тебя на портале гаданий. Гадание онлайн с подробной интерпретацией оказывается действенным доступным и действенным инструментом для получения жизненных информаций из энерегетического поля земли.

    回覆刪除
  22. Excellent post! Your post is very useful and I felt quite interesting reading it. Expecting more post like this. Thanks for posting such a good post.To service your laptop with offer prices.
    Please visit : Laptop Service Center | Laptop Service Center in Kelambakkam

    回覆刪除
  23. Огромное количество игр выпускается ежемесячно. Как никогда легким путем приобрести востребованную игру представляется игры ужасы на пк скачать торрент. Быть знатоком в поджанрах ПС игр не особенно легко по вине нереального их многообразия. Качнув игрушки с Torrent вы получите больший уровень атаке вирусов. Обманщики попытаются использовать простоту пользователей и передавать трояны. Скачивание торрента является простой процедурой, подходящей к тому же для молодых пользователей.

    回覆刪除
  24. Различные жилищные объединения встают перед вопросом закупки разнообразных контейнеров. Оборудование для кооперативных хозяйств по наиболее конкурентноспособным ценам. Предприятие snabtop.ru поможет вам закупить здесь кресло садовое купить по наиболее актуальной стоимости без посредников.

    回覆刪除
  25. Most valuable post! This article is very helpful and I think it quite fascinating while reading it. Looking forward to more post like this. Thanks for posting like this a good post.
    To service your laptop with offer prices, Please visit : Laptop service center in Navalur

    回覆刪除
  26. Изменение современных процессов дает возможность интернет сайтам основательно повысить предлагаемые сервисы. Интернет-игры имеют большую распространенность во всем мире. Casino x доступное зеркало – используйте возможности качественной игры и выиграйте реальные суммы.

    回覆刪除
  27. На сегодняшний день существуют сотни интернет-казино на настоящие деньги. Именно на ресурсе joycasino официальный скачать вы сможете поднять настоящие суммы. Необходимо уделить большое внимание подбору оптимально безопасного игрального сайта.

    回覆刪除
  28. Wow it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot. it is really explainable very well and i got more information from your blog.
    DevOps Training in Chennai

    DevOps Course in Chennai

    回覆刪除
  29. Amazing post! Your post is very useful, and I think it very interesting while reading it. Looking forward to more articles like this. Thanks for posting like this a good article.
    To service your laptop with offer prices, Please visit : Laptop service in Home

    回覆刪除
  30. Оптимальный выбор плитки способен облагородить какую угодно коридор или ванную комнату. Сфокусируйтесь не только на напольной плитке заморского выпуска, но также на отечественные типы. Отбирая недорогой товар как, например, о фабрике pamesa стоит просмотреть множественное число продуктов. Керамическая очень хорошо подходит к любому интерьеру.

    回覆刪除
  31. Разновидность тонов и форматов. Керамогранит http://poragovorit.com/index.php?subaction=userinfo&user=opufizase делают в невероятном количестве, а каждая фирма намеревается запустить собственный уникальный вариант. Ценовой диапазон плитки опять же расходится.

    回覆刪除
  32. Вот, попался на глаза прикольный рецепт вкусных курячих крылышек на портале https://trebuha.ru/143-tjubiki-v-krasochnom-souse-s-gribami.html. Невероятный аромат и простой вариант приготовления вкусненького блюда – добиться результата можно за счет пошагового рецепта. Практически на праздничном столе раз плюнуть встретить поджаренную курицу. Мясо птицы – невероятно популярный продукт в нынешнее время.

    回覆刪除
  33. На странице маркетплейса Maksiden просто найти самовар электрический ссср купить по преимущественно оптимальной стоимости. Самый банальный случай – на любой кухне непременно присутствует чайник. Кухонные принадлежности стоит символично поделить на 2 особые категории – декоративные и используемые по назначению, для постоянного применения.

    回覆刪除
  34. Выбрав направление https://biletynapoezda.ru/moskva-starayarussa/, нужно отметить точную дату путешествия. С использованием новейшей системы поиска маршрута, клиенту не понадобится вникать в вопрос, где сделать пересадку. Организуйте свое приключение персонально за пару нажатий мышкой, оформляя билеты на сайте.

    回覆刪除
  35. Морские обитатели считаются важнейшим источником витамина B для человеческого организма. Непосредственно в интернет-магазине https://redgmshop.ru/shop/krevetki/ вы можете найти товар наивысшего качества! Рыбные дары являются важнейшим источником качественного белка и различных питательных элементов. Рыбные дары преимущественно необходимы маленьким детям и спортсменам.

    回覆刪除
  36. на платформе https://modscheats.ru/348071-obrazovanie-v-ssha-pomosch-v-postuplenii-ot-kompanii-infostudy.html вы отыщите конкретные данные по учебе в США. Всего лишь в Соединенных Штатах Америки будущие студенты могут получить достойное обучение. Info Study – организация с десятилетним опытом, какая способствует при зачислении в институты Соединенных Штатов Америки. Получите качественное обучение за рубежом.

    回覆刪除
  37. Тесты английского языка на территории Канады https://rusevik.ru/blog/8884 – это ответственный период, который завтрашний ученик обязан пройти перед принятием в институт. Длительность обучения формируется индивидуально, на основании показателей основного тестирования. Самым трудным вводным тестом представляется TOEFL.

    回覆刪除
  38. Конечно https://pokupki.market.yandex.ru/catalog/sushilki-dlia-belia/18054954/list?cvredirect=3&supplierId=775576&hid=6496840 сгодится в любой квартире, в особенности, в случае если вы ожидаете друзей. На страницах маркетплейса Яндекс всякий пользователь сможет приобрести подходящие кухонные вещи и дома. Общебытовые товары для каждого представлены по оптимально приемлемым ценам интернет-магазина Яндекса.

    回覆刪除
  39. Влагостойкий вид абсолютно не втягивает пар, а после высыхания не изменяется. Как водится ФСФ фанеру применяют как наружный аппретурный материал. Фанерная плита ФСФ - это водоупорный тип фанеры, получивший обширное распределение в строительной сфере фанера ламинированная купить в Минске. Для внутрикомнатных действий применять ФСФ плиту невозможно - могут присутствовать вредоносные вещества при определенных условиях.

    回覆刪除
  40. Как правило, напор воздуха может высушить влажные руки клиента за 10-15 минут. Многие посетители утверждают, что бумажные полотенца применить более проще, чем стационарные сушилки, к примеру, купить автоматический дозатор для жидкого мыла. Необходимо понимать важные достоинства, какие получают клиенты и владельцы учреждений общепита, используя воздушную сушилку.

    回覆刪除
  41. Оптимально нехитрый путь хака – это установка вредоносного ПО, к примеру, трояны. Кибервзломщики имеют возможность пройти на устройство юзера и заполучить онлайн-доступ к приватной информации. Самым главным направлением безопасности в интернете есть защита сетевого оборудования, с помощью которого устанавливается доступ в интернет http://bbmo.net/home.php?mod=space&uid=3909&do=profile.

    回覆刪除
  42. С эволюцией веб-технологий равнозначно улучшают определенные методы воздействия злодеи, какие функционируют в Глобальной сети http://www.loveroz.ru/index.php?subaction=userinfo&user=upypico. Интернет дает преимущества охватить немыслимое количество архивов гарантированно на халяву. Посещая интернет потребуется заблаговременно обеспокоиться о безопасности компьютерного устройства и размещенной на нём информации.

    回覆刪除
  43. Stunning post! Your post is very useful and quite interesting reading it. Expecting more post like this. Thanks for posting such a good post. To get the nadi astrology please visit best nadi astrologer in Tamilnadu

    回覆刪除