20 تکنیک مهم در طراحی وب سایت

شنبه 2 شهريور 1392

سال گذشته را باید سال تحول صنعت طراحی سایت نامید، چرا که طراحان وب شاهد رویدادهای تاثیرگذاری در حوزه طراحی وب بودند. در این مقاله سعی شده تا بزرگترین تکنیک های پیش روی صنعت طراحی پرتال را بیان کنیم.
در سال گذشته ما شاهد رویدادهای تاثیرگذاری در حوزه طراحی وب بودیم.
 
در سال جاری نیز این حوزه دستخوش تغییر و تحولاتی شده و پیش بینی می شود که در سال های پیش رو نیز تکنیک ها و رویکردهای جدیدی به منصه ظهور برسد و از آن طرف، برخی شیوه های کنونی از رده خارج و منسوخ گردد.
 
اگر چه هر طراح وب ممکن است سلیقه و روش خاص خودش را داشته باشد اما واضح است که تصمیم گیری های نهایی یک طراح، از فضای کلی اینترنت تاثیر می پذیرد.
 
در این مقاله قصد دارم به 20 تکنیک مهم در فضای کنونی طراحی وب اشاره کنم.
 
کوشیده ام کمابیش برای هر بخش حداقل یک مثال بزنم تا خواننده، موضوع را به طور ملموس تری درک کند.
 
1. طراحی پاسخگو
 
طراحی پاسخگو (Responsive design) در حال تبدیل شدن به یک وزنه قابل اعتنا در عرصه طراحی وب است.
 
هدف از این شیوه، پشتیبانی از تمام دستگاه های مورد استفاده کاربران است؛ از رایانه های رومیزی و لپ تاپ ها گرفته تا گوشی های هوشمند، تبلت ها و هر دیوایسی که در آینده ساخته می شود.
 
این شیوه را به نوعی می توان یک دست کردن طراحی وب دانست که هدفش، داشتن یک مجموعه واحد از کدهایی است که در تمام محیط ها به خوبی کار می کند.
 
به هنگام سخن گفتن از «طراحی پاسخگو» معمولاً مرورگرهای موبایل به ذهن می آید ولی این، تنها بخشی از ماجراست.
 
 
به عنوان مثال شما با استفاده از طراحی پاسخگو می توانید تصاویر و گرافیک های مختلفی به صفحه بیافزایید، حتی هنگامی که نمایشگر کاملاً بزرگی روبروی شماست.
 
هدف اصلی آن است که طراحی وب سایت ها به صورت یک فرایند واحد درآید.
 
توسعه دهندگان با استفاده از مدیا کوئری های CSS3 – نسل جدید CSS – می توانند با توجه به محدودیت ها یا انتظارات برخاسته از وضعیت واقعی صفحه نمایش، طراحی های خود را سفارشی کنند.
 
2. پشتیبانی از رتینا
 
به نظر می رسد تعداد کسانی که خواهان استفاده از نمایشگرهای مجهز به رتینا (Retina) باشد، در حال افزایش است.
 
اپل مبدع این فناوری است و آن را در سال 2010 با ورود آیفون 4 به همگان معرفی کرد.
 
اکنون رتینا به دیگر محصولات اپل از جمله آیپد و برخی مک بوک ها نیز راه پیدا کرده است.
 
تراکم پیکسل ها در نمایشگرهای رتینا، به طور متوسط دو برابر نمایشگرهای ال سی دی معمولی است.



 
البته تعداد فیزیکی پیکسل ها در این دو نوع نمایشگر یکسان است ولی از لحاظ دیجیتالی رتینا قابلیت مضاعفی دارد.
 
به عقیده نگارنده، این بدان معناست که آن دسته از طراحان وب که می خواهند وب سایت هایشان در هر دو نمایشگر به خوبی دیده شود، باید دو سری تصویر ایجاد کنند: تصاویری برای نمایش در نمایشگرهایی با رزولشن بالا، و تصاویر بزرگتری برای نمایشگرهای رتینا.
 
یکی از ابزار مورد علاقه من در طراحی پاسخگو retina.js است.
 
این سایت شامل یک کتابخانه جاوااسکریپت برای سازگاری خودکار تصاویر جهت نمایش در نمایشگرهای رتینا است.
 
3. سربرگ های ثابت
 
استفاده از خاصیت position: fixed در CSS، راهی عالی برای قرار دادن یک نوار بالا (Header Bar) در سایت به شمار می رود.
 
