מבוא, טיפים, כלים וקישורים

שגיא שרייברפיקסל פרפקט מגזין

pixelperfect.co.il

מה יש שם בשבילנו שם בחוץ1

התפיסה שאיתה גדלנו היא שאנחנו האמנים המיוסרים

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

ויש כמות עבודה אין סופית בתחום העיצוב הדיגיטלי

לקוח

ויש לנו לקוחות - המון לקוחות שם בחוץ

לקוחות באים בכל מני צורות

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

אתרים

אילו סוגי אתרים יש? ומה יש מסביבם שאנו צריכים להכיר ולדעת?

נניח ולקוח בעל חנות תכשיטים מגיע אלינו

הלקוח רוצה אתר עם כמה עמודים, אתר שרק יציג את העסק שלו

אתר תדמיתי

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

כמה דוגמאות:

אתר קטלוגי

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

אתר קטלוגי

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

דוגמה של אתר קטלוגי - דף הבית

הקטלוג

דף המוצר

אתר סחר מקווןe-commerce

דוגמה של אתר קטלוגי - דף הבית

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

דוגמה

דוגמה

בפיקסל פרפקט מדי שישי אנו מפרסמים את “השראה בשישי” שבו אנו משתפים אתרים יפים שמצאנו בשבוע האחרון. מומלץ להתעדכן באתרים חדשים שיצאו.

cssdesignawards.com

השראה מאתרים

awwwards.com

csswinner.com

makebetterwebsites.com

verynicesites.com

siteinspire.com

pixelperfect.co.il/inspiration

סוגי פורמטים

סוגי פורמטיםאתר רגיל

HTML + CSS + Javascript (mostly)

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

אז איך פותחים בכלל PSD שבאים לעצב אתר? היום אנחנו מעצבים כבר לרוחב של 1140 פיקסלים, גובה כבר לא כל כך משנה, אבל רצוי לשמור את הכפתור הכי מרכזי מעל ה”פולד” כלומר

מעל הנקודה שממנה גוללים למטה.

סוגי פורמטיםאתר רגיל

PSD 1280px GRID 1140px

PSD לחצו כאן להורדת תבניתשהכנו לכם בחינם.

סוגי פורמטיםאתרי מובייל

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

סוגי פורמטיםאתרי מובייל

Jquery mobile בשם Javascript לרוב אתרים אלו נעשים על ידי שימוש בספריית

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

סוגי פורמטיםאתרים רספונסיביים

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

סוגי פורמטיםאתרים רספונסיביים

http://designmodo.com/responsive-design-examples/תוכלו למצוא דוגמאות בקישור הבא:

http://www.smashingmagazine.com

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

שמקווצים את הדפדפן - שימו לב איך התפריט הצדדי עבר למעלה.

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

מצב מובייל. במצב זה הטקסטים גם גדלים על מנת

לאפשר קריאות נוחה גם בסמארטפונים.

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

מערכות ניהול תוכן

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

שלו. בעצם אתר ששולט לו בתכני האתר שלו.

מערכות ניהול תוכן

הלקוח מקבל שם משתמש וססמה על מנת להיכנס למערכת ניהול האתר שלו

מערכות ניהול תוכן

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

מערכות פופולאריותמערכות ניהול תוכן

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

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

אתרים ובלוגים

אתרים ובלוגים

סחר מקוון

מערכות פופולאריותמערכות ניהול תוכן

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

מסביב לאתר

אז מה יש לנו עוד שלקוחות יכולים לבקש?

מסביב לאתרבאנרים

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

מסביב לאתררי-סייזינג

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

דפי נחיתהמסביב לאתר

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

CTA (Call to action)

דפי נחיתהמסביב לאתר

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

ווידג’טים

מסביב לאתרבלוג

וכמובן שיש עוד הרבה עבודות רציניות שלא עברתי עליהם כאן רק מסביב לעיצוב אתרים.

אפליקציות

מהו הפיתרון השלם? בואו נראה רגע את אחת הסיטואציות הנפוצות פה בשוק בארץ.

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

הכל מתחיל שליזם יש רעיון

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

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

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

לוגו ותדמית

שלקוח פונה אליכם הוא ירצה שתתנו לו פתרון שלם...

אפליקציה

לוגו ותדמית

אפליקציהאתר לאפליקציה

לוגו ותדמית

אפליקציהאתר לאפליקציה

אייקוניםלוגו ותדמית

אפליקציהאתר לאפליקציה

חומרים שיווקיים

אייקוניםלוגו ותדמית

אפליקציהאתר לאפליקציה

דף פייסבוק

חומרים שיווקיים

אייקוניםלוגו ותדמית

אפליקציהאתר לאפליקציה

רקע לטוויטר דף פייסבוק

חומרים שיווקיים

אייקוניםלוגו ותדמית

אפליקציהאתר לאפליקציה

רקע לטוויטר דף פייסבוק

ערוץ יוטיובחומרים שיווקיים

אייקוניםלוגו ותדמית

אפליקציהאתר לאפליקציה

רקע לטוויטר דף פייסבוק

ערוץ יוטיובחומרים שיווקיים

לוגו ותדמיתכרטיסי ביקוראייקונים

אפליקציהאתר לאפליקציה

רקע לטוויטר דף פייסבוק

ערוץ יוטיובחומרים שיווקיים

