עיצוב ותיכנות - 2 דברים סותרים?

[רימונה]

כמעצבת גרפית שמתעסקת הרבה גם בעיצוב אתרים (גם אתרים מורכבים מאד) בצורה מקצועית
שאלתי האם נכון להשקיע בלימודי בניית אתרים - בחלק התיכנותי
האם כמעצבת תהיה לי סבלנות לשבת לכתוב את כל שורות התכנות - או ש-2 התחומים לא עובדים ביחד

אודה מאד על הייעוץ!

 

[נוכחות לעסקים]

כבר היה כאן דיון על זה

פוסט שקראתי היום בנושא

למה מעצבים צריכים לדעת לכתוב קוד ואיך זה קשור לקידום בגוגל

פליקס וסרשטיין

כעיקרון החלוקה היא מאוד ברורה מה התפקיד של מעצב ומה התפקיד של מתכנת.
בשורה אחת,
המעצב אחראי למראה ולתנועה באתר ואז פיתוח ובניית האתר עוברת למתכנת.
אבל הגבולות האלו מפסיקים להיות רלוונטיים.

בכתבה הזו אני רוצה לחלוק אתכם כמה סיבות למה מעצבים צריכים ללמוד לכתוב קוד וגם לדעת דברים חשובים על קידום במנועי חיפוש.
כשפיתוח ובניית אתר מתייחס מבחינתי ל- html, css, והקוד php של בניית אתר בוורדפרס או ג’ומלה וכדומה.
שפות אלה מאוד פשוטות ללימוד ומשפיעות מאוד על העיצוב. לדעת אותן לא נופל בחשיבות, מלצייר סקיצה על נייר או ליצור אפיון בפאוור-פוינט.

עבדתי תמיד עם קבוצות קטנות שבהן להיות גמיש ומוכן ללמוד נתפס כנכס,
ככל שידעתי יותר, יכולתי לעבוד על פרוייקט מתחילתו ועד סופו ולחסוך את הזמן והאנרגיה של העברת הפרוייקט למישהו אחר, להסביר, לשמור עותק, לחכות שהקובץ יחזור מהתכנות, לבדוק אחר כך שלא מחקו משהו שעשיתי ועוד..
כמובן שבאתרים גדולים/מסובכים, לפעמים אין ברירה אלא לעבוד בצוות ולהעביר דברים אחד לשני. אבל רוב רובם של האתרים הם קטנים עד ממוצעים, בטווח של 10-70 עמודים. עם שוני ויכולות טכנולוגיים לא גדולים בין העמודים.

לדעת לכתוב קוד, משחרר ופותח הרבה הבנות ואפשרויות בעיצוב.

הכנת עיצובים מציאותית וברי ביצוע

להיות מעצב אינטרנט בלי לדעת לכתוב קוד, זה כמו להיות צייר ולא להכיר צבעים או להיות טבח שלא מכיר פירות וירקות.
עם תמונה ברורה של איך המוצר הסופי יראה וירגיש, העיצובים יהיו מעשיים.
גם אם בסוף חלק מהתכנות אני לא עושה בעצמי, הידיעה כי אפשר לעשות את זה (ואיך לעשות את זה) נותנת לי הרבה אפשרויות חדשות.

העיצוב הוא חלק בלתי נפרד מתהליך הפיתוח, העיצובים מתורגמים למדיום של אינטרנט שלוקח בחשבון: שימושיות, נגישות, הכנה לקידום במנועי חיפוש, בנייה הררכית של האתר, ידידותיות למשתמש, הכנה לשינויים בעתיד, ניווט ברור באתר ועוד…
הדרך האמיתית, היחידה לדעת, אם בניית אתר האינטרנט, עובדת או לא. הוא לבנות אותו בעצמך. ותוך כדי לשנות ולעדכן, כדי להתאים לרצונות שלך כמעצב.

מעצב/מתכנת אינטרנט צריך להתאמן ולשכלל את היכולות שלו, ללמוד טכניקות חדשות כדי שהעיצובים יהיו יותר מאשר רק תמונות יפות על עמוד.

הפתגם המוכר, בדרך כלל נכון – אם אתה רוצה שמשהו ייעשה כמו שצריך, אתה צריך לעשות את זה בעצמך.

תשומת לב לפרטים

