בניית אתרים מושגים כל מעצבי אינטרנט צריכים להבין

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

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

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

התנהגות קוד קדמי

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

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

אני מאמין שכל מעצב צריך לפחות להבין את זה שלוש שפות בסיסיות של פיתוח Frontend (HTML, CSS ו- JS) יחד עם אופן השימוש בהם. לדוגמה, רוב התפריטים הנפתחים מסתמכים על JavaScript אבל יש גם חלופות CSS בלבד.

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

זה אפשרי מבלי ללמוד לכתוב שורה אחת של קוד.

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

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

טכניקות תגובה

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

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

כדי לראות איך breakpoints לעבוד על אתרים אמיתיים לבדוק את האתר שאילתות מדיה.

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

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

תחשוב מודולרי עם עיצובים

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

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

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

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

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

להבין Retina תמונות & SVG

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

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

רוב המעצבים כבר יודעים לתמוך @ 2x תמונות, אבל החדש יותר iPhone 6 + התקנים יש @ 3x החלטות. עם זאת כמה פרויקטים לא טורחים עם גודל תמונה 3xx, אז לדבר עם מנהיג הפרויקט שלך לפני השלמת כל הנכסים.

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

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

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

להבין נגישות

שיפור פרוגרסיבי ו השפלה חיננית הן שתי דרכים שונות לטיפול באותה בעיה: נגישות. לא כל המשתמשים יהיו במכשירים או בדפדפנים שבהם תומכים 100% מהתכונות הדינמיות של האתר.

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

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

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

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

בסגירה

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

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

אם אתה מחפש תוכן קשור יותר יש להסתכל על הודעות אלה:

• כיצד לתקשר ביעילות עם מפתחים (smashingmagazine.com)
• עזרה מעצבים ומפתחים למד להבין אחד את השני (uie.com)
• הלמידה קוד נותן לך יתרונות כמו מעצב UX (jessicaivins.net)