אַשׁרַאי:
זה לא סוד שעיצוב אתרים הוא תעשייה שצומחת במהירות. כמעט כל סוג של עסק זקוק לאתר אינטרנט איכותי. יש הזדמנויות ברמת הסוכנות הגדולה עד לפרילנסרים המפתחים אתרים לעסקים קטנים מהבית.
אז איך פורצים לתחום המרגש הזה? עם ניסיון מועט או ללא ניסיון ביצירת אתרים, לעדכן את עצמך במהירות יכולה להיות משימה לא פשוטה. יש כל כך הרבה אפיקים שונים של עיצוב ופיתוח לחקור. באיזו דרך כדאי ללכת קודם? אילו סטים הכי מתאימים לך?
אנו שואפים לתת לך סקירה כללית של כמה דברים שחיוניים לידע מעמיק בעיצוב אתרים. אלו נקודות התחלה, אם תרצו. מתחת לכל פריט, רשמנו משאבים נוספים שתוכל להמשיך בתהליך הלמידה שלך.
לפני שניכנס לזה, שימו לב ללקח חשוב אחד: אתה לא יכול להפוך למעצב אתרים מקצועי בן לילה. לוקח שנים להגיע לרמת מומחה בכל היבט של התחום. אבל כולם מתחילים איפשהו, ואין זמן טוב יותר מההווה להתחיל את לימודי עיצוב האתרים שלך.
HTML ו-CSS
אלו הם אבני הבניין של כל דף אינטרנט שאתה רואה. כן, HTML ו-CSS הם שני דברים שונים, אבל הם תלויים לחלוטין אחד בשני. אתה לא יכול ללמוד CSS בלי להבין HTML. אתה לא יכול לבנות אתר HTML בלי להשתמש ב-CSS. תן לי להסביר:
HTMLהוא קיצור של "שפת סימון HyperText". הוא מהווה את אבני הבניין של דף אינטרנט. השפה מורכבת מ"תגים", שמגדירים אלמנטים שונים בדף. לדוגמה, פסקה של טקסט עטופה בתג פסקה, כך:
ללקוח יש חשיבות רבה, הלקוח יעקוב אחריו. יחי הכדורגל.
CSSהוא קיצור של "Cascading Style Sheets". CSS משמש להוספת סגנון ועיצוב לרכיבי הדף שלך. אם HTML הוא המסגרת של הבית שלך (הבסיס, הקורות, הלבנים), אז CSS הוא המצגת (הצבע, הריהוט, התפאורה). הרעיון של כתיבת CSS הוא להוסיף הגדרה לתג HTML, כך:
p {
צבע: #0000ff;
גודל גופן: 12px;
margin-bottom: 18px;
}
קוד ה-CSS שלמעלה מגדיר את כל הפסקאות כצבע טקסט כחול (מיוצג על ידי קוד הצבע, #0000ff), בעלות גודל גופן של 12 פיקסלים, ובעלות שוליים מתחת לכל פסקה של 18 פיקסלים.
משאבים נוספים:
W3Schools- משאב עזר ולמידה מצוין עבור HTML ו-CSS.
W3C Validator- כלי לבדיקת HTML ו-CSS שלך כדי לוודא שהם עומדים בסטנדרטים המקצועיים של תכנות - הידוע גם בשם "קוד חוקי".
רשימה לחוד- אתר פנטסטי על כל מה שקשור לעיצוב אתרים, עם התמקדות בתקני אינטרנט.
נטו טוטס- משאב מצוין להדרכות לפיתוח אתרים.
עיצוב עם תקני אינטרנט- אחד מספרי החובה על עיצוב אתרים, שנכתב על ידי "הסנדק" של תקני האינטרנט, ג'פרי זלדמן.
CSS Zen Garden- גם כיף וגם מדהים בו זמנית. ראה אילו סוגי אפשרויות עיצוב אפשריות רק באמצעות CSS.
פוטושופ וזיקוקים
אַשׁרַאי:
בין אם אתה מעצב, קודן או שניהם, ללא ספק תעבוד בכבדות עם אחת מהתוכניות הגרפיות הללו.אדובי פוטושופהיה אלוף זמן רב בעיצוב אתרים, עריכת תמונות ועיצוב דפוס.
Adobe Fireworksהוא חלופה פופולרית לפוטושופ. Fireworks נועד לשמש במיוחד לעיצוב אתרים, בעוד שפוטושופ הוא יותר עניין מכל הסוגים.
בין אם אתה מתכוון לעצב אתרים מאפס, או שתופקד עליך לתכנת אתר שתוכנן על ידי מישהו אחר, אתה צריך לדעת את דרכך בתוכנות אלה. תצטרך להבין את המושגים שלשכבות,בחירות, ושמירת תמונות עבור האינטרנט.
משאבים נוספים:
10 הדרכות פוטושופ פנטסטיות ביוטיוב
PSD Tuts- בלוג פנטסטי עם כל מיני הדרכות מגניבות לפוטושופ.
איך לעצב אתר עסקי נקי עם פוטושופ
המרת PSD/HTML: קוד עיצוב אתר עסקי נקי
עיצוב לאינטרנט
אַשׁרַאי:
עבור אנשים רבים, הדבר הראשון שעולה בראשכם כשאתם חושבים על עיצוב אתרים הוא תכנות. אבל מה עם עיצוב? עיצוב אפקטיבי לאינטרנט הוא ללא ספק ההיבט החשוב ביותר של מלאכה זו, אך לעתים קרובות מתעלמים ממנו על ידי מתחילים.
גם אם ההתמקדות שלך היא להפוך למתכנת, עדיין חשוב שיהיה לך רקע בסיסי בעקרונות עיצוב מכיוון שזה יעזור לך להתייחס ולשתף פעולה עם מעצבים בצורה יעילה יותר. הנה כמה נושאים שכדאי מאוד לקרוא עליהם:
עיצוב רשת- תהליך יישור רכיבי העמוד לרשת ברווח שווה (בלתי נראה), מה שיוצר עיצוב אסתטי.
TheGridSystem.org- רשימה מצוינת של משאבים.
מערכת רשת 960- כלי עיצוב ופיתוח לעיצוב לרשת של 960 פיקסלים.
טיפוגרפיית אינטרנט- אומנות סידור הכתב, הגופנים, מרווחי השורות וכל דבר אחר שקשור להצגת תוכן הכתב. באינטרנט, ישנם גורמים רבים המשפיעים על כך, כגון רזולוציות מסך שונות וטכנולוגיות הגשת גופנים מעוצבים.
6 דרכים לשפר את טיפוגרפיית האינטרנט שלך
TypeKit- שירות פונטים בתשלום להגשת פונטים מעוצבים בדפי אינטרנט.
שְׁמִישׁוּת- זהו תהליך עיצוב חווית משתמש המקדמת אינטראקציה ומקלה על המשתמש דרך הניווט באתר וזרימות הפעולה. זה קשור גם לארכיטקטורת מידע (IA), ועיצוב חווית משתמש (UX). הנה כמה משאבים קשורים:
השראה לעיצוב- כל מעצב צריך השראה. ישנם טונות של אתרים המוקדשים לרשימת עיצובי אתרים מצטיינים שתוכלו לעיין בהם ולנסח רעיונות חדשים ומעניינים. הנה כמה מהמועדפים שלנו:
מערכת ניהול תוכן
אַשׁרַאי:
לאחר שתהיה לך הבנה מוצקה של העקרונות הבסיסיים של עיצוב אתרים, בסופו של דבר תעבוד על פרויקטים הדורשים "מערכת ניהול תוכן" (CMS). מערכות אלו מספקות את היכולת לנהל את תוכן האתר באמצעות ממשק ידידותי, במקום עריכת קוד. זה נהדר להקמת אתרים עבור לקוחות שרוצים להפעיל את זה בעצמם.
יש הרבה סוגים של מערכות ניהול תוכן לבחירה. חלקם משמשים בצורה הטובה ביותר לאתרים מסוג בלוג או תיק עבודות, בעוד שאחרים מיועדים לספק פונקציונליות של מסחר אלקטרוני. חלקם חופשיים לשימוש, אחרים הם מוצרים מסחריים, בעוד שלאחרים יש אפשרויות חינמיות וגם בתשלום. מערכות CMS רבות הן פתרונות המתארחים בעצמך, כלומר אתה מתקין את התוכנה על השרת שלך. אחרים הם פתרונות מתארחים, כלומר אתה משלם כדי לאחסן ולנהל את התוכן שלך בשרת שלהם.
עדיף להתמקד רק בכמה בהתחלה, ולחקור אפשרויות נוספות ככל שתהיה מנוסה יותר. הנה כמה שאנחנו ממליצים לבדוק:
וורדפרס- היא נודעה באופן מסורתי כפלטפורמת בלוגים, אך התפתחה באופן משמעותי ל-CMS חזק יותר. בדוק את משאבי וורדפרס אלה ב-Mashable:
וורדפרס 3.0: 5 התכונות החדשות והחשובות ביותר
10 דרכים לצבוט את נושא הוורדפרס שלך
כיצד: אבטח את בלוג הוורדפרס שלך
דרופל- אלטרנטיבה פופולרית מאוד לוורדפרס. נהדר עבור אתר הדורש סוגי תוכן מותאמים אישית רבים.
Expression Engine- CMS פופולרי נוסף. בניגוד לוורדפרס ודרופל, ExpressionEngine אינו פרויקט בקוד פתוח (צריך לשלם כדי להשתמש בו).
מג'נטו- זוהי מערכת מסחר אלקטרוני, כלומר היא מספקת את היכולת לנהל מוצרים, לקיים תהליך תשלום ותכונות נפוצות אחרות שתמצא באתר קניות.
Shopify- עוד מערכת E-Commerce פופולרית. זה הוא פתרון מתארח, מה שאומר שאתה משלם כדי לאחסן את כל המוצרים וקבצי האתר שלך בשרתים של Shopify.
רשימה זו היא רק קצה הקרחון. יש הרבה מערכות שכדאי לשקול. אני ממליץ למצוא אחד שמסביבו יש קהילה חזקה כמו שצריך לפנות אליו לתמיכה, תוספים והרחבות אחרות.
מילה אחרונה של עצה
אַשׁרַאי:
רשת ולעולם אל תפסיק ללמוד. עקוב אחר כל מי שעוסק בעיצוב אתריםלְצַפְצֵף. הירשם לכמה שיותר עדכוני RSS רלוונטיים שלבלוגים לעיצוב אתרים. נסה וללמוד דבר חדש כל יום. עם הזמן, כל החלקים יתחילו להתאחד ולפני שאתה יודע את זה, אתה כבר בדרך!
אשאיר לך רשימה של כלים שמצאתי שימושיים ביותר בעבודה היומיומית שלי כמקצוען בעיצוב אתרים. אני ממליץ לך בחום לבדוק את אלה:
מַבעִיר- תוסף חובה ל-Firefox, המאפשר לך לבדוק את ה-HTML וה-CSS של כל דף אינטרנט. אתה יכול לצבוט קוד תוך כדי תנועה ולאתר באופן מיידי אזורים בקוד שלך שזקוקים לעריכה. מעולה לפתרון בעיות תצוגה.
FileZilla- לקוח FTP בחינם עבור Mac ו-PC.
פאניק קודה - זהו עורך הקוד המועדף עלי. זה רק עבור Mac. אני מאוד ממליץ על זה.
אוהבי צבע- אתר לגלישה ובחירת ערכות צבעים.
למדוד את זה- הרחבה נוספת של FireFox. זה עוזר לך למדוד פיקסלים בכל דף אינטרנט. שימושי מאוד בעת שכלול ממדי פריסת הדף שלך.
גוגל אנליטיקס- זהו הכלי למעקב אחר תעבורת האתר שלך.
שפתיים- אתר זה יוצר טקסט "Lorem Ipsum", או טקסט מציין מיקום ללעג אתרים לפני החלפת עותק בפועל.
Comp Fight- כלי חיפוש תמונות Flickr. נהדר עבור מציאת תמונות במהירות לשימוש בדוגמיות עיצוב אתרים שלך.
VMWare Fusion- יישום מק המאפשר לך להפעיל התקנה של Windows על ה-Mac שלך. זה מועיל בעת בדיקת אתרים בכל הדפדפנים (משהו שאתה תמיד צריך לעשות!).
משאבי פיתוח ועיצוב נוספים מ-Mashable:
-10 המשאבים המובילים להשראה עיצובית
-כיצד ליצור אנימציה של Pixel Fireworks באמצעות JavaScript
-כיצד: לפתח אפליקציות לאייפון עם כוח עמידה
