فرآیند طراحی وب سایت در 7 مرحله
طراحی وب مانند دویدن در ماراتن است. شما به طور مداوم طراحی خود را بهبود می بخشید تا زمانی که به اوج برسید و مشتری راضی از شما استقبال کند.
موفقیت طراحی شما بستگی به این دارد که چگونه عناصر – خطوط، فونت ها، رنگ ها و بافت ها – را برای برقراری ارتباط با هدف یک تجارت ترکیب کنید. توجه به جزئیات در هر بخش از فرآیند بسیار مهم است!
این 7 مرحله توضیح می دهد که برای به پایان رساندن مسابقه باید روی چه چیزی تمرکز کنید.
برای درک انتظارات مشتری، ابتدا به نمونه‌هایی از وب‌سایت‌هایی که در خلاصه‌شان ارائه می‌دهند نگاه کنید. یک عکس می تواند بیش از 1000 کلمه را بیان کند.
- اما سخنان مشتری را فراموش نکنید، آنها از اهمیت کمتری برخوردار نیستند. من به دنبال عبارات کلیدی در رزومه هستم که هدف شرکت را توصیف می کند:
ما طرحی می خواهیم که دارای حس هنری باشد، اما استفاده از آن آسان باشد و کار با عناصر دیگر در وب سایت آینده دشوار نباشد.
سپس کلمات کلیدی را وارد کنید که به من کمک می کند تا در مسیر خود نگه دارم:
- احساس هنری
- آسان و سریع برای استفاده
- تغییر آن دشوار نخواهد بود
- عناصری که توجه شما را جلب می کند
- ناوبری “معمولی” که امکان دسترسی سریع به محتوا را فراهم می کند
- بیشتر مطالب در صفحه اصلی
برنامه ای که استفاده می کنید به نتایج بصری ای که می خواهید به دست آورید بستگی دارد. در Fire Exit Theatre من می‌خواستم یک حس بافتی خشن با نقص داشته باشم.
برای این نوع پروژه ها من همیشه فتوشاپ را انتخاب می کنم زیرا برای ایجاد الگوها، استفاده از تکنیک های مختلف پوشش و نقاشی با ماسک بهترین است.
پس از انتخاب برنامه خود، به الزامات فنی مشتری از خلاصه نگاه می کنم:
- ما می خواهیم سایت خود را با استفاده از یک شبکه 1140px ایجاد کنیم. به این معنی که طراحی باید فضایی برای فشرده سازی تا 960 (برای صفحه نمایش 1024 x 768) داشته باشد.
برای منابع عالی طراحی وب، شبکه 1140 CSS را بررسی کنید!
یک شبکه به قابلیت استفاده و خوانایی کمک می کند که در طراحی وب سایت اولویت دارند. در این پروژه من یک ابزار کاربردی ایجاد کردم:
- ساختاری با سرفصل های بزرگ ایجاد کنید
- با استفاده از یک شبکه روزنامه مانند تقسیم بر خطوط نقطه چین
ایجاد طرحی که برای شما و مشتریانتان مناسب باشد، کار سختی است. طراحی وب سایتی که بیش از حد شخصی باشد (معمولا) اشتباه است.
اما یک قانون اساسی وجود دارد که باید از آن پیروی کنید – اگر طرح خود را دوست دارید، به احتمال زیاد دیگران نیز چنین خواهند کرد.
به عنوان یک طراح حرفه ای، مهم است که عناصر خاصی را که انتخاب می کنیم، مانند بافت ها، تصاویر، آیکون ها، فونت های وب و غیره دوست داشته باشیم.
ترفند این است که این عناصر را به گونه ای پیاده سازی کنیم که اهداف و انتظارات مشتری را نیز برآورده کند.
ارائه یک تصویر عالی معمول است، اما اگر با احساس کلی وب سایت مطابقت ندارد، آن را برای پروژه دیگری ذخیره کنید.
اگر نمی توانید خود را مجبور به خلاص شدن از شر گرافیک کنید، با آن بازی کنید تا زمانی که آن را درست انجام دهید.
به عنوان مثال، من یک عکس از یک کبریت در حال سوختن در iStockphoto خریدم و بخش هایی از تصویر پس زمینه را جدا کردم، سپس سایه ها و هایلایت ها را اضافه کردم.
خوشبختانه برای من مشتری آن را دوست داشت، اما اگر این کار را نمی‌کردم، ایده بزرگم را به آنها می‌گفتم: «بعد می‌بینمت».
Top of Form
بازنویسی مجدد (همین منابع اما متفاوت با سری قبل)
Bottom of Form
شما فقط برای خود و مشتری طراحی نمی کنید، بلکه برای چندین بیننده طراحی می کنید – از مخاطبان هدف و عملکرد وب سایت به عنوان یک کل آگاه باشید.
به عنوان مثال، آتش نشانی یک سازمان برای انواع مختلف افراد است، بنابراین باید نوعی بی طرفی فرهنگی داشته باشد. کارکرد اساسی آن اشتراک گذاری عملکردهاست. فروش بلیط و نمایش پوستر.
یک راه خوب برای به دست آوردن طراحی مناسب، ایجاد چندین نسخه است. من اغلب مدل طراحی می کنم.
از سرگرم کننده تا جزئیات در نسخه اول برای سالن فرار از آتش من انتخاب می کنم از کیفیت استفاده کنم “بی نظیر” و سپس کنار گذاشتن برخی از عناصر تا ظریف تر به نظر برسد
نسخه 1:
نسخه 2:
آخرین نسخه:
بعد از یکی دو روز از ایجاد اولین مفهوم، متوجه نقاط ضعف آن شدم و روی بهبود آنها کار کردم. فضاهایی که به صفحات اجازه گسترش عمودی را می داد حذف شد.
برای بهبود جریان اطلاعات، از یک شبکه روزنامه مانند و یک راه حل ارگونومیک تر برای متن استفاده کردیم (مناطق روشن تاریک هستند).
همانطور که می بینید طراحی نهایی شفافیت بیشتری به ماموریت شرکت داد که رضایت مشتری را جلب کرد. بار دیگر، مهم است که به اولین نقاشی وابسته نشوید و آن را رها نکنید.
به دنبال راه هایی برای ایجاد شگفتی و کنتراست در طراحی نهایی باشید. بسیاری از بینندگان در وب سایت هایی می مانند که شامل ترفندهای ساده – ایده های الهام بخش، الگوهای شگفت انگیز و تضادهای زیبا هستند.
در Fire Exit Theatre من کاغذ و آتش را با هم ترکیب کردم زیرا تنش دراماتیکی شبیه یک فیلم دراماتیک ایجاد کرد.
این ترکیب نشان می دهد که روزنامه آتش می گیرد در حالی که آتش چشم بیننده را به سمت نام شرکت هدایت می کند: EXIT.
تاثیر شما باید واضح، قانع کننده و غافلگیر کننده باشد. در این مورد، یک تطابق عظیم به طرح ضریب تغییر داد.
اما برای ایجاد یک جلوه شگفت انگیز نیازی به “آتش زدن طرح خود” ندارید – می توانید جلوه های کوچک اضافه کنید. در این حالت یک افکت نور به نورها اضافه کردم.
در مقابل، من با بافت هایی شبیه به پرنده بازی کردم.
همانطور که می گویند پس از طوفان آرامش فرا می رسد. شما ماکت‌هایی با طراحی جامد ساخته‌اید، و اکنون زمان آن است که همه چیز را آرام کنید و همه آنها را جمع آوری کنید.
کلاینت احتمالاً با هر عنصری که شما جاسازی کرده اید شناسایی نمی کند. باید چیکار میکردی؟ عناصر را حذف کنید.
برای مثال، نورافکن‌های تئاتر و چوب کبریت کاملاً دراماتیک بودند، بنابراین تصمیم گرفتم عناصر دیگر طراحی را ظریف‌تر نگه دارم.
همانطور که می بینید، من به جزئیات از انتخاب آبنمای مناسب تا انتخاب پس زمینه عالی اهمیت زیادی می دهم.
فقط وقتی خط پایان را می بینم، دلیلی برای کاهش سرعت وجود ندارد – مهم است که طراحی کلی را تغییر داده و نهایی کنید.
مثلاً دلم می‌خواهد تاریکی را خاموش کنم.
همچنین نوار افقی را با کمرنگ کردن سایه‌های خاکستری شهر و افزایش کنتراست در اطراف متن «بلیط» بهبود دادم.
و زمانی که به نظر می رسید همه چیز انجام شده بود، 3 بار به عقب برگشتم و به طرحم نگاه کردم و فکر کردم “اینجا چه چیزی کم است؟” و بله، احساس کردم چیزی کم است – در این مورد ناخن ها.
و بالاخره این عمل برای من پیروزی به ارمغان آورد! من در مسابقه برنده شدم و دیدم که در سایت مشتری اجرا شد. همچنین در مسابقه طراحی “You Platypus” و 9 نفر برتر در سال 1999 به نمایش درآمد.
شما همچنین می توانید این پاداش ها را در صورت تمرین، تمرین، تمرین این 7 مرحله دقیق به دست آورید.
نکته یا سوالی دارید؟ سوال بپرس
بدون دیدگاه