هنگامی که کاربران به سمت پایین اسکرول می کنند، می توانند گزینه های ناوبری را در قسمت بالایی صفحه همچنان مشاهده کنند و در نتیجه – به عنوان مثال – خیلی راحت به صفحه اصلی (home page) بروند.
 

 
امروزه استفاده از سربرگ های ثابت (Fixed header) بسیار پرطرفدار شده است زیرا در هر سایتی می توان آنها را به کار گرفت؛ از جمله در شبکه های اجتماعی، وبلاگ ها و حتی سایت های متعلق به استودیوهای طراحی یا شرکت های خصوصی.
 
جدا از مقوله زیباشناسی مربوط به استفاده از سربرگ های ثابت، این تکنیک از آنجا که تجربه ناوبری بهتری در اختیار کاربر قرار می دهد، ارزشمند است و قابل اعتنا.
 
 
4. تصاویر بزرگ در پس زمینه
 
عکاسان حرفه ای و یا حتی کسانی که به صورت آماتوری به مقوله عکاسی علاقه دارند، این شیوه طراحی را بسیار می پسندند.
 
این رویکرد یک شیوه تجربه شده برای جلب نظر کاربران به شمار می رود و در این خصوص کاملاً موفق عمل کرده است.
 

 
من به شخصه عاشق این عکس های بزرگ و باکیفیت هستم چون واقعاً چشم ها را نوازش می دهد.
 
اگر این تکنیک را در طراحی سایت خود به کار گیرید، متوجه می شوید که سایت شما بین رقبای تان قدری متمایز و متفاوت دیده می شود.
 
من در این خصوص همیشه طراحی های Kerem Suer را تحسین کرده ام.
 
5. تصاویر شفاف با استفاده از CSS
 
امروزه در طراحی صفحات وب، استفاده از تصاویر شفاف که اصطلاحاً Transparency نامیده می شود، امری مرسوم است.
 
در واقع یکی دیگر از امکاناتی که CSS در اختیار طراحان سایت ها قرار می دهد، کنترل داشتن بر میزان شفافیت تصاویر و عناصر موجود در صفحه است.
 
عنصر استانداردی که برای ایجاد لایه های شفاف در CSS تعریف شده، Opacity نام دارد که به معنای حالت تار و کدر بودن است.
 

 
اگر بخواهیم در این خصوص مثالی بزنم می توانم به وبلاگ Squarespace اشاره کنم.
 
در صفحه (Wrapper) مرکزی سایت background: transparent به کار رفته است.
 
یکی دیگر از شیوه های جالب ایجاد شفافیت در تصاویر، استفاده از RGBA در CSS3 است.
 
RGBA سرواژه red green blue alpha است.
 
به هنگام طراحی با CSS شما از قابلیت انتخاب مقدار شفافیت رنگ های قرمز، سبز، آبی و آلفا برخوردارید.
 
لذا با استفاده از کد rgba(255,255,255,0.6) می توانید رنگ سفید با تیرگی 60 درصد ایجاد کنید.
 
6. صفحه فرود ساده
 
واضح است که فروش در اینترنت کاری سهل و ممتنع است، یعنی شما علاوه بر این که می توانید به انبوهی از مخاطبان و مشتری های بالقوه دسترسی داشته باشید، قادرید محصولات غیرفیزیکی نظیر فیلم و نرم افزار را نیز به علاقمندان بفروشید.
 
از سوی دیگر قضیه به همین سادگی هم نیست و با توجه به رقابت های شدیدی که در این خصوص بین سایت ها و شرکت ها برقرار است، «جلب نگاه کاربر» به یک مقوله پیچیده، فنی و چندوجهی تبدیل شده است.
 

 
امروزه هم و غم طراحان در ساخت صفحات فرود (Landing Pages) عبارت است از کشاندن نگاه کاربر به محصول یا سرویسی که برای فروش عرضه شده است (و در واقع بن مایه سایت را تشکیل می دهد).
 
حال و هوای کنونی طراحی وب به سمت مینی مالیسم (minimalism) یعنی سادگی و دوری از روش های پیچیده تمایل دارد.
 
این روش می گوید: همه چیز را ساده برگزار کنید و بر محصول اصلی تمرکز نمایید.
 
سایت PictoPro نمونه خوبی در این خصوص به شمار می رود.
 
اگر چه بخش اعظم پس زمینه صفحه به ارائه آیکون های زیبای وکتور اختصاص یافته است ولی متن ها به راحتی خوانده می شود.
 
فرایند خرید نیز تنها با یک کلیک انجام شدنی است.
 
دیگر از این ساده تر نمی شود!
 
7. کیوآر کدهای دیجیتالی
 