העיצובים שלך יבוצעו בדיוק כפי שאתה רוצה אותם, במדוייק.
אתה לא תלוי ברצונות של המתכנת, להזיז פיקסל ממקום למקום. כי את מה שאתה רואה כמעצב, המתכנת נוטה לא לראות ובטח לא להבין למה חשוב שהאפור יהיה אפור בהיר ולא אפור כהה. זו לא אשמתו של המתכנת אלה פשוט שתי גישות שונות.

אומרים שאלוהים נמצא בפרטים הקטנים, בניואנסים הקטנים, מתכנת עלול לא לראות את מה שאתה רואה ואת מה שחשוב לך.

לפעמים תוך כדי בנייה, אתה כמפתח/מעצב מבין שצריך להתגמש בגלל אילוצים טכניים של המערכת בלי לשנות את המהות של העיצוב. שינויים אלה יכולים להתממש רק על ידי המעצב המקורי. שמכיר את המגבלות של הקוד או של המערכת ויכול להחליט מיד על מהות השינוי ולבצע אותו במיידי.
תוצאות יותר הרמוניות

הכל נעשה תחת מטרייה אחת בניצוחו של המפתח/מעצב, הוא יודע שאם רוצים שהאתר יטען מהר, אז צריך לוותר על כמה אלמנטים גרפיים מכבידים. כי אז המשתמש זוכה באתר מהיר וגוגל מוסיף גם כמה נקודות על המהירות.
אתה מכין את התמונות לאינטרנט ואתה יודע כמעצב את הגבול הדק, בין משקל לאיכות.
סקיצה עם טקסט בפוטושופ לא נראית אותו דבר כטקסט חי באינטרנט. לכן בקוד אתה יכול לכוון בדיוק את המרווחים בין האותיות ובין השורות ואת כל גדלי הפונטים וכדומה..
השינויים וכיוונונים האלו יכולים לעשות את ההבדל בין אתר טוב לאתר מצויין.

גם כאשר חלק מהתכנות אני לא עושה בעצמי, הידיעה כי אפשר לעשות את זה (ואיך לעשות את זה) נותנת לי הרבה אפשרויות חדשות.

קיצור זמן הפיתוח

כשמפתח/מעצב מכין את האתר, התוצאה היא, זמן פיתוח קצר יותר – ולמי לא אכפת היעילות?
זה חוסך זמן, כדי להיות מסוגל לתכנן לעצב וישר לקפוץ לחיתוך ובניית האתר.
מעצבים שכותבים קוד שווים יותר

לדעת לכתוב קוד, פותח עולם חדש של אפשרויות. ונותן ערך נוסף ללקוח, אתה נותן לו פתרונות ואפשרויות שמעצב בלבד אולי לא ידע שקיימים.
מה גם ששינוי עיצוב עתידי בהתבסס על קוד שתוכנן היטב, הרבה יותר פשוט ונוח. לא צריך להמציא את הגלגל אלא להשתמש בו לצרכיך.
זה כבר לא מספיק להיות עם מיומנות אחת בלבד. כדי לתת ללקוח פתרון כולל, צריך להכיר היטב את המדיה שעובדים בה.
ואז מגיע קידום בגוגל

קידום אתר מתייחס לכל העקרונות של קידום אתר במנועי חיפוש. וליישם אותם לפני ובזמן הבנייה של האתר, כדי שגוגל יאהב את האתר שבניתם. האתרים נבנים כדי שהגולשים יגיעו אליהם. אתר שלא נבנה נכון ולא השתמשו בכל העקרונות של קידום אתר, לא יקודם לעמודים הראשונים,

מעצב מתמצא בקוד יידע לתת שמות טובים לקבצי התמונות, alt לתמונות, title ללינקים, ידע לסדר נכון את H1-H6, לכתוב קוד תקני, ועוד.
כל אלה יוצרים תוצאות מצויינות בתוצאות מנוע החיפוש ויקדמו את האתר.



לסיכום

כדי לתת תוצאות טובות יותר ללקוח המשלם, נדרש מהמעצב לקודד את הקוד בעצמו, דבר שיחסוך זמן, כסף, יצור תשומת לב לפרטים, האתר יהיה מתוכנן טוב יותר לשינויים בעתיד והדבר היותר חשוב, האתר יהיה בנוי טוב יותר למנועי חיפוש.

 

[Shia]

הנושא אכן עלה כאן כבר כמה פעמים.
אמנם לא כולם מסכימים שמעצבים צריכים להיות מעורבים בקוד, אבל זו גישה מאוד מקובלת היום.
בהחלט יש לצפות ממעצב ווב שיהיה מסוגל ליישם את העיצובים שלו בעזרת כלי ההפקה של האינטרנט: htm css