לוגו ותדמיתכרטיסי ביקוראייקונים

חולצות+ווסאח

אפליקציהאתר לאפליקציה

רקע לטוויטר דף פייסבוק

ערוץ יוטיובחומרים שיווקיים

לוגו ותדמיתכרטיסי ביקוראייקונים

חולצות+ווסאח

עוד פרינט

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

איך נדע לתת מענה בצורה מקצועית להכל?

התשובה היא פשוטה... יותר פשוטה ממה שאתם חושבים.

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

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

guidelines-ו ,template, tutorial שאתם מחפשים חומר, חפשו בצורה ספציפית עם המילים

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

p ixe lper fec t .co . i l / too ls - fo r -des igners /d ig i ta l -des ign- in t ro

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

http://www.pixelperfect.co.il/newsletter-signup/

טיפים מהנסיון האישי שלי2

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

להיות בעניינים השראה השראה השראה!

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

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

אנחנו נמצאים בתחום שאם לא נשאב בו השראה אנחנו נשאר מאחור מהר מאוד.

להיות בעניינים השראה השראה השראה!

יש שני אתרים מעולים שמומלץ להתעדכן בהם יומית: דריבל וסמאשינג מגזין.

להיות בעניינים השראה השראה השראה!

דריבל - dribbble.com - רשת חברתית למעצבים איכותיים. אפשר להיכנס שם לשאוב השראה מדברים לפני שפותחים את הפוטושופ.

להיות בעניינים השראה השראה השראה!

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

http://www.dribbble.com

http://www.smashingmagazine.com/

http://www.noupe.com

http://webdesignledger.com

http://sixrevisions.com

http://webdesignerwall.com/

http://www.land-of-web.com

http://www.onextrapixel.com

http://designinstruct.com

http://line25.com/

http://www.blog.spoongraphics.co.uk/

http://the99percent.com/

http://www.developerdrive.com/

http://www.netmagazine.com/

http://designmodo.com/

http://speckyboy.com/

http://mashable.com/

http://www.webdesignerdepot.com/

http://designshack.net/

http://www.uxbooth.com/

http://thinkvitamin.com/

http://www.alistapart.com/

http://johnnyholland.org/

http://css-tricks.com/

http://dailyinspiration.nl/

http://inspirationfeed.com/

http://fribbble.com/

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

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

צברו נסיוןהתחילו לעבוד בתחום

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

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

דבר שלא מובן מאליו.

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

פתוחות בפניכם.

אז לפני הלקוח הראשון ובמיוחד בהתחלה, איך אפשר לצבור נסיון ותיק עבודות?

צברו נסיוןהתחילו לעבוד בתחום

v

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

צברו נסיוןהתחילו לעבוד בתחום

v

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

צברו נסיוןהתחילו לעבוד בתחום

v

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

הדברים הטכניים הם יותר מחצי הדרךהכינו את הקרקע לעבודה

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

הדברים הטכניים הם יותר מחצי הדרךהכינו את הקרקע לעבודה

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

הדברים הטכניים הם יותר מחצי הדרךהכינו את הקרקע לעבודה

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

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

הדברים הטכניים הם יותר מחצי הדרךהכינו את הקרקע לעבודה

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

הדברים הטכניים הם יותר מחצי הדרךהכינו את הקרקע לעבודה

http://www.pixelperfect.co.il/tools-for-designers/price-quote/

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

עם חברים, משפחה, מכריםדברו על זה

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

עם חברים, משפחה, מכריםדברו על זה

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

הזמנה לבת מצווה. כל עבודה מהווה קפיצת מדרגה לעבודה יותר גדולה.

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

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

והאנשים שהם סיפרו להם עליכם יעבירו הלאה את השם אפילו אם הם לא היו לקוחות שלכם.

ומתישהו יפנו אליכם חלק מהאנשים ותתחילו לקבל לקוחות.

הם יזכרו לאט לאט אבל זה יגיע, כי התחלתם גל.

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

ומאחל לכם שתגיעו למצב האופטימלי.

לכל חברה אפשריתשלחו קורות חיים

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

כל מייל בנפרד ובאופן אישי.

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

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

יש גם חיים לחיותהלימודים/עבודה זה לא הכל

תזכרו - הלימודים/עבודה זה לא הכל!!!יש חיים מעבר, וחשוב ממש לזכור את זה. תמצאו זמן לבלות עם חבר/ה ועם משפחה

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

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

להתנסות בהכל ולהרחיב אופקיםלהתפרע!

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

שתוכלו למלא אותה בכל טוב במהלך הלימודים.

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

תנסו דברים חדשים תופתעו מכמה תצליחו.

ביטול האגו ועזרה הדדיתNo Ego

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

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

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

המשך קריאה

5 טיפים כדי לפרוץ לשוק העיצובhttp://www.pixelperfect.co.il/posts/5-tips-to-start-working-as-a-designer/

5 טיפים שיעזרו לכם להעביר את התואר בעיצוב בכיף ובהצלחה

http://www.pixelperfect.co.il/posts/5-tips-for-design-students/

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

http://www.pixelperfect.co.il/posts/portfolios-websites-and-networks-for-designers/

תודה רבה

שגיא שרייברפיקסל פרפקט מגזין

sagi@pixelperfect.co.il pixelperfect.co.il sagi-design.co.il