وفور گوشی های همراه هوشمند، استفاده از اپلیکیشن های قرائت گر QR Code را شدت بخشیده است.
 
این واژه مخفف Quick Response Code بوده و روشی است برای کدگذاری مطالب مختلف که حاصل آن یک تصویر است.
 

 
این تصویر برای اکثر گوشی های دوربین دار قابل فهم و رمزگشایی است و به همین دلیل شرکت های زیادی بر روی محصولات خود از این کد استفاده می کنند.
 
من پیش بینی می کنم که در در آینده ما با انواع کیوآر کدهای سفارشی، فانتزی، رنگی و جالب توجه روبرو خواهیم شد.
 
8. آیکون های شبکه های اجتماعی
 
بازاریابی پرسود و فروش مطلوب، یکی از شاخص های اصلی تعیین موفقیت یا ناکامی وب سایت ها به شمار می رود.
 
با این حال شبکه های اجتماعی و بازاریابی ویروسی نیز می تواند در میزان فروش شرکت ها کاملاً نقش آفرینی کند.
 

 
شما می توانید در سایت و وبلاگ خود، آیکون های مربوط به شبکه های اجتماعی سرشناس از قبیل فیس بوک، توییتر، گوگل پلاس، لینکدین، پینترسنت و غیره را درج کنید و از مزایای متعدد بده بستان در این جوامع مجازی بهره مند شوید.
 
9. تصاویر پرجزئیات
 
امروزه هدف اصلی طراحی های اینترنتی، جملگی در یک عبارت خلاصه می شود: جلب نگاه کاربر.
 
به نظر می رسد استفاده از تصاویر و گرافیک در قاب های دیجیتالی، می تواند این وظیفه را عهده دار شود.
 

 
دشواری کار در یافتن طراحی است که بتواند به این شیوه تصویرسازی کند، یا کسی که بتواند این رویکرد را به شما آموزش دهد.
 
سایت MailChimp نمونه موفقی در این زمینه است.
 
10. پیمایش بی پایان
 
اگر چه اسکرول بی پایان (Infinite Scrolling) در چند سال اخیر به کار گرفته شده است ولی این تکنیک تقریباً در دو سال اخیر اقبال بیشتری را از سوی طراحان و کاربران شاهد بوده است.
 
به نظر می رسد که در آینده نیز ما با این رویکرد روبرو خواهیم بود.
 

 
پیمایش بی پایان به این صورت است که پاسخ جستجوی شما در سایت، به صورت مداوم بارگذاری می شود و شما با پیمایش صفحه (اسکرول کردن به طرف پایین) می توانید نتایج بیشتر و بیشتری را مشاهده نمایید.
 
سایت پینترست به زیبایی از این شیوه استفاده می کند.
 
سایت تامبلر هم یک مثال عالی دیگر در این خصوص است.
 
11. تصاویر کشویی
 
امروزه استفاده از تصاویر کشویی و دموهای ویدئویی، در محصولات جدید وب کاملاً رایج است.
 
طراحان می کوشند صفحات فرود و راه اندازی را به گونه ای کار کنند که بازدیدکنندگان با مشاهده اطلاعات خوبی که در آنجا درج شده، به سایت جذب شوند.
 

 
من در این خصوص صفحه اصلی سایت MediaFire را مثال می زنم.
 
کل قسمت بالایی صفحه بین یک سری از اسلایدها در چرخش است.
 
هر کدام از این بخش ها اطلاعات خاصی به شما می دهد.
 
از دیگر ویژگی ها و مزایای جالب توجه این روش آن است که در آن، از گرافیک ها و آیکون های بزرگ استفاده می شود.
 
12. پنل های کشویی
 
در دوره یکه تازی فلش (Flash) و اکشن اسکریپت (ActionScript) در فضای وب، سایت های پویا از محبوبیت فوق العاده ای برخوردار بود.
 
اکنون افکت های پویا به JavaScript/jQuery نقل مکان کرده است و همین موضوع بر عملکرد طراحان وب نیز تاثیر گذاشته است.
 
بر این اساس احتمالاً در آینده شاهد اقبال طراحان به پنل های کشویی خواهیم بود.
 
CaptainDash سایت ویژه ای نیست ولی اگر شما در ناوبری خود در این سایت، بر بخش های مختلف آن کلیک کنید، در می یابید که هر صفحه در یک صفحه جایگزین شونده که از چپ به راست ظاهر می شود، بارگذاری می گردد.
 
