چگونگي ايجاد راهنماي سبک طراحي وب
ايجاد وب سايت کار پيچيده اي است و معمولا يک کار فردي نيست. مهم است که اطمينان حاصل شود، که طراحي سازگار و بهينه شده براي رسيدن به اهداف تجاري و ايجاد تجربه هاي لذت بخش براي کاربران است.
يکي از راه هاي اطمينان از اين که تيم طراحي يک سايت در هنگام طراحي بخش هاي جداگانه وب سايت همه چيز را هماهنگ طراحي کنند، استفاده از مستندات طراحي يا راهنماي سبک
طراحي وب است .
مفيد است که يک راهنماي سبک طراحي وب سايت (
Web Design Style Guide) داشته باشيد تا تجربه ي يکپارچه در ميان صفحات مختلف ايجاد کنيد. همچنين کمک مي کند تا اطمينان حاصل شود که توسعه آينده يا توليد شخص ثالث دستورالعمل هاي نام تجاري را دنبال خواهد کرد و به عنوان بخشي از برند کلي در نظر گرفته مي شود.
راهنماي سبک چيست؟
يک راهنماي سبک مجموعه اي از عناصر پيش طراحي شده، گرافيک و قوانين طراحي است که طراحان و توسعه دهندگان بايد براي اطمينان از اينکه قطعات جداگانه وب سايت سازگار هستند و در پايان يک تجربه ي يکپارچه ايجاد مي کنند، از آن پيروي کنند.
چرا مهم است؟
هنگامي که طراحان چندگانه در يک وبسايت بزرگ يا برنامه وب کار مي کنند، بسيار مهم است که اطمينان حاصل شود که آنها بيش از حد تفسير نمي کنند و سبک ها را بر اساس اولويت شخصي تغيير و تنظيم نمي کنند. در توسعه، با تعريف عناصر وب سايت، توسعه دهندگان براي استفاده مجدد از اين عناصر آسان هستند. علاوه بر اين، مي تواند آن را ساده تر کند، زيرا آنها عناصري را که بايد کد گذاري مي کنند، دريافت مي کنند و دقيقا همان چيزي را که از ابتدا بايد در نظر دارند، ببينند.
ايجاد راهنماي سبک طراحي وب
1. مطالعه نام تجاري
اولا شما بايد نام تجاري را مطالعه کنيد تا بدانيد چه چيزي براي آن تعريف مي شود. دلايل نام را جويا شويد ، با مديران اصلي شرکت ملاقات کنيد ، اهداف و ارزش هاي شرکت را بياموزيد. مهم است که به نام تجاري بپردازيد تا راهنماي سبکي که توليد مي کنيد ازنظر بصري و احساسي نماينده شرکت باشد.
2. تايپوگرافي را تعريف کنيد
تايپوگرافي 95 درصد از طراحي وب است.
شما بايد تايپوگرافي درست کنيد زيرا اين يکي از مهمترين ابزار ارتباطي بين بازديدکنندگان و وب سايت شماست.
تعيين سلسله مراتب و شناسايي آن. انواع سرفصل وجود دارد: h1، h2، h3، h4، h5 و h6. سپس کپي بدنه (Body)، تغييرات جسورانه و کلاسيک. در مورد کپي سفارشي که براي لينک هاي کوچکتر، متن مقدم و غيره استفاده مي شود فکر کنيد. ارائه خانواده فونت، وزن و رنگ.
3. پالت رنگ
اين باورنکردني است که چگونه انسان ها رنگ و رنگ هاي مرتبط با مارک هاي شناخته شده را درک مي کنند. مثلا برند کوکا کولا، من شرط مي بندم که شما الان قرمز مي بينيد.
با تنظيم رنگ اصلي براي راهنماي سبک خود که در وب سايت تان قرار مي گيرد، رنگ هاي غالب شامل بيش از سه سايه باشد. با اين حال، در برخي موارد، به منظور نشان دادن رابط کاربر خود، رنگ هاي ثانويه و حتي گران تر نياز خواهيد داشت، همچنين مطمئن شويد که آنها را نيز تعريف مي کنيد. همچنين رنگ هاي خنثي مانند رنگ سفيد، خاکستري و سياه را براي رنگ هاي اصلي نام تجاري براي برجسته سازي انتخاب کنيد.
4. هشدار يا پيغام دوستانه
در نظر بگيريد قبل از شروع راهنماي سبک، نام تجاري را مطالعه کرده ايد و متوجه شده ايد که نام تجاري جوان و مرسوم است. حالا به جاي بيان "خطاي 404، صفحه پيدا نشد" مي توانيد بگوييد "اوه اوه صفحه مورد نظر شما پيدا نشد! " اگر سايت مربوط به يک شرکت خيلي رسمي و جدي باشد، شما اين کار را انجام نمي داديد. توجه کنيد که تمايز و درخشندگي در چيزهاي کوچک پنهان است.
5. Iconography
آيکن ها براي هزاران سال وجود داشته و بزرگتر از متن و کلمات هستند. استفاده از آيکون ها را در پروژه هاي خود بکار ببريد زيرا آنها يک بازديد فوري براي بازديدکنندگان ارائه مي دهند که چه اتفاقي مي افتد و چه اتفاقي خواهد افتاد. چيدن آيکون هاي سمت راست محتواي بيشتري نسبت به پالت رنگ، کپي يا گرافيک را ارائه مي دهد. هنگام استفاده از آيکون، اطمينان حاصل کنيد که در مورد مخاطب هدف، مذهب، تاريخ فکر کنيد، بنابراين از تصورات غلط و سوء تفاهم جلوگيري کنيد. يکي ديگر از موارد ذکر شده، در مورد نام تجاري و ارزش آن فکر کنيد.
6. تصاوير
تصاوير هزاران کلمه را بيان مي کنند. اطمينان حاصل کنيد که وب سايت شامل تصاويري است که سبک و جهت تصاويري را که وبسايت بايد استفاده کند تعيين مي کند. بار ديگر، در مورد ارزش هاي نام تجاري و ماموريت آن فکر کنيد. به عنوان مثال، يک سازمان خيريه آب از تصاوير قابل توجهي برخوردار است که داراي احساسات قوي، علت خوبي است و خواستار احساسات انساني براي آنها هستند که مي توانند به داشتن کالاهاي ضروري مانند آب، غذا، برق و آموزش و پرورش دست يابند.
7. فرم ها
فرم ها وب سايت يا برنامه وب را تعاملي و پويا مي سازند تا کاربر بتواند داده ها را وارد کند و بعد مي توانيد آنها را دسته بندي و تجزيه تحليل کنيد.
اطمينان حاصل کنيد که يک سلسله مراتب را ايجاد کرده ايد که شامل بازخورد احتمالي از فرم ها باشد خطا، پيام هاي هشدار دهنده و پيام هاي موفقيت، از جمله مواردي نظير رمز عبور بسيار ضعيف، ايميل معتبر و پيغام هاي موفقيت ساده مانند "ايميل فرستاده شده است".
8. دکمه ها
دکمه ها ترکيبي از پالت رنگ، فرم ها و پيغام ها است. با استفاده از اين دارايي هاي قبلا ايجاد شده ميتوانيد دکمه ها را جالبتر و هدفمند کنيد
9. فاصله !
چگونه مي توان فاصله را در راهنماي سبک قرار داد؟ بسيار مهم است که فاصله را در نظر بگيريد. مي توانيد فاصله بين عنوان ها، دکمه ها، تصاوير، فرم ها و ساير عناصر تعريف کنيد.
گرفتن فاصله مناسب مهم است زيرا باعث مي شود اصطلاحا" تنفس بيشتري براي عناصر ايجاد شود و استفاده منظم باعث مي شود کار شما ساختار يافته و حرفه اي باشد.
جمع بندي
شما در اولين گام براي
طراحي سايت بايد سبک طراحي را با توضيحاتي که در اين مقاله داديم مشخص نمائيد نقشه راه و تمام جزييات مشخص باشد تا تيم طراحي و برنامه نويسي طبق قوانين سبک طراحي نسبت به ساخت هز بخش از سايت اقدام نمايند در انتهاي کار شما سايتي خواهيد داشت با هماهنگي عالي و يک دست
منبع: www.designmodo.com
ترجمه و تنظيم: سعيد برقيان
www.karsaznet.com