איפיון אתר אינטרנט

עיצוב ובניית אתר תהליך העבודה

מאפיינים את האתר

איך ייראה האתר? אילו עמודים יהיה בו? מהו הסגנון ומה האופי שיהיה לו? ובעצם – מה המטרה שלו?

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

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

ממשיכים לעיצוב האתר

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

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

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

אישרנו את העיצוב – וזה הזמן לבנות את האתר

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

יש אתר! עכשיו עולים לאוויר

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

כאן מגיעה התגובה הראשונה, הפידבק הטוב והלקוח הראשון שאומר: "הגעתי אליך דרך האתר!"

יש לך אתר קיים?אפשר לשדרג אותו גם בזמן שהוא באוויר

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

עדכונים שוטפים

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

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

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

1

מחקר והסקת מסקנות

2

איפיון האתר וחלוקת האתר לקטגוריות

3

עיצוב האתר

4

הטמעת העיצוב ובניית האתר

5

מקצה שיפורים, הערות והארות

6

העלאת האתר לאוויר!

עיצוב לוגו ומיתוג עסקי לחנות אופנה – מאחורי הקלעים

תהליך עיצוב לוגו ומיתוג עסקי לחנות אופנה

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

כל ההתלבטויות וההחלטות לאורך הדרך.

שלב ראשון - back to basic, עיצוב לוגו מאויר

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

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

3 כיוונים לעיצוב הלוגו
3 כיוונים לעיצוב הלוגו

אופציה ראשונה - לוגו באנגלית

אופציה ראשונה - לוגו באנגלית

אופציה שנייה- לוגו פרחוני

אפשרות שנייה לעיצוב הלוגו
אפשרות שנייה לעיצוב הלוגו

אופציה שלישית- לוגו טיפוגרפי

אפשרות שלישית לעיצוב הלוגו
מימין- אפשרות שלישית לעיצוב הלוגו

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

תהליך עיצוב לוגו
לוגו פרחוני- אפשרות שלישית

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

נייר העתקה - לא פויה!

אז השתמשתי בנייר העתקה, כדי לחזור על האיור ולבצע בו מקצה שיפורים נוסף.
נייר העתקה??? פויה! – בדקתי, אם אתם מעתיקים מעצמכם זה תקין לחלוטין וחוקי!
This is just being a better version of myself!
וחוזר חלילה…

שלב שני- יצירת שפה גרפית למותג

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

שלב שלישי - הדפסה ביתית לכרטיסי הביקור

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

הדפסה ביתית לכרטיסי הביקור
הדפסה ביתית לכרטיסי הביקור

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

עיצוב מדבקה ממותגת

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

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

מדבקה ממתוגת- שינוי בגודל המדקה
שינוי בגודל המדבקה

שלב 4- הדפסת ניסיון בבית הדפוס

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

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

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

הדפסת ניסיון כרטיסי ביקור
הדפסת ניסיון נייר אמבסדור

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

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

בחרנו נייר- "אמבסדור"

הדפסת מדבקות עם לוגו
גם המדבקות בהדפסת ניסיון

הכי כיף שאפשר למתג כל דבר באמצעות מדבקה!

הכרטיסים העמוצבים בחיתוך בבית הדפוס
הכרטיסים בחיתוך בבית הדפוס

מאשרים ומדפיסים!

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

 

Pinterest

סליחה, כמה עולה להקים אתר אינטרנט?

האם תוכל לענות על השאלה: כמה עולה אוטו?
נכון שהתשובה היא – תלוי?
תלוי מה הצורך, תלוי מה המטרה, האם חשוב לך איך ייראה האוטו? ולאן אתה רוצה להגיע?

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

סוג האתר

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

דף נחיתה

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

אתר תדמית

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

אתר חנות וירטואלית

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

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

2. הפלטפורמה של האתר

Wix וחבורתה

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

שורה תחתונה:
עלות אתר וויקס: חינם- xxxש"ח
עלות אתר וויקס ע"י איש מקצוע: 1000-2000 ₪* (אופציה לא הגיונית לטעמי)

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

אתרי וורדפרס

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

3. עיצוב האתר

תבנית מוכנה מראש

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

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

שורה תחתונה:
עלות תבנית וורדפרס: 0-1$
עלות בניית אתר מבוסס על תבנית: 2,000-5,000 ₪*

*ממליצה להישמר מפני מחירים נמוכים מ-2,000 ₪. לרוב מדובר בחברה שאינה מקצועית.

תבנית בהתאמה אישית

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

שורה תחתונה:
עלות עיצוב ובניית אתר תדמית בעיצוב  אישי:  5,000-8,000 ₪

יצירת לוגו שלב השירבוט

יצירת לוגו

תהליך יצירת לוגו, שלב אחר שלב
Study Case עיצוב לוגו "עולם הלוגואים"

יצירת לוגו שלב 1: הרעיון

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

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

יצירת לוגו שלב 2: שירבוט

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

יצירת לוגו שלב 3: עיבודי מחשב

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

עיצוב לוגו שלב 2: עיבודי מחשב
יצירת לוגו שלב 2: עיבודי מחשב

יצירת לוגו שלב 4: חידוד ושיפור

עיצוב לוגו: הלוגו הסופי
עיצוב לוגו: הלוגו הסופי

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

לוגואים של חברות מובילות

הרהורים בנושא עיצוב לוגו

לפני שנתחיל לדבר על עיצוב הלוגו עצמו, נעצור רגע כדי להבין מה זה בכלל לוגו?

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

וויקיפדיה, 'לוגו'

בראשית ברא האדם את הלוגו ואת הסמליל

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

למה אני צריך לוגו מעוצב?

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

עיצוב לוגו לעסק, לפני ואחרי
מימין, עיצוב לוגו מיושן ועמוס, משמאל עיצוב לוגו חדש לעסק "כיף חיות"

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

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

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

בפעם הבאה שהלקוח שלך יזדקק למוצר שלך או לסוג השירות שלך, הוא יידע מיד למי לפנות ועל מי להמליץ!

הקשר בין עיצוב לוגו למיתוג

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

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

אנקדוטה מעניינת…

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