全能外語（Schoolhouse Language Center）是以孩子為主要學員的外語教學品牌，手心設計為它重新規劃官方網站，範圍從網站企劃、網站架構與 wireframe，到頁面視覺與整套手繪插畫。設計先替家長與學生兩種主要使用者整理資訊，再以模組區塊化的版面、鵝黃與淺藍的插畫風格呈現，讓您打開網站就能找到課程、活動與分校資訊。
全能外語將英文學習融入孩子的日常生活，除了語言外，更能收穫到不同領域的知識與文化，生動且平易親和的氛圍，培養孩子全方位的能力。
–
本次網站設計由使用受眾：家長、學生、潛在客群等面向切入，將文字資訊簡化並分類，網站整體以模組區塊化的方式呈現，輔以生動的手繪插圖表達重點訊息，使用者皆能快速且容易地找到所需資訊。
Schoolhouse Language Center integrates English learning into children’s daily life. Schoolhouse Language Center creates the free and relax environment to cultivate children’s skills. Children can also gain knowledge and culture in different domain besides learning English.
Hand-Heart designs for the target audience including parents, students and potential customers in this website design case. Simplify and sort out the information. The website displayed block and modular style, paired up the energetic hand-drawn illustrations to make the points stand out. The users of this website could get the information quickly and easily.
全能外語的新網站要先解決什麼問題？§
2019 年 5 月的網站企劃先定義誰會來看這個網站：主要瀏覽者是家長，主要學習者是國小學童，國高中生與成人則是附屬的學習族群。網站因此要同時滿足三件事：讓家長即時掌握班級訊息與教學特色、讓學生課後能自主複習，也讓全能外語的教學特色被看見。
企劃階段也觀察了幾個同類語言教育機構的網站，發現有的首頁橫幅文字偏多、版面略顯擁擠，也有的以模組區塊清楚呈現主題，於是把方向定為簡化資訊量、以模組區塊表達重點，並訂出「家長放心，學生學習安心」的溝通核心，關鍵詞是專業、清新、簡約與閱讀舒適；製作上採用電腦、平板與手機都能閱讀的 RWD 響應式網站。
網站架構怎麼安排，讓家長和孩子各自找到需要的內容？§
2019 年 7 月的兩版 wireframe 提案，把網站分成最新資訊、關於全能、各地分校、線上學習、聯絡我們五個主要區塊。最新資訊再分成課程資訊、文化節慶、活動花絮三類，首頁各放最新三則，點進去可看歷年清單；關於全能介紹品牌、課程與師資，並附常見問題；各地分校列出每間分校的聯絡資訊與活動；線上學習依 Level 分級，整理文法、字彙、發音、閱讀與對話等學習內容。
首頁另外設置「每日一句」，讓孩子把英文放進日常，也呈現全能外語對學習的在乎。
插畫與配色怎麼呈現全能外語的個性？§
在色彩規劃上沿用原Logo的藍黃配色，加以微調為粉嫩的鵝黃與淺藍，作為整體網站視覺主色，插圖的線條簡約、配色和諧清爽，整體畫面活潑卻不顯凌亂，生動地將全能外語的品牌特色展露無遺。
The hand-drawn illustrations with concise lines, fresh color matching. The website showed energetic but not messy. creating the perfect characteristic of Schoolhouse Language Center.
視覺從 2019 年 7 月的首頁初稿開始，內頁初稿調整了三版，同年 10 月到 12 月進入精稿，之後陸續完成 icon 與整套插圖，2020 年結案。最後的頁面以老師與孩子的手繪人物、書本、地球儀、三角旗與氣球等插圖串起各個區塊，底部用城市剪影收尾，標題則放在藍、黃色的圓形色塊裡，讓資訊分類一眼就能辨認。
全能外語網站的架構與版面安排，各自是為了什麼？§
全能外語網站的主要安排，可以對照網站企劃與 wireframe 提案寫明的需求來看：
- 首頁以圖文呈現三類最新資訊、各放最新三則，用意是讓家長了解最新內容。
- 網站企劃列出讓學生課後自主複習的需求；wireframe 提案中，線上學習依 Level1-12 分級，整理文法、字彙、發音、閱讀與對話。
- 首頁設置「每日一句」，用意是讓孩童把英文融入日常生活。
- 模組區塊化的版面用來表達重點訊息，回應同業網站觀察後簡化資訊量的方向。
- RWD 響應式網站設計與模組區塊化，用意是因應網站呈現與製作方式的流暢性，以及使用者的使用慣性。
如果您經營補習班或學校，哪些情況適合參考全能外語的網站做法？§
如果您的補習班或學校網站有以下情況，全能外語這個案例的做法可以參考：
- 如果您的網站要服務家長與學生，可以先分清各自的需求。
- 如果您想提供學生課後複習的內容，可以依學習分級整理。
可以參考的順序是：先釐清讀者與需求，再用 wireframe 排好區塊與層級，最後處理色彩與插畫。
這種先把架構定好、再進入視覺的做法，也是手心網站設計服務的基本步驟。
結案時間 – 2020.07
插畫/網站設計 – 潘東、周一潔
專案管理 – 蘇連捷、王彥筑
設計總監 – 徐志揚
#網站設計#插畫設計#平面設計#全能外語#手心設計
#hand-drawn illustration design #website design
#key vision design #graphic design #hand heart design