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



    ‫‪pixelperfect.co.il‬‬
‫1‬
‫מה יש שם בשבילנו שם בחוץ‬
‫התפיסה שאיתה גדלנו היא שאנחנו האמנים המיוסרים‬
‫אבל זה ממש לא נכון - בעולם הדיגיטלי אנחנו סופר מגניבים‬
‫ויש כמות עבודה אין סופית בתחום העיצוב הדיגיטלי‬
‫לקוח‬




‫ויש לנו לקוחות - המון לקוחות שם בחוץ‬
‫לקוחות באים בכל מני צורות‬
‫וכאשר הם מגיעים אלינו אנחנו צריכים לדעת לתת להם תשובות‬
‫אתרים‬
‫אילו סוגי אתרים יש? ומה יש מסביבם שאנו צריכים להכיר ולדעת?‬
‫נניח ולקוח בעל חנות תכשיטים מגיע אלינו‬
‫הלקוח רוצה אתר עם כמה עמודים, אתר שרק יציג את העסק שלו‬
‫אתר תדמיתי‬

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

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

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




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

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

           cssdesignawards.com

           awwwards.com

           verynicesites.com

           siteinspire.com

           csswinner.com

           makebetterwebsites.com

           pixelperfect.co.il/inspiration


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


                                   ‫)‪HTML + CSS + Javascript (mostly‬‬




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



                                          ‫‪1024x768px‬‬         ‫‪960x700px‬‬




‫עד ממש לא מזמן ב-2102 כל האתרים הותאמו לרזולוציה של 4201 פיקסלים לרוחב על 867‬
 ‫פיקסלים גובה. שעיצבנו עבור רזולוציה זו לקחנו טווח בטיחות מהשוליים אז בעצם עיצבנו‬
            ‫ברזולוציה של 069 פיקסלים רוחב על 007-006 פיקסלים לגובה.‬
‫סוגי פורמטים‬
                               ‫אתר רגיל‬



                                          ‫‪1024x768px‬‬        ‫‪960x700px‬‬

                                          ‫‪1280x768px‬‬        ‫‪1140x700px‬‬




 ‫היום כבר הרזולוציה גדלה. אנשים משתמשים כבר במסכים רחבים יותר. לכן הנורמה לעיצוב‬
‫אתר השתנתה לגודל של 867‪ .1280x‬ואם מתחשבים בטווח הבטיחות אז נעצב ל-007‪.1140x‬‬
‫סוגי פורמטים‬
                   ‫אתר רגיל‬



                             1024x768px        960x700px

                             1280x768px        1140x700px




               .‫אתם מוזמנים להוריד טמפלט לעיצוב אתרים בפיקסל פרפקט‬
pixelperfect.co.il/freebies/free-hebrew-web-design-template
‫סוגי פורמטים‬
                            ‫אתרי מובייל‬




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




‫לרוב אתרים אלו נעשים על ידי שימוש בספריית ‪ Javascript‬בשם ‪Jquery mobile‬‬
‫הנה דוגמה לאתרים מותאמים למובייל‬
‫סוגי פורמטים‬
                     ‫אתרים רספונסיביים‬




‫אתרים רספונסיביים. זה מה שהולך היום! נכון ל-2102 זהו הסוג החם והחדש של האתרים.‬
‫סוגי פורמטים‬
                    ‫אתרים רספונסיביים‬




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




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




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




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




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




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




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




                                ‫סחר מקוון‬



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




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




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




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




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




                                                            ‫)‪CTA (Call to action‬‬


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

                                          ‫ווידג’טים‬




‫וכמובן שיש עוד הרבה עבודות רציניות שלא עברתי עליהם כאן רק מסביב לעיצוב אתרים.‬
‫קומפלט‬
‫מהו הפיתרון השלם? בואו נראה רגע את אחת הסיטואציות הנפוצות פה בשוק בארץ.‬
‫ישראל ידוע בעולם כ-‪ .Startup nation‬יש לנו המון סטארטאפים כאן בארץ. והמודעות לעיצוב‬
                    ‫טוב היא גבוהה מאוד בקרב סטארטאפים בארץ.‬
‫הכל מתחיל שליזם יש רעיון‬
‫היזם הולך, מגייס את הכסף לפיתוח הרעיון שלו, ממשקיעים פרטיים-אנג’לים - או מקרנות‬
              ‫הון סיכון, ועכשיו הוא פונה אליכם לעיצוב הסטארטאפ שלו.‬
‫יש הרבה פלטפורמות שהוא יכול לרצות לפתח את האפליקציה שלו בהן, ויש הרבה‬
 ‫פלטפורמות לבחור מהן. יש לנו סמארטפונים, טאבלטים, אפליקציות ווב, ועוד.‬
‫כמובן שיש גם לכל פלטפורמה כזאת כמה הפעלה. יש לנו אנדרויד, אייפון ‪ ,iOS‬ווב, ווינדוס 8,‬
                       ‫אפליקציות פייסבוק שיש להן חוקים משלהן, ועוד.‬
‫לוגו ותדמית‬




       ‫שלקוח פונה אליכם הוא ירצה שתתנו לו פתרון שלם...‬
‫לוגו ותדמית‬



‫אפליקציה‬
‫לוגו ותדמית‬


              ‫אתר לאפליקציה‬
‫אפליקציה‬
‫לוגו ותדמית‬
                ‫אייקונים‬

              ‫אתר לאפליקציה‬
‫אפליקציה‬
‫לוגו ותדמית‬
                   ‫אייקונים‬

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

              ‫חומרים שיווקיים‬
‫דף פייסבוק‬
‫לוגו ותדמית‬
                   ‫אייקונים‬

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

              ‫חומרים שיווקיים‬
‫רקע לטוויטר‬
                       ‫דף פייסבוק‬
‫לוגו ותדמית‬
                        ‫אייקונים‬

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

                   ‫חומרים שיווקיים‬
‫רקע לטוויטר‬
                       ‫דף פייסבוק‬
‫לוגו ותדמית‬
                        ‫אייקונים‬

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

                   ‫חומרים שיווקיים‬
     ‫ערוץ יוטיוב‬
‫רקע לטוויטר‬
                         ‫דף פייסבוק‬
  ‫לוגו ותדמית‬
                          ‫אייקונים‬
‫כרטיסי ביקור‬
                      ‫אתר לאפליקציה‬
 ‫אפליקציה‬

                     ‫חומרים שיווקיים‬
       ‫ערוץ יוטיוב‬
‫רקע לטוויטר‬
                         ‫דף פייסבוק‬
  ‫לוגו ותדמית‬
                          ‫אייקונים‬
‫כרטיסי ביקור‬
                      ‫אתר לאפליקציה‬
  ‫אפליקציה‬

‫חולצות+ווסאח‬         ‫חומרים שיווקיים‬
       ‫ערוץ יוטיוב‬
‫רקע לטוויטר‬
                         ‫דף פייסבוק‬
  ‫לוגו ותדמית‬
                          ‫אייקונים‬
‫כרטיסי ביקור‬
                      ‫אתר לאפליקציה‬
  ‫אפליקציה‬

‫חולצות+ווסאח‬         ‫חומרים שיווקיים‬
       ‫ערוץ יוטיוב‬   ‫עוד פרינט‬
‫לכל פלטפורמה יש את החוקים שלה מבחינת הנחיות לעיצוב. כל מערכת הפעלה היא עולם‬
     ‫חדש מבחינת סוגי רזולוציות, נורמות עיצוביות, קווי בסיס, טיפוגרפיה וטרנדים.‬
                     ‫איך נדע לתת מענה בצורה מקצועית להכל?‬
‫התשובה היא פשוטה... יותר פשוטה ממה שאתם חושבים.‬
‫גוגל! בגוגל יש הכל. אם לקוח פנה אליכם לעצב אפליקציה על פלטפורמה שעוד לא למדתם,‬
‫אל תגידו “לא”. כי אז בחיים לא תתמקצעו על פלטפורמות חדשות. פשוט לכו לגוגל לפני וגם‬
    ‫בזמן הפרוייקט, חפשו את כל החומר שתוכלו על אותה פלטפורמה, ותעבדו לפי מה‬
 ‫שלמדתם. לא משנה באיזה פלטפורמה מדובר, מישהו כבר עיצב אליה וכתב עליה לפניכם.‬
‫שאתם מחפשים חומר, חפשו בצורה ספציפית עם המילים ‪ ,template, tutorial‬ו-‪guidelines‬‬
.‫הנה קישורים שאספתי עבורכם. רצוי לקרוא ולהוריד את כל מה שיש פה‬

iOS
teehanlax.com/downloads/ios-5-gui-psd-iphone-4s
                                                       ‫טמפלט לעיצוב לאייפון - רטינה‬

http://www.teehanlax.com/downloads/ipad-gui-psd-retina-display/
                                     ‫טמפלט לעיצוב ממשקים לאייפד החדש - עם רטינה‬

http://mobile.smashingmagazine.com/2010/11/17/designing-for-
iphone-4-retina-display-techniques-and-workflow/
                                               ‫מאמר מצויין על עיצוב לאייפון ואיך לחתוך‬

http://mobile.smashingmagazine.com/2010/04/16/design-tips-
for-your-ipad-app/
                                      ‫מדריך למעצב לאייפד עם המון חומר וקישורים יעילים‬


http://www.ipadatelier.com/design-for-ipad.html
                                          ‫אוסף של כלים ומאמרים לעיצוב לאייפד‬

http://blog.cocoia.com/2010/iphone-4-icon-psd-file/
                                          ‫טמפלט לעיצוב אייקונים לאייפון ואייפד‬
Android
http://www.teehanlax.com/downloads/android-gui-psd-high-density/
                                           ‫טמפלט לעיצוב לאנדרויד ברזולוציה גבוהה‬


http://mobile.smashingmagazine.com/2011/06/30/designing-for-
android-tips/
                                                         ‫טיפים לעיצוב לאנדרויד‬

http://mobile.smashingmagazine.com/2011/08/09/designing-for-
android-tablets/
                                          ‫מאמר מצויין על עיצוב לטבלטים של אנדרויד‬
‫8 ‪Windows‬‬
‫‪http://msdn.microsoft.com/en-us/library/windows/apps/hh700403.aspx‬‬
                                ‫ערכה שלמה של אלמנטים וממשק לעיצוב אפליקציות מטרו לווינדוס 8‬


‫270977‪http://msdn.microsoft.com/library/windows/apps/hh‬‬
                  ‫העמוד הרשמי של מיקרוסופט לחומרים והדרכות על עיצוב אפליקציות מטרו לווינדוס 8‬



‫4547=‪http://www.netcraft.co.il/blog/?p‬‬
                               ‫מאמר של נטקראפט על הממשק של אפליקציות מטרו וקישורים יעילים‬
Social Media
http://www.smashingmagazine.com/2011/12/22/freebie-new-twitter-
profile-page-gui-psd/
                                                  ‫הטמפלט לעיצוב דף בטוויטר‬

http://www.nealcampbell.com/2011/12/17/facebook-timel-for-
photoshop/
                                              ‫טמפלט להורדה ודוגמאות לטיימליין של פייסבוק‬



http://club.richkid.co.il/facebook-timeline/
                        ‫טמפלט לעיצוב טיימליין של פייסבוק מאת ריצ’קיד - יש להזין אימייל להורדה‬
Web Design
http://threefifty.ca/blog/reference-guide-1140-css-grid-pixels
                              ‫ לעיצוב אתר עם גריד של 0411 פיקסלים‬PSD ‫הורדת טמפלט‬



http://vector.tutsplus.com/articles/news/vectortuts-freebie-
vector-pack-browser-screens-and-website-elements/
                       ‫הורדה של דוגמה לדפדפן‬
‫בניוזלטר של פיקסל פרפקט אנו מוציאים טמפלטים חינמיים‬
          ‫למעצבים כל שבוע. מומלץ להירשם.‬



            ‫/‪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/
‫תודה‬



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



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

עיצוב בעולם הדיגיטלי - הסבר, טיפים וקישורים יעילים

  • 1.
    ‫שגיא שרייבר‬ ‫פיקסל פרפקטמגזין‬ ‫‪pixelperfect.co.il‬‬
  • 2.
    ‫1‬ ‫מה יש שםבשבילנו שם בחוץ‬
  • 3.
    ‫התפיסה שאיתה גדלנוהיא שאנחנו האמנים המיוסרים‬
  • 4.
    ‫אבל זה ממשלא נכון - בעולם הדיגיטלי אנחנו סופר מגניבים‬
  • 5.
    ‫ויש כמות עבודהאין סופית בתחום העיצוב הדיגיטלי‬
  • 6.
    ‫לקוח‬ ‫ויש לנו לקוחות- המון לקוחות שם בחוץ‬
  • 7.
    ‫לקוחות באים בכלמני צורות‬
  • 11.
    ‫וכאשר הם מגיעיםאלינו אנחנו צריכים לדעת לתת להם תשובות‬
  • 12.
    ‫אתרים‬ ‫אילו סוגי אתריםיש? ומה יש מסביבם שאנו צריכים להכיר ולדעת?‬
  • 13.
    ‫נניח ולקוח בעלחנות תכשיטים מגיע אלינו‬
  • 14.
    ‫הלקוח רוצה אתרעם כמה עמודים, אתר שרק יציג את העסק שלו‬
  • 15.
    ‫אתר תדמיתי‬ ‫ה נקראאתר תדמיתי. זה אתר מהסוג הכי פשוט שיש. בד”כ יכלול דף בית, דף אודות,‬ ‫דף צור קשר, ואולי עוד כמה דפים פנימיים‬
  • 16.
  • 19.
    ‫אתר קטלוגי‬ ‫שנו גםאתר קטלוגי שאנו יכולים להציע לו. זהו אתר תדמיתי רק עם איזור באתר‬ ‫שבו הוא יוכל להציג את קטלוג המוצרים שלו למבקרים.‬
  • 20.
    ‫אתר קטלוגי‬ ‫אתר קטלוגייש לכל פריט דף מוצר, ושם הלקוח יכול לראות תמונות של מוצר ספציפי‬ ‫ואולי אפילו ליצור קשר בטופס מיוחד ישר מהדף של אותו מוצר.‬
  • 21.
    ‫דוגמה של אתרקטלוגי - דף הבית‬
  • 22.
  • 23.
  • 24.
    ‫דוגמה של אתרקטלוגי - דף הבית‬ ‫אתר סחר מקוון‬ ‫‪e-commerce‬‬ ‫ולסיום - אתרי סחר מקוון. זהו אתר קטלוגי רק עם עגלת קניות ואפשרות לרכוש מוצרים באתר‬ ‫עצמו. אתר כזה גם יהיה הכי יקר מבחינת תכנות.‬
  • 25.
  • 26.
  • 27.
    ‫השראה מאתרים‬ cssdesignawards.com awwwards.com verynicesites.com siteinspire.com csswinner.com makebetterwebsites.com pixelperfect.co.il/inspiration ‫בפיקסל פרפקט מדי שישי אנו מפרסמים את “השראה בשישי” שבו אנו משתפים אתרים יפים‬ .‫שמצאנו בשבוע האחרון. מומלץ להתעדכן באתרים חדשים שיצאו‬
  • 28.
  • 29.
    ‫סוגי פורמטים‬ ‫אתר רגיל‬ ‫)‪HTML + CSS + Javascript (mostly‬‬ ‫תרים רגילים בנויים מקוד פשוט שהדפדפן יכול לקרוא. כל דפדפן בין אם זה‬ ‫אקספלורר כרום או פיירפוקס - כולם קוראים את אותן השפות.‬
  • 31.
    ‫סוגי פורמטים‬ ‫אתר רגיל‬ ‫‪1024x768px‬‬ ‫‪960x700px‬‬ ‫עד ממש לא מזמן ב-2102 כל האתרים הותאמו לרזולוציה של 4201 פיקסלים לרוחב על 867‬ ‫פיקסלים גובה. שעיצבנו עבור רזולוציה זו לקחנו טווח בטיחות מהשוליים אז בעצם עיצבנו‬ ‫ברזולוציה של 069 פיקסלים רוחב על 007-006 פיקסלים לגובה.‬
  • 32.
    ‫סוגי פורמטים‬ ‫אתר רגיל‬ ‫‪1024x768px‬‬ ‫‪960x700px‬‬ ‫‪1280x768px‬‬ ‫‪1140x700px‬‬ ‫היום כבר הרזולוציה גדלה. אנשים משתמשים כבר במסכים רחבים יותר. לכן הנורמה לעיצוב‬ ‫אתר השתנתה לגודל של 867‪ .1280x‬ואם מתחשבים בטווח הבטיחות אז נעצב ל-007‪.1140x‬‬
  • 33.
    ‫סוגי פורמטים‬ ‫אתר רגיל‬ 1024x768px 960x700px 1280x768px 1140x700px .‫אתם מוזמנים להוריד טמפלט לעיצוב אתרים בפיקסל פרפקט‬ pixelperfect.co.il/freebies/free-hebrew-web-design-template
  • 34.
    ‫סוגי פורמטים‬ ‫אתרי מובייל‬ ‫ישנם עוד סוגים של אתרים כמו אתרי מובייל. אלו אתרים “מותאמים” לצפייה בסמארטפונים‬ ‫ולפעמים גם טבלטים.‬
  • 35.
    ‫סוגי פורמטים‬ ‫אתרי מובייל‬ ‫לרוב אתרים אלו נעשים על ידי שימוש בספריית ‪ Javascript‬בשם ‪Jquery mobile‬‬
  • 36.
    ‫הנה דוגמה לאתריםמותאמים למובייל‬
  • 37.
    ‫סוגי פורמטים‬ ‫אתרים רספונסיביים‬ ‫אתרים רספונסיביים. זה מה שהולך היום! נכון ל-2102 זהו הסוג החם והחדש של האתרים.‬
  • 38.
    ‫סוגי פורמטים‬ ‫אתרים רספונסיביים‬ ‫אתרים רספונסיביים הם אתרים שמותאמים לכל סוג רזולוציה. בונים אותם פעם אחת, רק‬ ‫בצורה גמישה ועם ‪ CSS‬נכון והם יתאימו לכל רזולוציה אפשרית.‬
  • 39.
    ‫סוגי פורמטים‬ ‫אתרים רספונסיביים‬ ‫תוכלו למצוא דוגמאות בקישור הבא:‬ ‫/‪http://designmodo.com/responsive-design-examples‬‬
  • 40.
    ‫‪http://www.smashingmagazine.com‬‬ ‫סמאשינג מגזין -בלוג העיצוב הפופלארי בעולם עשו עיצוב מחדש ובנו את האתר בצורה‬ ‫רספונסיבית. להלן דוגמה למסך רחב.‬
  • 41.
    ‫שמקווצים את הדפדפן- שימו לב איך התפריט הצדדי עבר למעלה.‬
  • 42.
    ‫במצב של רזולוצייתטאבלטים, שימו לב איך התפריט נפתח ונעלמו כל הפרסומות מסביב.‬
  • 43.
    ‫מצב מובייל. במצבזה‬ ‫הטקסטים גם גדלים על מנת‬ ‫לאפשר קריאות נוחה גם‬ ‫בסמארטפונים.‬
  • 44.
    ‫ולאחרונה ביצענו גםעדכון בפיקסל פרפקט והפכנו אותו לרספונסיבי‬
  • 45.
    ‫מערכות ניהול תוכן‬ ‫עוד בתחום האתרים, יש לדעת שמאחורי כל אתר יש מערכת ניהול תוכן.‬ ‫מערכת ניהול תוכן היא בעצם אתר שבאמצעותו הלקוח שלנו יוכל לעדכן את התכנים באתר‬ ‫שלו. בעצם אתר ששולט לו בתכני האתר שלו.‬
  • 46.
    ‫מערכות ניהול תוכן‬ ‫הלקוחמקבל שם משתמש וססמה על מנת להיכנס למערכת ניהול האתר שלו‬
  • 47.
    ‫מערכות ניהול תוכן‬ ‫ממערכתהניהול הוא יכול לשנות תכנים, להעלות מדיה ולבצע שינויים באתר.‬
  • 48.
    ‫מערכות ניהול תוכן‬ ‫מערכות פופולאריות‬ ‫אתרים ובלוגים‬ ‫ישנן כמה מערכות פופולאריות לניהול תוכן, ביניהן בקרב מעצבים הכי פופולארית ומומלצת‬ ‫לדעתי היא וורדפרס. היא ממש נוחה להבנה ומי שמבין טיפה ‪ HTML‬ו-‪ CSS‬יכול ללמוד גם‬ ‫איך להרים אתר שלם עם מערכת ניהול תוכן באמצעות וורדפרס.‬
  • 49.
    ‫מערכות ניהול תוכן‬ ‫מערכות פופולאריות‬ ‫אתרים ובלוגים‬ ‫סחר מקוון‬ ‫לקוח בא לאיכם ורוצה אתר סחר מקוון? תדעו שלאתרי סחר מקוון יש מערכות ניהול תוכן‬ ‫משלהם. במערכות האלו ניתן לערקוב אחר הזמנות ותזרימי כספים.‬
  • 50.
    ‫מסביב לאתר‬ ‫אז מהיש לנו עוד שלקוחות יכולים לבקש?‬
  • 51.
    ‫מסביב לאתר‬ ‫באנרים‬ ‫באנרים הם מסוג העבודה שלעולם לא נגמרת. צריך לעצב אותם. לפעמים כ-‪ JPG‬ולפעמים‬ ‫בפלאש. בהתאם לדרישות הלקוח והאתר שבו הבאנרים יהיו ממוקמים.‬
  • 52.
    ‫מסביב לאתר‬ ‫רי-סייזינג‬ ‫בנוסף עם כל עבודת עיצוב באנר באה עבודת רי-סייזינג לגדלי הבאנרים על מנת להתאים‬ ‫אותם לאתרים השונים והמיקומים השונים שהם יוצגו בהם.‬
  • 53.
    ‫מסביב לאתר‬ ‫דפי נחיתה‬ ‫והבאנרים שאנו מעצבים צריכים להפנות לקישור כלשהו, ובדרך כלל זה לא לאתר שלם, אלא‬ ‫לדף נחיתה עם מסר שיווקי.‬
  • 54.
    ‫מסביב לאתר‬ ‫דפי נחיתה‬ ‫)‪CTA (Call to action‬‬ ‫עיצוב דפי נחיתה הוא מעצמו תורה שלמה. על מנת לעצב דף נחיתה טוב צריך להיות טובים‬ ‫בעיצוב מונחה “המרה”. הכוונה היא בחירת צבעים גדלים וקופי להעברת המסר השיווקי.‬
  • 55.
    ‫מסביב לאתר‬ ‫בלוג‬ ‫ווידג’טים‬ ‫וכמובן שיש עוד הרבה עבודות רציניות שלא עברתי עליהם כאן רק מסביב לעיצוב אתרים.‬
  • 56.
    ‫קומפלט‬ ‫מהו הפיתרון השלם?בואו נראה רגע את אחת הסיטואציות הנפוצות פה בשוק בארץ.‬
  • 57.
    ‫ישראל ידוע בעולםכ-‪ .Startup nation‬יש לנו המון סטארטאפים כאן בארץ. והמודעות לעיצוב‬ ‫טוב היא גבוהה מאוד בקרב סטארטאפים בארץ.‬
  • 58.
  • 59.
    ‫היזם הולך, מגייסאת הכסף לפיתוח הרעיון שלו, ממשקיעים פרטיים-אנג’לים - או מקרנות‬ ‫הון סיכון, ועכשיו הוא פונה אליכם לעיצוב הסטארטאפ שלו.‬
  • 60.
    ‫יש הרבה פלטפורמותשהוא יכול לרצות לפתח את האפליקציה שלו בהן, ויש הרבה‬ ‫פלטפורמות לבחור מהן. יש לנו סמארטפונים, טאבלטים, אפליקציות ווב, ועוד.‬
  • 61.
    ‫כמובן שיש גםלכל פלטפורמה כזאת כמה הפעלה. יש לנו אנדרויד, אייפון ‪ ,iOS‬ווב, ווינדוס 8,‬ ‫אפליקציות פייסבוק שיש להן חוקים משלהן, ועוד.‬
  • 62.
    ‫לוגו ותדמית‬ ‫שלקוח פונה אליכם הוא ירצה שתתנו לו פתרון שלם...‬
  • 63.
  • 64.
    ‫לוגו ותדמית‬ ‫אתר לאפליקציה‬ ‫אפליקציה‬
  • 65.
    ‫לוגו ותדמית‬ ‫אייקונים‬ ‫אתר לאפליקציה‬ ‫אפליקציה‬
  • 66.
    ‫לוגו ותדמית‬ ‫אייקונים‬ ‫אתר לאפליקציה‬ ‫אפליקציה‬ ‫חומרים שיווקיים‬
  • 67.
    ‫דף פייסבוק‬ ‫לוגו ותדמית‬ ‫אייקונים‬ ‫אתר לאפליקציה‬ ‫אפליקציה‬ ‫חומרים שיווקיים‬
  • 68.
    ‫רקע לטוויטר‬ ‫דף פייסבוק‬ ‫לוגו ותדמית‬ ‫אייקונים‬ ‫אתר לאפליקציה‬ ‫אפליקציה‬ ‫חומרים שיווקיים‬
  • 69.
    ‫רקע לטוויטר‬ ‫דף פייסבוק‬ ‫לוגו ותדמית‬ ‫אייקונים‬ ‫אתר לאפליקציה‬ ‫אפליקציה‬ ‫חומרים שיווקיים‬ ‫ערוץ יוטיוב‬
  • 70.
    ‫רקע לטוויטר‬ ‫דף פייסבוק‬ ‫לוגו ותדמית‬ ‫אייקונים‬ ‫כרטיסי ביקור‬ ‫אתר לאפליקציה‬ ‫אפליקציה‬ ‫חומרים שיווקיים‬ ‫ערוץ יוטיוב‬
  • 71.
    ‫רקע לטוויטר‬ ‫דף פייסבוק‬ ‫לוגו ותדמית‬ ‫אייקונים‬ ‫כרטיסי ביקור‬ ‫אתר לאפליקציה‬ ‫אפליקציה‬ ‫חולצות+ווסאח‬ ‫חומרים שיווקיים‬ ‫ערוץ יוטיוב‬
  • 72.
    ‫רקע לטוויטר‬ ‫דף פייסבוק‬ ‫לוגו ותדמית‬ ‫אייקונים‬ ‫כרטיסי ביקור‬ ‫אתר לאפליקציה‬ ‫אפליקציה‬ ‫חולצות+ווסאח‬ ‫חומרים שיווקיים‬ ‫ערוץ יוטיוב‬ ‫עוד פרינט‬
  • 73.
    ‫לכל פלטפורמה ישאת החוקים שלה מבחינת הנחיות לעיצוב. כל מערכת הפעלה היא עולם‬ ‫חדש מבחינת סוגי רזולוציות, נורמות עיצוביות, קווי בסיס, טיפוגרפיה וטרנדים.‬ ‫איך נדע לתת מענה בצורה מקצועית להכל?‬
  • 74.
    ‫התשובה היא פשוטה...יותר פשוטה ממה שאתם חושבים.‬
  • 75.
    ‫גוגל! בגוגל ישהכל. אם לקוח פנה אליכם לעצב אפליקציה על פלטפורמה שעוד לא למדתם,‬ ‫אל תגידו “לא”. כי אז בחיים לא תתמקצעו על פלטפורמות חדשות. פשוט לכו לגוגל לפני וגם‬ ‫בזמן הפרוייקט, חפשו את כל החומר שתוכלו על אותה פלטפורמה, ותעבדו לפי מה‬ ‫שלמדתם. לא משנה באיזה פלטפורמה מדובר, מישהו כבר עיצב אליה וכתב עליה לפניכם.‬
  • 76.
    ‫שאתם מחפשים חומר,חפשו בצורה ספציפית עם המילים ‪ ,template, tutorial‬ו-‪guidelines‬‬
  • 77.
    .‫הנה קישורים שאספתיעבורכם. רצוי לקרוא ולהוריד את כל מה שיש פה‬ iOS teehanlax.com/downloads/ios-5-gui-psd-iphone-4s ‫טמפלט לעיצוב לאייפון - רטינה‬ http://www.teehanlax.com/downloads/ipad-gui-psd-retina-display/ ‫טמפלט לעיצוב ממשקים לאייפד החדש - עם רטינה‬ http://mobile.smashingmagazine.com/2010/11/17/designing-for- iphone-4-retina-display-techniques-and-workflow/ ‫מאמר מצויין על עיצוב לאייפון ואיך לחתוך‬ http://mobile.smashingmagazine.com/2010/04/16/design-tips- for-your-ipad-app/ ‫מדריך למעצב לאייפד עם המון חומר וקישורים יעילים‬ http://www.ipadatelier.com/design-for-ipad.html ‫אוסף של כלים ומאמרים לעיצוב לאייפד‬ http://blog.cocoia.com/2010/iphone-4-icon-psd-file/ ‫טמפלט לעיצוב אייקונים לאייפון ואייפד‬
  • 78.
    Android http://www.teehanlax.com/downloads/android-gui-psd-high-density/ ‫טמפלט לעיצוב לאנדרויד ברזולוציה גבוהה‬ http://mobile.smashingmagazine.com/2011/06/30/designing-for- android-tips/ ‫טיפים לעיצוב לאנדרויד‬ http://mobile.smashingmagazine.com/2011/08/09/designing-for- android-tablets/ ‫מאמר מצויין על עיצוב לטבלטים של אנדרויד‬
  • 79.
    ‫8 ‪Windows‬‬ ‫‪http://msdn.microsoft.com/en-us/library/windows/apps/hh700403.aspx‬‬ ‫ערכה שלמה של אלמנטים וממשק לעיצוב אפליקציות מטרו לווינדוס 8‬ ‫270977‪http://msdn.microsoft.com/library/windows/apps/hh‬‬ ‫העמוד הרשמי של מיקרוסופט לחומרים והדרכות על עיצוב אפליקציות מטרו לווינדוס 8‬ ‫4547=‪http://www.netcraft.co.il/blog/?p‬‬ ‫מאמר של נטקראפט על הממשק של אפליקציות מטרו וקישורים יעילים‬
  • 80.
    Social Media http://www.smashingmagazine.com/2011/12/22/freebie-new-twitter- profile-page-gui-psd/ ‫הטמפלט לעיצוב דף בטוויטר‬ http://www.nealcampbell.com/2011/12/17/facebook-timel-for- photoshop/ ‫טמפלט להורדה ודוגמאות לטיימליין של פייסבוק‬ http://club.richkid.co.il/facebook-timeline/ ‫טמפלט לעיצוב טיימליין של פייסבוק מאת ריצ’קיד - יש להזין אימייל להורדה‬
  • 81.
    Web Design http://threefifty.ca/blog/reference-guide-1140-css-grid-pixels ‫ לעיצוב אתר עם גריד של 0411 פיקסלים‬PSD ‫הורדת טמפלט‬ http://vector.tutsplus.com/articles/news/vectortuts-freebie- vector-pack-browser-screens-and-website-elements/ ‫הורדה של דוגמה לדפדפן‬
  • 82.
    ‫בניוזלטר של פיקסלפרפקט אנו מוציאים טמפלטים חינמיים‬ ‫למעצבים כל שבוע. מומלץ להירשם.‬ ‫/‪http://www.pixelperfect.co.il/newsletter-signup‬‬
  • 83.
    ‫2‬ ‫טיפים מהנסיון האישי שלי‬ ‫בחלק זה אשתף בטיפים מהנסיון האישי שלי בנוגע לתחילת העבודה בתחום ובניצול תקופת‬ ‫הלימודים בצורה יעילה ומהנה.‬
  • 84.
    ‫השראה השראה השראה!‬ ‫להיות בעניינים‬ ‫הטיפ הזה נוגע במהות שלכם כמעצבים. בלי לשאוב השראה ולהשאר בעניינים בתחום‬ ‫העיצוב לא תוכלו להתקדם ולהצליח בלימודים או בשוק העבודה.‬ ‫תמיד צריך להסתכל ולנתח עיצובים, ותמיד צריך לקרוא על הטכנולוגיות השונות‬ ‫וההתפתחויות בתחום העיצוב.‬ ‫אנחנו נמצאים בתחום שאם לא נשאב בו השראה אנחנו נשאר מאחור מהר מאוד.‬
  • 85.
    ‫השראה השראה השראה!‬ ‫להיות בעניינים‬ ‫יש שני אתרים מעולים שמומלץ להתעדכן בהם יומית: דריבל וסמאשינג מגזין.‬
  • 86.
    ‫השראה השראה השראה!‬ ‫להיות בעניינים‬ ‫דריבל - ‪ - dribbble.com‬רשת חברתית למעצבים איכותיים. אפשר להיכנס שם לשאוב‬ ‫השראה מדברים לפני שפותחים את הפוטושופ.‬
  • 87.
    ‫השראה השראה השראה!‬ ‫להיות בעניינים‬ ‫סמאשינג מגזין - ‪ - smashingmagazine.com‬בלוג העיצוב הכי פופולרי בעולם, ומפרסם כל‬ ‫יום כתבות בחוד החנית של עולם העיצוב, חווית המשתמש ותכנות ווב.‬
  • 88.
    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/
  • 89.
    ‫התחילו לעבוד בתחום‬ ‫צברו נסיון‬ ‫גם אם בלימודים, התחילו לעבוד בתחום. זה כנראה נגד מה שחלק מהמרצים יגידו, אבל אתם‬ ‫לא מאמינים כמה זה יעזור לכם.‬ ‫אם תעבדו בתחום בזמן הלימודים אתם גם תהנו מעבודת הסטודנטים האולטימטיבית של‬ ‫לעבוד מהבית ומתי שרוצים, וגם תוכלו להתחיל ליישם דברים שלמדתם בלימודים בעבודה‬ ‫אמיתית. שלא לדבר על זה שכאשר תסיימו את הלימודים, אתם תהיו כבר עם שנות נסיון...‬ ‫דבר שלא מובן מאליו.‬ ‫מה עדיף, לסיים את הלימודים ולחפש עבודה בנרות - ומתוך זה לשמוע הרבה פעמים את‬ ‫המילה “לא” רק בגלל שאין לכם נסיון? או שירדפו אחריכם ואתם תהיו במצב לומר “לא”‬ ‫לחברות? אם תהיו גם עם נסיון בשוק וגם אחרי תואר, תאמינו לי שיהיו הרבה אופציות‬ ‫פתוחות בפניכם.‬ ‫אז לפני הלקוח הראשון ובמיוחד בהתחלה, איך אפשר לצבור נסיון ותיק עבודות?‬
  • 90.
    ‫התחילו לעבוד בתחום‬ ‫צברו נסיון‬ ‫‪v‬‬ ‫דבר ראשון לפתוח פוטשופ ולעצב דברים. לא חייבים אפילו לקוח כדי להתחיל, אפשר לקחת‬ ‫אתרים ולנסות לעצב אותם מחדש, או לחקות אותם כדי ללמוד איך עיצבו שם דברים.‬
  • 91.
    ‫התחילו לעבוד בתחום‬ ‫צברו נסיון‬ ‫‪v‬‬ ‫דבר שני אירועים, ישנם לא מעט אירועים למעצבים, תתעדכנו ותגיעו אליהם. זאת דרך‬ ‫מצויינת ללמוד מהרצאות של בעלי נסיון, ולפתח קשרים עם מעצבים ואנשי מקצוע אחרים.‬
  • 92.
    ‫התחילו לעבוד בתחום‬ ‫צברו נסיון‬ ‫‪v‬‬ ‫לבסוף, תחרויות. יש לא מעט תחרויות למעצבים עם פרסים שווים, אז מומלץ בחום‬ ‫להשתתף. גם את הדברים שעושים לתחרויות אפשר לשים אחר כך בתיק עבודות.‬
  • 93.
    ‫הכינו את הקרקעלעבודה‬ ‫הדברים הטכניים הם יותר מחצי הדרך‬ ‫יש כמה דברים שצריך לעשות לפני הלקוח הראשון, ואלו דברים שאנחנו לא אוהבים להתעסק‬ ‫איתם, אבל ברגע שמסיימים איתם אנחנו מוכנים להתחיל וההרגשה היא טובה מאוד.‬
  • 94.
    ‫הכינו את הקרקעלעבודה‬ ‫הדברים הטכניים הם יותר מחצי הדרך‬ ‫תפתחו עוסק זעיר או עוסק מורשה. זאת בירוקרטיה אבל הכרחי.‬
  • 95.
    ‫הכינו את הקרקעלעבודה‬ ‫הדברים הטכניים הם יותר מחצי הדרך‬ ‫שפצו את קורות החיים שלכם. תעיפו משם דברים כמו קורס ברמנים - זה לא מעניין אף אחד‬ ‫בתחום העיצוב. גם תורידו משם את התיכון שלמדתם בו. תוסיפו איזור “תוכנות” שאתם‬ ‫עובדים עליהם, ותשקיעו בטיפול הטיפוגרפי. אל תעשו קו”ח קריאטיבי, אנשים לא אוהבים‬ ‫את זה ומעדיפים לראות קו”ח נקיים וקריאים.‬
  • 96.
    ‫הכינו את הקרקעלעבודה‬ ‫הדברים הטכניים הם יותר מחצי הדרך‬ ‫תכינו לגם טמפלט להצעת מחיר. זה סופר חשוב. בעבודה עם לקוחות - חוץ ממשפחה - אין‬ ‫דבר כזה להתחיל פרוייקט בלי חוזה! ואין דבר כזה חברים שמגיעים לכסף. חוזה זה חוזה.‬
  • 97.
    ‫הכינו את הקרקעלעבודה‬ ‫הדברים הטכניים הם יותר מחצי הדרך‬ ‫שיתפתי בפיקסל פרפקט את החוזה שעבדתי איתו עם לקוחות. אתם מוזמנים להוריד‬ ‫/‪http://www.pixelperfect.co.il/tools-for-designers/price-quote‬‬
  • 98.
    ‫דברו על זה‬ ‫עםחברים, משפחה, מכרים‬ ‫תתחילו להפיץ את השמועה שיש מעצב חדש בשכונה.‬
  • 99.
    ‫דברו על זה‬ ‫עם חברים, משפחה, מכרים‬ ‫דברו על זה בכל מקום. עם כל המשפחה, עם חברים, עם הספר שלכם, כל מכר, תציפו את‬ ‫הפייסבוק שלכם ושלחו מייל לכל רשימת התפוצה שלכם שאתם מתחילים לקבל עבודות‬ ‫עיצוב. אל תבחלו באמצעים, קבלו כל עבודה שלא תהיה, מעיצוב לוגו או אתר ועד עיצוב‬ ‫הזמנה לבת מצווה. כל עבודה מהווה קפיצת מדרגה לעבודה יותר גדולה.‬
  • 100.
    ‫ברגע שמספרים להרבהאנשים זה כבר נהיה רק עניין של סטטיסטיקה.‬
  • 101.
    ‫גם אם הםלא צריכים עבודת עיצוב, בפעם הבאה שמישהו שואל אותם אם הם מכירים‬ ‫מעצב, הם יזכרו אתכם.‬
  • 102.
    ‫והאנשים שהם סיפרולהם עליכם יעבירו הלאה את השם אפילו אם הם לא היו לקוחות שלכם.‬
  • 103.
    ‫ומתישהו יפנו אליכםחלק מהאנשים ותתחילו לקבל לקוחות.‬
  • 104.
    ‫הם יזכרו לאטלאט אבל זה יגיע, כי התחלתם גל.‬
  • 105.
    ‫ואולי יום אחדלקוח מרוצה יפנה אליכם לקוח יותר גדול, עם יותר כסף... ככה זה עובד.‬
  • 106.
    ‫ומאחל לכם שתגיעולמצב‬ ‫האופטימלי.‬
  • 107.
    ‫שלחו קורות חיים‬ ‫לכל חברה אפשרית‬ ‫שבו כמה שעות ותעשו מחקר, תארגנו רשימת אקסל עם מיילים של חברות לעיצוב וחברות‬ ‫שאתם רוצים לפנות אליהם, ושלחו לכולם מייל עם הקורות חיים והסבר עליכם. נסחו כמובן‬ ‫כל מייל בנפרד ובאופן אישי.‬ ‫לאחר מכן נהלו את טבלת הקסל לראות למי שלחתם ומי חזר אליכם שתוכלו אולי לפנות שוב‬ ‫אל חברות שתרצו בבוא הזמן. ותתכוננו להרבה שלא יענו וכאלו שיענו עם התשובה “לא”.‬ ‫אבל זה גם עניין סטטיסטי. בסוף מישהו יכול עוד להזמין אתכם לראיון.‬ ‫צריך הרבה סבלנות. אבל הסבלנות משתלמת.‬
  • 108.
    ‫הלימודים זה לאהכל‬ ‫יש גם חיים לחיות‬ ‫ולכל הסטודנטים, תזכרו - הלימודים זה לא הכל!!!‬ ‫יש חיים מעבר ללימודים, וחשוב ממש לזכור את זה. תמצאו זמן לבלות עם חבר/ה ועם‬ ‫משפחה וחברים. לכו לים מתי שאפשר ולטיולים. תהנו מהחיים. הלימודים יכולים לשים אותנו‬ ‫בלחץ של הגשות שקשה לצאת ממנו, אבל זה עניין של תרגול בגישה.‬ ‫אתם תראו שברגע שתשחררו ותקחו את הלימודים בפרופורציות, העבודות שלכם גם יבואו‬ ‫ללא הרבה מאמץ והרבה יותר מוצלחות.‬
  • 109.
    ‫להתפרע!‬ ‫להתנסות בהכל ולהרחיב אופקים‬ ‫בלימודים, הכי חשוב זה להתנסות בכמה שיותר דברים. אם אתם חושבים שידעתם משהו‬ ‫לפני הלימודים נסו “לרוקן את הכוס” שלכם שתהיה ריקה, כדי שתוכלו למלא אותה בכל טוב‬ ‫במהלך הלימודים.‬ ‫הלימודים של עיצוב הם המקום שלכם לעשות דברים שהם לא מוכוונים לשוק, להתנסות נטו‬ ‫בעיצוב וקריאטיביות. התנסו בחוש הומור, ובטיפוגרפיה וקומפוזיציות. נסו דברים שאתם לא‬ ‫טובים בהם רק כדי לנסות. אפילו אם אתם חוששים לקבל ציון לא טוב, אתם תראו שכאשר‬ ‫תנסו דברים חדשים תופתעו מכמה תצליחו.‬
  • 110.
    ‫‪No Ego‬‬ ‫ביטול האגו ועזרה הדדית‬ ‫זה נושא להרצאה שלמה נפרדת, אבל זה הטיפ האחרון והכי חשוב מכולם גם ללימודים וגם‬ ‫לקריירה שלכם. עזרו תמיד אחד לשני, בכל מצב. אם מישהו מבקש ביקורת, תנו לו ביקורת‬ ‫בונה ומתחשבת כמו שהייתם אתם רוצים לקבל. אנחנו המעצבים הרבה פעמים מלאי אגו וזה‬ ‫רק פוגע בנו. החוק הטבעי של החיים הוא שמה שנותנים החוצה מקבלים חזרה פי כמה, אז‬ ‫אם תעזרו לעמיתים וחברים אתם תראו שזה ישתלם לכם פי כמה. זה מה שמנחה אותי תמיד,‬ ‫וזה קידם אותי ברמה אישית ומקצועית בצורה יוצאת דופן.‬
  • 111.
    ‫המשך קריאה‬ ‫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/
  • 112.
    ‫תודה‬ ‫שגיא שרייבר‬ ‫פיקסל פרפקט מגזין‬ sagi@pixelperfect.co.il pixelperfect.co.il sagi-design.co.il