البته افکت های پویا - از این قبیل – ممکن است بعضاً در ابزار همراه به خوبی کار نکند، ولی اگر شما بتوانید این روش را با «طراحی پاسخگو» همراه کنید و یا یک نسخه موبایلی برای سایت بسازید، در کارتان موفق خواهید بود.
 
 
13. ناوبری دوحالته
 
هنگامی که از «طراحی پاسخگو» سخن گفته می شود، یکی از چالش برانگیزترین سوال ها این است که چگونه ناوبری خوبی در اختیار کاربران قرار دهیم.
 
از یک طرف شما مایل هستید بازدیدکنندگان سایت دسترسی مستقیمی به لینک های مهم داشته باشند و از سوی دیگر نمی خواهید صفحه را با انبوه اطلاعات پر کنید، به گونه ای که خواندن مطالب با زحمت و مشقت همراه شود.
 
یکی از ایده های مطرح در این خصوص آن است که عناصر ناوبری پاسخگو (Responsive Navigation) را تا زمانی که نیازی به آن پیدا نشده، مخفی کنید.
 
این نوع طراحی زیبا آرام آرام در حال ورود به منوهای دو حالته (Toggle) دستگاه های موبایل است.
 

 
وبلاگ Treehouse یک نمونه ارزنده در این رابطه است که علاوه بر رایانه ها، در گوشی های هوشمند نیز نمای چشم نواری دارد.
 
یکی از قابلیت های جالب توجه منوهای دوحالته آن است که شما می توانید آنها را به اشکال و صورت های مختلف در آورید؛ مثلاً منوهای کشویی که از بالا به پایین باز می شود، یا منوهایی که از چپ به راست یا برعکس حرکت می کند.
 
14. نوشته نگاری به صورت تمام صفحه
 
پیشتر در مورد فواید استفاده از تصاویر بزرگ در پس زمینه صحبت کرده ام.
 
این قضیه در مورد نوشته نگاری (Typography) نیز صادق است.
 
استفاده از نوشته نگاری در طراحی وب یعنی شما حروف و متون را به گونه ای مورد استفاده قرار دهید که تمام سایت را پر کند.
 
هر چند ممکن است عده ای، این شیوه را قدری آزاردهنده و مزاحم تلقی کنند ولی اگر در طراحی، از متن های کاملاً بزرگ – به گونه ای صحیح و حرفه ای - استفاده شود، مشکلی پیش نمی آید.
 
ایده ای که پشت سر این ماجرا قرار دارد، معتقد است که نوشته های بزرگ با فونت های خاص و منحصر به فرد، می تواند به اندازه عکس های بزرگ، چشم ها را به سمت خود جلب کند.
 

 
یک نمونه خوب، سایت Alex Pierce است.
 
نوشته نگاری در این سایت کاملاً برجسته و در دید است.
 
متن ها هم با استفاده از قابلیت های CSS3 دارای افکت های خاصی شده اند.
 
هر چند بسیاری از بخش های این سایت، کاملاً بزرگ هستند ولی ناوبری در آن آسان و راحت است.
 
15. APIها و نرم افزارهای متن باز
 
چندین دهه از حضور مفهومی به نام متن باز (Open Source) در اینترنت می گذرد؛ پدیده ای که از همان ابتدا انقلابی در تعاملات وب پدید آورد.
 
انتظار می رود ما در زمینه ویجت های صفحات وب، طراحی و افکت های پویا (Dynamic Effects) با نرم افزارهای متن باز بیشتری روبرو شویم؛ چیزهایی همانند وردپرس.

 
طراحان با استفاده از منابع متن بازی همچون سایت Github می توانند علاوه بر طراحی های پروتوتایپ (پیش نمونه)، در کارهای خود از انیمیشن و افکت های مختلف نیز استفاده کنند.
 
تا کنون تعداد بی شماری از نسخه های جی کوئری (jQuery) از اینترنت دانلود شده است.
 
16. جعبه های سایه دار و سه بعدی
 
با استفاده از box shadow در CSS می توان یک جعبه (باکس) سایه دار و سه بعدی ایجاد کرد.
 
بدین معنا که با این قابلیت، جلوه ای سایه مانند به صورت سفارشی شده، به یک عنصر اختصاص می یابد.
 
انتظار می رود در ماه ها و سال های آتی، این ویژگی را در وب سایت های مدرن بیشتری شاهد باشیم.
 

 
این افکت، به نوبه خود تاثیرگذار و چشم نواز است و اگر در استفاده از آنها زیاده روی نشود، کاربردی است.
 
