בשבועות האחרונים אנחנו מחפשים מעצב/ת שיצטרפו למשרד שלנו, ובתור המעצבת היחידה בחברה מדובר בחדשות מאוד מרגשות עבורי. בעיקר כי לא היה לי עם מי לחלוק הערות מתנשאות על עיצוב תפריטים בתן ביס עד כה. הסיטואציה הזו הציבה אותי בפעם הראשונה בצד השני של השולחן, אני כבר לא הנבחנת- אני הבוחנת.
בתהליך הזה התחלתי לעבור על הרבה תיקי עבודות והגעתי לשתי מסקנות:
- הרבה מעצבים מוכשרים לא מציגים בצורה טובה את תיק העבודות שלהם וזה חבל. אבל, הרבה נכתב ונאמר על הנושא הזה וממש עכשיו יש מגוון של קורסים ומנטורינג (למשל התוכנית של שגיא) שנועדו לעזור בדיוק בזה.
- אני צבועה. איך אני יכולה לבחון תיקי עבודות כשאני יודעת שלא הייתי מעבירה את תיק העבודות האישי שלי אם הייתי נתקלת בו? איזה מין דוגמה אני מציבה עכשיו כשאני בצד השני של השולחן?
הבנתי שאני לא יכולה לצפות מעצמי לפחות ממה שאני מצפה מהמעצבים שאנחנו מראיינים, והחלטתי ליצור פורטפוליו חדש. תוך שבוע העיצוב שלו היה מוכן ורק היה צריך לבנות ולהעלות אותו.
״רק״ לבנות אותו. כמה נאיבי מצידי.
אז אני אבנה פורטפוליו, נשמע שזה ילך חלק סך הכל.
בשלב הזה בעודי מלאה בתקווה ושמחת חיים והתחלתי לבחון כלים שונים לבניית האתר.
המחשבה הראשונה שלי הייתה wix, אבל אחרי בדיקה הבנתי שהאופציה הזו לא תתאפשר לי. היה לי חשוב לשלב auto scroll באתר ונכון להיום זה לא אופציה ב-wix.בדקתי את squarespace, web flow, webydo ועוד מגוון כלים נוספים, אבל אף אחד מהם לא אפשר לי להגיע לתוצאה שרציתי, במיוחד כי לא רציתי להשתמש בטמפלייט.
שקלתי לבנות את האתר ב-wordpress אבל יש לי פוביה מ-wordpress ואחרי יומיים של חיפוש פלאגינים ברחתי עם הזנב בין הרגליים.
חיפשתי מפתח ב-fiverr אבל האנשים שפניתי אליהם (הממש-ממש-ממש זולים) לא חזרו אליי.
התקווה ושמחת החיים שלי החלו לאזול והחלטתי לעשות ניסיון אחרון עם כלי ישראלי חדש, RapidUI.
מי אתם RapidUI
RapidUI היא חברה ישראלית שהוקמה ב-2016 וכרגע נמצאת בשלב בטא. אם השם נשמע לכם מוכר, אולי נתקלתם בכתבה עליהם שפיקסל פרפקט כתבו לפני כמה חודשים.
המוצר שלהם מציע למעצבים להעלות קובץ psd/sketch ולהפוך אותו לאתר לייב ואפילו רספונסיבי. דרך הממשק שלהם אפשר להכניס אלמנטים, לשנות מידות וצבעים, לתת לאובייקטים אנימציות ולשלוט בנראות של האתר במגוון רזולוציות. אפשר אפילו להכניס קוד משלכם ועל ידי כך להגיע לתוצאות מאוד מורכבות במעט עבודה.
זה היה בדיוק מה שחיפשתי כל הזמן הזה.
למה אני מספרת לכם עליהם
הייתי על סף לוותר על הפורטפוליו שלי כשהחלטתי לנסות את ראפיד יואיי, ואני חייבת להודות שהעבודה עם הכלי לא הייתה קלה בהתחלה. המוצר כרגע עדיין בגרסת בטא וזה הוליד לפעמים תקלות, בנוסף לכך אני עשיתי מגוון של טעויות שכל פעם לקחו אותי כמה שעות אחורה. עברתי עקומת למידה עם הכלי ונעזרתי המון (!!) בצוות המקסים של RapidUI שפעם אחר פעם התמודדו עם ההודעות מלאות האימוג׳ים שלי במגוון שעות היממה ועצרו הכל בשביל לעזור לי.
כעבור 12 ימים היה לי אתר באוויר שנראה ומתנהג כמו שתכננתי. אתר שיצרתי בעצמי ושבכל פעם שארצה לעדכן אותו אוכל לעשות את זה בעצמי, מבלי להזדקק למפתח. זה די מדהים. הנה הוא פה אם אתם סקרנים.
דיוקן אישי, אני קוראת לו ״3 בלילה ומחקתי את כל הbreakpoint״.
איך גם אתם יכולים להתחיל לעבוד עם RapidUI?
תתחילו בהתנסות, כמו בכל מוצר חדש, גם פה לוקח זמן עד שתופסים את שיטת העבודה. כרגע המוצר מוצע בחינם (הסכום האהוב עליי!) וגם בהמשך ההתנסות עם המוצר תהיה ככל הנראה חינמית והתשלום יהיה על אחסון בלבד או כתשלום חודשי שיכלול אפשרויות מתקדמות. כשתרשמו למוצר אתם תראו שנפתח לכם פרויקט tutorial שנועד להדריך אותכם בממשק.
אתם יכולים גם לצפות בסרטון הסבר שלהם שעונה על הרבה שאלות. אם יש לכם שאלות נוספות אני מאוד ממליצה לכם ליצור קשר עם RapidUI, הם עזרו לי בכל שאלה שהייתה לי ועשו זאת בקביעות ועם חיוך. גם כשהיה מדובר בשאלות מאוד מטופשות.
אגב, חשוב לי לציין שנכון לעכשיו לא הייתי ממליצה על האפליקציה למעצבים שאין להם שום הכרה עם html ו-css, במיוחד אם רוצים להגיע לתוצאות מדויקות. אבל קחו בחשבון שאני מתכוונת לידע מאוד בסיסי. סך הכל RapidUI כבר עשו פה עבורנו את כל העבודה הקשה :)
—
הפרויקט הזה לימד אותי המון, ואם הייתי יודעת אז את מה שאני יודעת היום אין לי ספק שהייתי בונה את האתר שלי בצורה יותר חכמה ויותר מהירה. אז החלטתי לכתוב פוסט על עשרת הטיפים הכי חשובים בעבודה עם RapidUI, בתקווה שזה יעזור לכם לעבוד בצורה יעילה ויחסוך מכם את הטעויות שאני עשיתי.
ובכן להלן 10 דברים שצריך לדעת כשעובדים עם RapidUI: (נכתבו בדמעות ובלילות מחוסרי שינה)
1. תעבדו עם אחוזים
זה כנראה הכלל הכי חשוב פה והוא יחסוך לכם שעות של עבודה אם תקפידו עליו. תעבדו תמיד באחוזים.
מה זה אומר לעבוד באחוזים – כשיש לכם אובייקט על המסך אתם בעצם אומרים לאובייקט הזה איפה להיות ממוקם. לצורך העניין אתם יכולים להגדיר לו להיות 96px מהקצה הימני של המסך, או שאתם יכולים להגדיר שהוא יהיה במרחק של 5% מהקצה הימני של המסך. במסך של 1920px שתי האופציות יראו אותו דבר.
אז מתי זה משמעותי? כשאתם הופכים את העיצוב שלכם לרספונסיבי ומתאימים אותו למסכים קטנים יותר. במסכים קטנים אובייקטים שהגדרתם במרחקים של אחוזים ישמרו על היחס שהצבתם אותם בו ואתם תצטרכו לעשות פחות שינויים. אם תקפידו על האחוזים אתם תצטרכו לייצר פחות breakpoints ותעשו לעצמכם חיים הרבה יותר קלים.
2. שמירה על פרופורציה של תמונות
כשתעלו תמונה חדשה לממשק אתם תראו שבחלונית שלה מופיע צ׳ק בוקס קסום שרשום עליו "preserve image proportions״. המשמעות של כך היא שהתמונה תשמור על הרזולוציה המקורית שלה ולא תתעוות. אני ממליצה לכם להקפיד שהוא תמיד יהיה לחוץ ובנוסף להגדיר את הרוחב של התמונה באחוזים.
כמו בסעיף הקודם, גם פה האחוזים יסייעו לכם להימנע מ-breakpoints מיותרים וליצור עיצוב שמתרגם טוב לגדלים שונים.
3. אל תמחקו את ה-breakpoint של 768 (אני חושבת לעשות קעקוע מהכלל הזה)
כשאתם פותחים מסמך חדש הוא עולה מראש עם breakpoints של 1920 ו768. כשאני התחלתי לעבוד אני משום מה מחקתי את ה-768. אל תמחקו את הbreakpoints אנשים! כשמחקתי את הרזולוציה של ה768 אני בעצם ביטלתי את הנקודה בה נהוג להתאים את העמוד למובייל.
כשבסופו של דבר הוספתי את הקובץ של עמוד המובייל (וכמובן שהשארתי את זה לסוף) לא הייתה לי נקודת עצירה מתאימה לכך, והתוצאה הייתה שברזולוציות נמוכות העמוד השתנה לגמרי ונראה רע. קיצר, אל תמחקו.
4. תכננו מראש את סדר העבודה שלכם
נכון להיום אי אפשר להעתיק אלמנטים בין עמודים שונים באתר. זה אומר שאם עיצבתם תפריט מפורט למובייל באחד הדפים עם אנימציות ולינקים, כשתצרו דף חדש תצטרכו לייצר את התפריט הזה שוב מאחר ולא תוכלו להעתיק אותו מהעמוד הקודם.
אז מה אפשר לעשות? ניתן לעשות duplicate לדף ולקבל העתק של הדף כולו. במידה והעיצוב של הדפים שלכם שומר על מבנה דומה, תוכלו לעשות duplicate ורק לבצע שינויים קטנים בין הדפים. כך תוכלו לשמור על אלמנטים מורכבים שיצרתם ולחסוך לעצמכם זמן עבודה רב.
5. Mind the gap
כשאתם מעלים טקסטים הם אוטומטית עולים עם padding 10px מסביב אליהם. זה יכול להיות מאוד מועיל אבל גם מאוד מבלבל כשאתם רוצים ליישר אותם לאובייקטים ללא padding. אם אתם רוצים להוריד את ה-padding, אתם יכולים לעשות זאת מחלון ה-style.
6. חלון ה-style ואיפה אתם נמצאים בתוכו
מתחת לאייקון של העיפרון בצד השמאלי של המסך, אתם תמצאו את חלון ה-style. אני מודה שלקח לי זמן לשים לב אליו ולכל מה שהוא מציע. מדובר בחלון סופר שימושי שמאפשר לכם לשנות צבעים, גדלים, פונטים, מיקומים, אפקטים ועוד. כמו שתוכלו לראות בתמונה, כרגע אני נמצאת תחת הגדרת אובייקט, אבל אם בטעות הייתי לוחצת על הלשונית מעליו הייתי בעצם מגדירה את הפרמטרים של האובייקט הזה כשהוא במצב hover.
אני אישית לא כל כך שמתי לב לזה, מה שהוליד מספר לא מבוטל של פעמים בהם לא הבנתי למה ההגדרות שלי לא משנות שום דבר.
7. Align הוא חברכם הטוב ביותר
כשתבחרו 2 אובייקטים או יותר, תפתח לכם האופציה לעשות להם align בתחת חלון ה-options.
ה-align עובד בדיוק כמו שאתם מכירים מ-photoshop/sketch. זו אופציה שיכולה לחסוך לכם המון זמן והתלבטויות.
8. Keep calm and group together
ממש כמו שיש groups בכל תוכנה אחרת שאתם מכירים, אתם יכולים ליצור אותם גם פה.
אם יש לכם אלמנטים שאתם רוצים שתמיד יזוזו יחד, למשל פסקאות שונות שתמיד צריכות להיות מיושרות לשמאל, כשתעשו להם group אתם תגרמו לכך שהם תמיד יזוזו יחד ויהיו בעל מרחק זהה מהקצה.
9. היסטוריית שמירות
בפינה הימנית התחתונה של המסך יש אייקון של שעון. בתוך האייקון הזה יש עולם של קסם.
תוכלו למצוא שם גרסאות של העמוד שלכם מכל השמירות שביצעתם (או שמירות אוטומטיות שהמערכת ביצעה). אם עשיתם טעות או שאתם מתחרטים, פשוט תקפצו שמירה אחת אחורה. איזה כיף.
שימו לב שהשמירה אחרונה היא העליונה ביותר ברשימה ולא התחתונה ביותר.
10. איך להעלות קבצים (סעיף למשתמשי sketch)
מדי פעם הייתי נתקלת בסיטואציה שבה הקובץ שניסיתי להעלות לא עלה. הגעתי לכמה תובנות מכך:
- אם הקובץ שאתם מעלים פתוח ברגע זה ב-sketch זה יכול להוות בעיה, עדיף שתסגרו אותו.
- למרות ש-RapidUI מאפשרים לכם לבחור artboard מתוך הקובץ, עדיין נתקלתי בבעיה כשהיה מדובר בקבצים מאוד גדולים. אני אישית הפרדתי את ה-artboard שרציתי לקובץ נפרד, וזה עזר לי להעלות קבצים בקלות.
- אם הקובץ שלכם עדיין לא עולה, אתם יכולים להסיר ממנו את התמונות על מנת שהוא ישקול פחות ולהוסיף את התמונות לאחר מכן. עבורי השיטה הזו הייתה אפילו יותר נוחה כי כך שלטתי על הגודל והמיקום של התמונות בצורה יותר מבוקרת.
—
מוכנים להתחיל? :)
התנסתם גם עם RapidUI? יש לכם טיפים משלכם? מוזמנים לכתוב לנו בתגובות.
ואל תמחקו לי עכשיו את הברייק פוינט של 768!
