SlideShare une entreprise Scribd logo
1  sur  112
Télécharger pour lire hors ligne
‫שגיא שרייבר‬
‫פיקסל פרפקט מגזין‬



    ‫‪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

Contenu connexe

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

Widgetsfinal
WidgetsfinalWidgetsfinal
Widgetsfinal
scepia
 
מצגת דגמא
מצגת דגמאמצגת דגמא
מצגת דגמא
gad_d
 
Articles technologies
Articles technologiesArticles technologies
Articles technologies
barallor
 
Hamil One Time Make Up Class July 2011
Hamil One Time Make Up Class July 2011Hamil One Time Make Up Class July 2011
Hamil One Time Make Up Class July 2011
Annie Dudkiewicz
 

Similaire à עיצוב בעולם הדיגיטלי - הסבר, טיפים וקישורים יעילים (20)

אלעד גולדנברג: באתי. ראיתי. קניתי - 5 אבני היסוד של המסחר החדש
אלעד גולדנברג: באתי. ראיתי. קניתי - 5 אבני היסוד של המסחר החדשאלעד גולדנברג: באתי. ראיתי. קניתי - 5 אבני היסוד של המסחר החדש
אלעד גולדנברג: באתי. ראיתי. קניתי - 5 אבני היסוד של המסחר החדש
 
question - internet site building 2003
question - internet site building 2003question - internet site building 2003
question - internet site building 2003
 
מדריך פייסבוק בחינם
מדריך פייסבוק בחינםמדריך פייסבוק בחינם
מדריך פייסבוק בחינם
 
כלים ושיטות לחיפוש ,הצגה וניטור מידע ברשת לסטודנטים במרכז הבינתחומי
כלים ושיטות לחיפוש ,הצגה וניטור מידע ברשת   לסטודנטים במרכז הבינתחומיכלים ושיטות לחיפוש ,הצגה וניטור מידע ברשת   לסטודנטים במרכז הבינתחומי
כלים ושיטות לחיפוש ,הצגה וניטור מידע ברשת לסטודנטים במרכז הבינתחומי
 
Widget Scepia
Widget ScepiaWidget Scepia
Widget Scepia
 
Widgetsfinal
WidgetsfinalWidgetsfinal
Widgetsfinal
 
Widget Scepia confrence 2008
Widget Scepia confrence 2008Widget Scepia confrence 2008
Widget Scepia confrence 2008
 
question - internet site building 2003
question - internet site building 2003question - internet site building 2003
question - internet site building 2003
 
איך הובלנו אתר איקומרס לעמוד הראשון בגוגל בעשרות ביטויים
איך הובלנו אתר איקומרס לעמוד הראשון בגוגל בעשרות ביטוייםאיך הובלנו אתר איקומרס לעמוד הראשון בגוגל בעשרות ביטויים
איך הובלנו אתר איקומרס לעמוד הראשון בגוגל בעשרות ביטויים
 
איך לייצר לידים בתקציב נמוך בעזרת שיווק באינטרנט?
איך לייצר לידים בתקציב נמוך בעזרת שיווק באינטרנט?איך לייצר לידים בתקציב נמוך בעזרת שיווק באינטרנט?
איך לייצר לידים בתקציב נמוך בעזרת שיווק באינטרנט?
 
סדנא להקמת אתר - מבוא
סדנא להקמת אתר - מבואסדנא להקמת אתר - מבוא
סדנא להקמת אתר - מבוא
 
פרויקט Web טיפים לבניית
 פרויקט Web טיפים לבניית  פרויקט Web טיפים לבניית
פרויקט Web טיפים לבניית
 
מצגת דגמא
מצגת דגמאמצגת דגמא
מצגת דגמא
 
Articles technologies
Articles technologiesArticles technologies
Articles technologies
 
פרסום ושיווק בפייסבוק
פרסום ושיווק בפייסבוקפרסום ושיווק בפייסבוק
פרסום ושיווק בפייסבוק
 
3points - מצגת חברה
3points - מצגת חברה3points - מצגת חברה
3points - מצגת חברה
 