این در حالی است که در سال های گذشته، تولید چنین افکتی کار بسیار دشواری به شمار می رفت زیرا تولید آن مستلزم استفاده از جاوااسکریپت یا برخی قابلیت های فتوشاپ بود.
 
اکنون به آسانی و فقط با چند خط در CSS می توان جعبه های سایه دار ایجاد کرد.
 
17. انیمیشن با استفاده از CSS3
 
اکنون طراحان به وسیله خاصیت transition و دیگر قابلیت های CSS می توانند افکت های انیمیشن و متحرک سازی اجزا را به صفحات اینترنتی اضافه کنند.
 

 
این قابلیت تا حدودی مشابه جاوااسکریپت است.
 
18. ناوبری عمودی
 
من به شخصه طرفدار دو آتیشه ناوبری عمودی (Vertical Navigation) نیستم ولی در سال های اخیر سایت های مختلفی را دیده ام که از این تکنیک استفاده کرده اند.
 
با این حال اگر ناوبری عمودی به گونه ای زیبا و حرفه ای انجام شود، می تواند در کنار محتواهای فراوان و قابل اعتماد، حرفی برای گفتن داشته باشد.
 

 
سایت Riot Industries الگوی خوبی برای آماتورهای طراحی وب است.
 
کارکرد لینک های ناوبری را در این سایت مشاهده کنید و ببینید که عناصر مختلف صفحه چطور به طور پویا، شناور هستند.
 
همچنین کناره متن ها بین دو خط ستون های چپ و راست، متمایز و تقسیم شده است.
 

 
این نوع افکت متنی، در برخی سایت های دیگر همچون سایت گالری CSS Design Bombs نیز مشهود است.
 
19. رویکرد Single-Page
 
در این شیوه، تنها یک صفحه به کاربر نمایش داده می شود.
 
در واقع به هنگام کار با بخش های مختلف سایت، صفحه مورد نظر به بارگذاری مجدد نیاز ندارد و عناصر موجود در صفحه یک جا به کاربر نشان داده می شود.
 
بدیهی است که از همان ابتدای تولد شبکه جهانی وب، شیوه Single-Page نیز مطرح بوده است اما در سال های اخیر این قضیه شدت بیشتری به خود گرفته است.
 

 
به عقیده من طراحی سایت Cage App یکی از بهترین مثال هایی است که می توان تکنیک های مختلفی را که در این مقاله به آنها اشاره کردم، در آن بیابیم.
 
به عنوان مثال در بالای صفحه، تصاویر مات و محو کار شده است.
 
با اسکرول کردن به طرف پایین، نوار ناوبری در جای خود یعنی در بالای پنجره ثابت می ماند.
 
 20. طراحی دایره ای
 
طراحی دایره ای (Circular Design) تکنیک نسبتاً جدیدی است که توانسته نگاه های بسیاری را به سمت خود بکشاند.
 
اصولاً طراحان، دایره را دوست دارند زیرا از یک سو ساده است و نمادی از حرکت پیوسته، و از سوی دیگر با بسیاری از طرح ها تناسب و سازگاری دارد.
 
شما می توانید عناصر و الگوهای سایت خود - مانند آواتار کاربر، دکمه های به اشتراک گذاری، تاریخ پست ها و غیره - را در اشکال مدور ثابت کنید.
 

 
سایت Lucia Soto یک نمونه زیبا و چشمگیر از طراحی دایره ای در وب محسوب می شود.
 
در سایت Site Optimizer نیز می توانید همین قضیه را شاهد باشید.
 
کاربران با مراجعه به بخش های مختلف سایت که به شکل مدور طراحی شده، می توانند نسبت به سرویس هایی که سایت ارائه می کند، اطلاعاتی کسب کنند.
 
سایت vector نیز مکان خوبی برای یافتن وکتورهای مورد استفاده در طراحی وب است.
 
سخن پایانی
 
طراحی رابط کاربری، یکی از پیچیده ترین موضوعات در فضای مجازی محسوب می شود.
 
این عنصر به ویژه در طراحی وب سایت ها – که باید ناوبری را سازگار با سبک محتوا پیاده کرد – از اهمیت و ظرافت بیشتری برخوردار می شود.
 
در پایان امیدوارم مطالبی را که در این نوشتار ارائه کرده ام، به کار طراحان وب بیاید و آنها با استفاده از این تکنیک ها بتوانند - در کنار عنصر خلاقیت و ابتکار - طرح های نفسگیری به چشم های کاربران پیشکش کنند.
 


جیک روشلواو
 
تعداد مقالات 1 عدد
مهدی ربیعی
 
تعداد مقالات 78 عدد
       
کپی رایت