אני אישית ממליץ מאוד לכל מעצב אתרים ללמוד html וcss ברמה שמאפשרת לו לבנות דפי אינטרנט חיים ונושמים בעשר אצבעותיו.

 

[wmw]

כשמעצב משתמש ב CSS רספונסיבי, בפילטרים מתוזמנים, וכד'
האם זה עיצוב או תיכנות?
הגבול שבין HTML+CSS, לבין JAVASCRIPT, שהיווה את קו החלוקה שבין עיצוב לתיכנות [בצד לקוח כמובן] כבר היטשטש מזמן עם בואו של HTML 5
מלבד אפשרויות ה CSS שהתרחבו והדמיון לקוד, אובייקטי HTML חדשים [כמו CANVAS למשל] המטופלים באמצעות JS, "מכריחות" את המעצב להתמצא בתחום, לפחות מלמעלה.

 

[israel]

מבלי להתייחס לאמור (מצטער, לא היה לי כוח לקרוא הכל )

יש להבדיל את המונח "תכנות" משפות תג כמו CSS וHTML.

לדעתי ואני חושב שרוב המכנתים יסכימו איתי; מעצב שמבצע במקביל גם את שפות צד הלקוח כמו HTML-CSS ואפילו JS&JQ מבצע אותם טוב יותר ממתכנת- במישור העיצובי לפחות.
כשאני שוכר "מתכנת" עבור שפות צד לקוח, חשוב לי מאוד שהוא יהיה מעצב.
הקאטצ' כאן הוא שלעיתים המעצב מפחית אלמנטים עיצוביים שהוא צופה קושי בקידודם או אפילו בונה את העיצוב מלכתחילה כקל לקידוד. זה כמובן גם תלוי בכמה אותו "מעצב" אוהב את העבודה שלו

 

[יריב]

תכנות בזמננו הוא לא תלוי שפה או תחכום
גם HTML זה תכנות, גם ההחלטה שהגולש יבחר ללחוץ על הכפתור הנכון היא תכנות
לא רק PHP.
נכון, המונח פונקציה או פרוצדורה זרה למי ששולט בפוטושופ או בעלת משמעות אחרת אבל התכנות של פעולת אצווה בפוטושופ גם נכללת בהגדרת תכנות בזמן החדש.
בוודאי ששליטה בפלש מראה על הבנה תכנותית ויכולת.

 

[Shia]

יש הבדל ברור למדי בין תכנות לקידוד.

HTML היא שפת מרקאפ - היא מיועדת לארוז את רכיבי הדף בתוך מבנה סמנטי כלשהו.
רכיבי העמוד מוגדרים באמצעות סימונם בתגים.

CSS היא שפה דקלרטיבית. בעזרתה מגדירים מאפיינים של סגנון לפי קלאסים.
מצהירים שקלאס מסויים הוא ירוק.

שתי השפות נוגעות ברובד החזותי הקידמי של האתר - הפרונט. שם ידו של המעצב צריכה לשלוט.

javascript (או בדמות jQuery) נותנת מקום להתרחשויות דינמיות יותר. אמנם היא פועלת על צד הלקוח, אבל כבר אפשר לתכנת אירועים, ליצור אינטראקציה עם משתנים דינמיים... זה כבר תיכנות.

PHP היא כמובן כבר שפת צד שרת, עובדת מול מסדי נתונים, מתנהלת לרוב בלי מגע עם הפרונט. כאן לא נדרש למעשה ממעצב לשלוט, אם כי בעידן של היום, יש הרבה מעצבי וורדפרס ששולטים יפה בPHP מקומי של וורדפרס (בסיוע הקודקס המעולה שלהם)

 

[chani-studi]

כמעצבת גרפית שמתעסקת הרבה גם בעיצוב אתרים (גם אתרים מורכבים מאד) בצורה מקצועית
אודה מאד על הייעוץ!

מומלץ ללמוד קורס בסיסי בבנית אתרים (ולא תכנות)
על מנת להבין איך זה עובד.

רצוי מאוד ללמוד html5 ו-css3
מכיון שיש בהם הרבה אלמנטים עיצוביים.
היום פחות ופחות משתמשים בתוכנה גרפית על מנת ליצור
פינות עגולות, גרנדנטים, שקיפויות, אנימציות וכו'.
(ובפרט בעיצוב אתרים בסמארטפון)


שיהיה בהצלחה,
ותעדכני אותנו