הקמת בלוג או אתר תוכן מסחרי לשם רווח Anidor hakak
הקמת בלוג או אתר תוכן מסחרי לשם רווח   Anidor hakakהקמת בלוג או אתר תוכן מסחרי לשם רווח   Anidor hakak
הקמת בלוג או אתר תוכן מסחרי לשם רווח Anidor hakak
 
סדנא להקמת אתר חלק שלישי קידום
סדנא להקמת אתר חלק שלישי קידוםסדנא להקמת אתר חלק שלישי קידום
סדנא להקמת אתר חלק שלישי קידום
 
Hamil One Time Make Up Class July 2011
Hamil One Time Make Up Class July 2011Hamil One Time Make Up Class July 2011
Hamil One Time Make Up Class July 2011
 
SEO עבר הווה ועתיד
SEO עבר הווה ועתידSEO עבר הווה ועתיד
SEO עבר הווה ועתיד
 

Plus de Sagi Shrieber

זה לא ברור מאליו - מה למדתי מלראיין את מנהלי העיצוב הטובים בעולם ומלבנות צוות...
זה לא ברור מאליו - מה למדתי מלראיין את מנהלי העיצוב הטובים בעולם ומלבנות צוות...זה לא ברור מאליו - מה למדתי מלראיין את מנהלי העיצוב הטובים בעולם ומלבנות צוות...
זה לא ברור מאליו - מה למדתי מלראיין את מנהלי העיצוב הטובים בעולם ומלבנות צוות...
Sagi Shrieber
 
Scaling a Design Team: Insights from interviewing the world's top design lead...
Scaling a Design Team: Insights from interviewing the world's top design lead...Scaling a Design Team: Insights from interviewing the world's top design lead...
Scaling a Design Team: Insights from interviewing the world's top design lead...
Sagi Shrieber
 
Inkod- Rummikub presentation
Inkod- Rummikub presentationInkod- Rummikub presentation
Inkod- Rummikub presentation
Sagi Shrieber
 

Plus de Sagi Shrieber (9)

זה לא ברור מאליו - מה למדתי מלראיין את מנהלי העיצוב הטובים בעולם ומלבנות צוות...
זה לא ברור מאליו - מה למדתי מלראיין את מנהלי העיצוב הטובים בעולם ומלבנות צוות...זה לא ברור מאליו - מה למדתי מלראיין את מנהלי העיצוב הטובים בעולם ומלבנות צוות...
זה לא ברור מאליו - מה למדתי מלראיין את מנהלי העיצוב הטובים בעולם ומלבנות צוות...
 
Start working on your personal brand
Start working on your personal brandStart working on your personal brand
Start working on your personal brand
 
Scaling a Design Team: Insights from interviewing the world's top design lead...
Scaling a Design Team: Insights from interviewing the world's top design lead...Scaling a Design Team: Insights from interviewing the world's top design lead...
Scaling a Design Team: Insights from interviewing the world's top design lead...
 
The Side Project Accelerator Micro-Workshop
The Side Project Accelerator Micro-Workshop The Side Project Accelerator Micro-Workshop
The Side Project Accelerator Micro-Workshop
 
מבוא לעיצוב - למתכנתים, יזמים, מנהלי מוצר ומאפייני חווית משתמש
 מבוא לעיצוב - למתכנתים, יזמים, מנהלי מוצר ומאפייני חווית משתמש מבוא לעיצוב - למתכנתים, יזמים, מנהלי מוצר ומאפייני חווית משתמש
מבוא לעיצוב - למתכנתים, יזמים, מנהלי מוצר ומאפייני חווית משתמש
 
איך חותכים עיצוב כמו נינג'ות בשנת 2013
איך חותכים עיצוב כמו נינג'ות בשנת 2013איך חותכים עיצוב כמו נינג'ות בשנת 2013
איך חותכים עיצוב כמו נינג'ות בשנת 2013
 
Inkod- Rummikub presentation
Inkod- Rummikub presentationInkod- Rummikub presentation
Inkod- Rummikub presentation
 
Nick Hard
Nick HardNick Hard
Nick Hard
 
Matnas Interactive
Matnas InteractiveMatnas Interactive
Matnas Interactive
 

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

  • 1. ‫שגיא שרייבר‬ ‫פיקסל פרפקט מגזין‬ ‫‪pixelperfect.co.il‬‬
  • 2. ‫1‬ ‫מה יש שם בשבילנו שם בחוץ‬
  • 3. ‫התפיסה שאיתה גדלנו היא שאנחנו האמנים המיוסרים‬
  • 4. ‫אבל זה ממש לא נכון - בעולם הדיגיטלי אנחנו סופר מגניבים‬
  • 5. ‫ויש כמות עבודה אין סופית בתחום העיצוב הדיגיטלי‬
  • 6. ‫לקוח‬ ‫ויש לנו לקוחות - המון לקוחות שם בחוץ‬
  • 7. ‫לקוחות באים בכל מני צורות‬
  • 8.
  • 9.
  • 10.
  • 11. ‫וכאשר הם מגיעים אלינו אנחנו צריכים לדעת לתת להם תשובות‬
  • 12. ‫אתרים‬ ‫אילו סוגי אתרים יש? ומה יש מסביבם שאנו צריכים להכיר ולדעת?‬
  • 13. ‫נניח ולקוח בעל חנות תכשיטים מגיע אלינו‬
  • 14. ‫הלקוח רוצה אתר עם כמה עמודים, אתר שרק יציג את העסק שלו‬
  • 15. ‫אתר תדמיתי‬ ‫ה נקרא אתר תדמיתי. זה אתר מהסוג הכי פשוט שיש. בד”כ יכלול דף בית, דף אודות,‬ ‫דף צור קשר, ואולי עוד כמה דפים פנימיים‬
  • 17.
  • 18.
  • 19. ‫אתר קטלוגי‬ ‫שנו גם אתר קטלוגי שאנו יכולים להציע לו. זהו אתר תדמיתי רק עם איזור באתר‬ ‫שבו הוא יוכל להציג את קטלוג המוצרים שלו למבקרים.‬
  • 20. ‫אתר קטלוגי‬ ‫אתר קטלוגי יש לכל פריט דף מוצר, ושם הלקוח יכול לראות תמונות של מוצר ספציפי‬ ‫ואולי אפילו ליצור קשר בטופס מיוחד ישר מהדף של אותו מוצר.‬
  • 21. ‫דוגמה של אתר קטלוגי - דף הבית‬
  • 24. ‫דוגמה של אתר קטלוגי - דף הבית‬ ‫אתר סחר מקוון‬ ‫‪e-commerce‬‬ ‫ולסיום - אתרי סחר מקוון. זהו אתר קטלוגי רק עם עגלת קניות ואפשרות לרכוש מוצרים באתר‬ ‫עצמו. אתר כזה גם יהיה הכי יקר מבחינת תכנות.‬
  • 27. ‫השראה מאתרים‬ cssdesignawards.com awwwards.com verynicesites.com siteinspire.com csswinner.com makebetterwebsites.com pixelperfect.co.il/inspiration ‫בפיקסל פרפקט מדי שישי אנו מפרסמים את “השראה בשישי” שבו אנו משתפים אתרים יפים‬ .‫שמצאנו בשבוע האחרון. מומלץ להתעדכן באתרים חדשים שיצאו‬
  • 29. ‫סוגי פורמטים‬ ‫אתר רגיל‬ ‫)‪HTML + CSS + Javascript (mostly‬‬ ‫תרים רגילים בנויים מקוד פשוט שהדפדפן יכול לקרוא. כל דפדפן בין אם זה‬ ‫אקספלורר כרום או פיירפוקס - כולם קוראים את אותן השפות.‬
  • 30.
  • 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. ‫לוגו ותדמית‬ ‫שלקוח פונה אליכם הוא ירצה שתתנו לו פתרון שלם...‬
  • 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