چگونه یک طراحی وب خوب به نظر برسد
طرح خود را متعادل نگه دارید.
طرح خود را با استفاده از شبکه ها تقسیم کنید.
برای طراحی خود حداکثر دو یا سه رنگ پایه را انتخاب کنید.
سعی کنید گرافیک ها به خوبی کنار هم قرار بگیرند.
تایپوگرافی وب سایت خود را بهبود بخشید.
با اضافه کردن فضای سفید در اطراف خود ، عناصر را متمایز کنید.
همه عناصر را به هم وصل کنید.
به نظر می رسد همه و پدربزرگشان (و سگ) این روزها وب سایت دارند. وب روز به روز شلوغ تر می شود ، به همین دلیل که خواندن این مقاله به ده ها وب سایت اضافه می شود. توجه به این امر در بین توده ها سخت و دشوارتر می شود.
طراحی وب سایت در تبریز
نکته حرفه ای
شما نمی توانید طراحی وب شگفت انگیز و بدون اشکال spiffy داشته باشید. امروز فرم های وب زیبا طراحی کنید.
"خوشبختانه" برای ما طراحان ، به نظر نمی رسد که همه بدانند چه چیزی باعث ایجاد یا شکسته شدن یک طراحی وب می شود . در حال حاضر ، طراحی وب تا حدی فرایندی خلاقانه است و به همین دلیل می توان آن را بیشتر از علم نامید. اما از آنجا که ذاتاً رسانه ای برای ارائه است ، برخی از قوانین (یا حداقل اصول) اعمال می شوند. با دنبال کردن برخی از نشانگرهای ساده ، هر کسی باید بتواند طرحی بصری دلپذیر ایجاد کند و یک قدم به شهرت نزدیک شود. خوب، آن را نمی که ساده، و استعداد و تجربه مهم، اما هر کسی می تواند صفحه اصلی خود را به چیزی زیباتر عرض چند دقیقه صرف تبدیل شود.
چگونه طراحی وب خوب به نظر برسد (اینفوگرافیک)
طراحی سایت در تبریز
بنابراین چه چیزی زیبایی را ایجاد می کند؟ فلش نیست. نه اینکه بگوییم فلش فاقد شایستگی است ، اما Flash به تنهایی طراحی را خوب نمی کند. برخی از وب سایت های ناخوشایند Flash در آنجا هستند. همچنین ، لازم نیست یک تصویرگر عالی برای تهیه طرح های جذاب باشد. در عوض ، به طراحی وب به عنوان همزیستی عناصر مختلف نگاه کنید . هیچ عنصر واحدی بیشترین شمارش را ندارد. بلکه ، عناصر باعث می شود یک طراحی خوب به نظر برسد.
1. طرح خود را متعادل نگه دارید.
تعادل همه چیز در مورد این است که اطمینان حاصل شود که طرح شما به یک طرف یا طرف دیگر نمی چرخد. مانند تعادل وزن در دستیابی به تقارن یا عدم تقارن است.
مثال
در گرافیک عنوان در وب سایت تفریق Khoi Vinh در زیر نگاه کنید. من این مثال را از اصول طراحی وب زیبا توسط جیسون بیرد گرفتم. جیسون اشاره می کند که چگونه صلیب به سمت راست ، وزن بصری اضافه شده ای را فراهم می کند که سگ در سمت چپ فراهم می کند. این یک جزئیات کوچک اما جزئی نیست. خودتان را با مخفی کردن صلیب با دست خود ببینید.
این همان چیزی است که ما تعادل نامتقارن می نامیم و این همان تعادل است. اگر به نحوه چیدمان مسائل دقت نکنید ، طراحی به سرعت نامتعادل می شود. شما می توانید وزن بصری یک طرح را از جهات مختلف ، مانند رنگ ، اندازه و اضافه یا حذف عناصر ، دستکاری کنید. اگر می خواستید صلیب را بسازید ، مثلاً پرتقالی پر جنب و جوش ، سنگین تر می شود و شاید دوباره طرح را از حالت تعادل خارج کنید. دستیابی به تعادل نامتقارن یک ماده ظریف است که برای تنظیم دقیق و چشمی آموزش دیده ، زمان زیادی لازم دارد.
شرکت طراحی وب سایت در تبریز
در زیر مثال دیگری از توازن متقارن ، توسط بیست و یکم آورده شده است . اگرچه گرافیک هدر به صورت نامتقارن متعادل است (آیا می توانید نحوه انجام آن را تشخیص دهید) ، اما بقیه طرح های پایین به پایین دارای ستون های متقارن هستند. تعادل نامتقارن ممکن است برداشتن آن سخت تر باشد اما تمایل دارد طراحی را بازیگوش تر کند.
طراحی فروشگاه انترنتی در تبریز
خواهید فهمید که هر طرحی که فکر می کنید خوب است ، یک توازن به خوبی ساخته شده در زیر آن دارد. و هر طرحی که در اینجا نشان داده می شود در هر 7 اصل مورد بحث ما امتیاز بالایی دارد. بنابراین یک دقیقه وقت بگذارید تا از بالا و پایین پیمایش کنید و در صورت گذر همه آنها از خودتان ببینید.
2. طراحی خود را با استفاده از شبکه ها تقسیم کنید.
مفهوم شبکه ها ارتباط نزدیکی با تعادل دارند. شبکه ها یک سری از خط کش های افقی و عمودی هستند که به شما کمک می کنند یک طرح را "جابجایی" کنید. به ستون ها فکر کنید. ستونها خوانایی را بهبود می بخشد و باعث می شود محتوای صفحه راحت تر جذب شود. فاصله گرفتن و استفاده از Rule of Thirds (یا همان نسبت طلایی مشابه ) همه چیز را روی چشم آسانتر می کند.
به عنوان مثال Rule of Thirds and Golden Ratio به همین دلیل است که نوارهای کناری معمولاً حدود یک سوم از عرض صفحه هستند و چرا منطقه اصلی محتوای تقریباً برابر با عرض طراحی تقسیم شده با 1.62 است (مساوی phi در ریاضیات). ما نمی خواهیم به این دلیل بپرسیم ، اما به نظر می رسد در عمل صادق است. همچنین به همین دلیل است که سوژه در عکس های گرفته شده حرفه ای معمولاً نه در وسط بلکه در تقاطع یک شبکه نه مربع خیالی (سه به سه ، با دو خط افقی و دو خط عمودی) قرار می گیرد.
مثال
این شبکه به ویژه به طراحی های مینیمالیستی وام می دهد. 5 سی و یک توسط Derek Punsalan نشان می دهد که چرا:
در حالی که طراحی به خودی خود از نظر بصری چشمگیر نیست ، ساختار دقیق و دقیق المان ها باعث می شود تا روی چشم آسان شود. ستون سمت چپ تقریباً دو برابر اندازه نوار کناری سمت راست است ، که فقط منطقی است و چیزی است که باید هنگام ایجاد طرح های خود به آن فکر کنید.
3. حداکثر برای طراحی خود دو یا سه رنگ پایه انتخاب کنید.
اگر قرمز رنگ قرمز را در وب سایت The First 20th (در بالا) به رنگ سبز آهک تغییر دهید ، چه می کنید؟ خوب به نظر می رسد؟ به احتمال زیاد اینطور نیست. زیرا به همان پالت رنگی تعلق ندارد (و البته سبز آهک ساده ترین رنگ برای کار با آن نیست). وب سایتهایی مانند ColourLovers به دلایلی وجود دارد. شما فقط نمی توانید رنگ های خود را به سبک Rambo ، اسلحه ها را انتخاب کنید. برخی از رنگ ها به خوبی کنار هم قرار می گیرند ، برخی دیگر اینگونه نیستند. بسیاری از تئوری ها در مورد رنگ ها و ترکیب آنها وجود دارد ، از جمله آن می توان به قراردادهایی درمورد طرح های تک رنگ و متضاد اشاره کرد ، اما چیزهای زیادی به عقل سلیم و احساس نسبت به آن می رسد.
برای خودتان بفهمید که چگونه با هم کار می کنند. تا حد امکان بسیاری از وب سایت ها مانند نمونه هایی که در هر یک از بسیاری از وب سایت های ویترین CSS نشان داده شده است (مانند بهترین گالری وب ) را خیس کنید تا احساس چگونگی تعامل رنگ ها با یکدیگر را بدست آورید. دو یا سه رنگ پایه را حداکثر برای طراحی خود انتخاب کنید و سپس از رنگ های روشن (که سبک تر هستند ، با رنگ سفید مخلوط کنید) و سایه ها (که تیره تر است ، با سیاه مخلوط کنید) از این رنگ های پایه استفاده کنید تا در صورت لزوم پالت را گسترش دهید.
انتخاب رنگ های زیبا به همان اندازه انتخاب رنگ های مناسب (یعنی رنگ های مناسب برای کار) مهم است. طراحی وب برای یک رستوران کوچک دنج می تواند به خوبی با رنگهای "خاکی" انجام شود: قرمز ، قهوه ای و غیره. هر رنگ پیامی را ارسال می کند ، و حق شماست که پیام را درست دریافت کنید.
مثال
وب سایت Bence Kucsan دارای سبک طراحی خاص خود است. عمدتا تک رنگ است (رنگ و سایه یک رنگ) و رنگی (سیاه و سفید) با رنگ (قرمز) برای برجسته کردن:
سیاه و سفید شیک و حرفه ای را نشان می دهد ، در حالی که رنگ قرمز ادویه ای را اضافه می کند که باعث می شود عناصر خاصی از آن استفاده کنند و طرح را از نگاه کسل کننده نکشید. البته بیش از رنگ قرمز این طرح را جالب می کند. به هر حال ، یک شرکت به طور خاص این سبک را محبوب کرد.
صحبت از رنگ ، WebDesigner Wall توسط نیک لا سعادت محض است:
همه آن پاستیل های نرم این طرح را درخشان می کنند. در نگاه اول ، انتخاب های رنگی ممکن است کمی دلخواه به نظر برسند ، اما وقتی از نزدیک نگاه می کنید متوجه یک پالت رنگی کاملاً تعریف شده می شوید که برای اطمینان از خوب بودن همه عناصر ضروری است. این وب سایت ، و به ویژه پیش زمینه آن ، همچنین ترکیب خوبی از رنگ ها و گرافیک ها را نشان می دهد ، که ما را به شماره چهار تبدیل می کند ...
4- سعی کنید که گرافیک ها به خوبی کنار هم قرار بگیرند.
خوب ، طراحی عالی نیازی به گرافیک فانتزی ندارد. اما گرافیک ضعیف قطعاً به یک طراحی آسیب می زند. گرافیک ها به پیام تصویری اضافه می کنند. وب سایتهایی مانند WebDesigner Wall دارای تصاویر برجسته ای هستند ، در حالی که سایر سایت ها کم ارزش هستند.
مثال
تیم ون دامم تنها تعداد کمی از گرافیک را در وب سایت خود Max Voltar استفاده می کند ، اما او آنها را با بیشترین فکر و مراقبت پیاده سازی می کند. تصویر پس زمینه غیر مزاحم و تاج پیچیده دو مورد از این گرافیک ها هستند. از لحاظ بصری ، آنها بیش از حد چشمگیر نیستند ، اما همه به ظاهر و احساس وب سایت می افزایند و هیچ جا جای آن نیست.
مدتی است که مکس ولتار طراحی متفاوتی از آنچه در بالا نشان داده شده است. اما به مدت دو ماه که این یکی آنلاین بود ، به راحتی یکی از موارد مورد علاقه من بود. به همین دلیل و به دلیل استفاده از آن از گرافیک بسیار مثال زدنی است ، من آن را نسبت به آخرین نسخه انتخاب کردم.
Rogie King's Komodo Media از لحاظ گرافیکی بسیار سنگین تر است ، کاملاً از نظر فنی و موضوعی.
شما ممکن است تصویرگر یا عکاس خوبی نباشید ، اما این بدان معنی نیست که نمی توانید گرافیک خوبی را در وب سایت خود قرار دهید. برخی مهارت های اساسی فتوشاپ ، احتمالاً برخی از تصاویر سهام و طعم عالی همه چیزهایی هستند که شما نیاز دارید. سعی کنید گرافیک ها به خوبی کنار هم قرار بگیرند و اطمینان حاصل کنید که آنها سبکی را که مد نظر شماست تجسم می کنند. همه ما با یک توانایی طبیعی یکسان نیستیم. با یادگیری دیگران می توانید مواردی را انتخاب کنید ، اما گاهی اوقات فقط باید استایل را انتخاب کنید که مناسب شما باشد (مانند یک سبک تمیز اگر بزرگترین تصویرگر نیستید).
5- تایپوگرافی وب سایت خود را بهبود بخشید.
هنر نوع موضوعی مشکل است که باید در مورد آن صحبت کنیم زیرا عناصر زیادی را در بر می گیرد. در حالی که می توان آن را به عنوان یک شاخه از طراحی در نظر گرفت ، می توان یک عمر خود را برای تسلط بر همه جوانب آن صرف کرد. این مکان برای ارائه مرجع کامل چاپی نیست ، بنابراین ما بحث خود را محدود خواهیم کرد تا در کوتاه مدت چه فایده ای برای شما خواهد داشت.
تایپوگرافی وب در مقایسه با تایپوگرافی چاپی معلول است . بزرگترین تفاوت عدم کنترل کامل ما بر روی ظاهر نوع در وب ، به دلیل شخصیت پویا آن است. بدیهی است ، رندر پویا نقاط قوت خود را دارد ، اما طراحان وب حداقل در حال حاضر کنترل کمی بر نتایج دارند. فونت های موجود در رایانه کاربر ، تفاوت در رندر مرورگر و پلتفرم و به طور کلی پشتیبانی از subpar در CSS باعث می شود که تایپوگرافی وب یک کار ناامیدکننده و ناامیدکننده باشد. اما در حالی که ممکن است ما برای رسیدن به پتانسیل آن به CSS 3 منتظر تایپوگرافی وب باشیم ، اما اکنون ابزارهایی هم داریم که بتوانیم جالب و مهمتر از همه زیبا به نظر برسیم .
پشته قلم
چندین روش نسبتاً آسان برای بهبود چشمگیر تایپوگرافی وب سایت شما وجود دارد ، که سه مورد از آنها در اینجا می خواهیم. یکی از آنها پشته های قلم است .
پشته های قلم فقط CSS اساسی هستند. آنها به شما امکان می دهند نظمی را که در آن باید فونت ها ارائه شود ، تعریف کنید. به طور دقیق ، ما در اینجا از انواع حروف صحبت می کنیم ، نه قلم ها. برای خلاصه اطلاعاتی در این زمینه مراجعه شود به تایپ فیس جان قهوهای مایل به زرد قلم! = .
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
خاصیت فوق باعث می شود تا نوع "Helvetica Neue" نوع بدن را کپی کند. با این وجود ، لازم است رایانه کاربر آن نوع خاصی را نصب کند. امروزه مکینتاش با Helvetica (Neue) از پیش نصب شده همراه است ، اما اکثر دستگاه های ویندوز این کار را نمی کنند.
زیبایی پشته های قلم این است که شما می توانید "خطاهای سقفی" را تعریف کنید ، به این معنی که هر زمان که یک تایپ تعریف شده از دست نرود ، مرورگر به سادگی به دنبال یک مورد بعدی می باشد. البته این بدان معنی است که طراحی دقیقاً برای همه به نظر نمی رسد ، و به همین ترتیب ما دوباره کنترل خود را از دست می دهیم. اما برای کسانی که نمی خواهند به راه حل دیگری متوسل شوند (مانند تعویض تصویر) ، این بهترین کاری است که CSS خالص در حال حاضر ارائه می دهد (تا روزی که بتوانیم با راحتی از @ font-face استفاده کنیم ).
ویلسون ماینر از پشته فونتهایی که در بالا به آن اشاره کردیم استفاده می کند. Helvetica Neue بهبود Helvetica است. و در حالی که Arial تقریباً بر روی هر رایانه (حداقل در دستگاه های ویندوز و مک) نصب شده است و بنابراین یک انتخاب محبوب برای وب است ، بیشتر طراحان Helvetica را به Arial ترجیح می دهند. به این ترتیب ، شما از هر دو دنیا بهترین استفاده را می کنید: Helvetica برای کسانی که آن را دارند و در صورت وجود Helvetica در دسترس نیست Arial.
جان تان از عناوین قلم جالب دیگری برای عناوین خود استفاده می کند:
body { font-family: baskerville, 'palatino linotype', 'times new roman', serif; }
فقط تعداد نسبتاً کمی از بازدیدکنندگان هدر در Baskerville را مشاهده می کنند ، اما این مشکلی نیست. این ویژگی به شخصیت اضافه می کند در حالی که به کسی که این ویژگی را نرساند صدمه می زند. باز هم ، پشته های قلم یک راه حل عالی نیستند ، اما آنها به شما مزیت می دهند .
اندازه گیری و پیشرو
اندازه گیری طول خطوط است ، و پیشرو ارتفاع (یا فاصله عمودی) خطوط است. در CSS ، اندازه گیری را می توان با تعیین عرض برای جعبه حاوی (به عنوان مثال پاراگراف) کنترل کرد. هر دو بر خوانایی تأثیر می گذارند . اگر خطوط خیلی کوتاه یا خیلی طولانی باشند ، کاربران راحت با خواندن مطالب راحت نخواهند شد. فرد اغلب این مشکل را با طرح بندی مایعات مشاهده می کند . بین 40 تا 80 کاراکتر در هر خط ایده آل به نظر می رسد.
با تعریف line-heightویژگی CSS ، می توان سرب افزاری را افزایش داد (یا کاهش داد) . به طور کلی ، ارتفاع خط 1.5 برای پاراگراف ها به خوبی کار می کند. بدین معنی که وقتی اندازه متن 12 نقطه باشد ، ارتفاع خط 18 نقطه می شود (1.5 × 12) ، که به اتاق اتاق تنفس می دهد .
حلق آویز و گلوله
راه سوم برای بهبود خوانایی ، حلق آویز به نقل از گلوله و گلوله است. به جای ترک متن لیست های بولت و نقل قول ها با تراز پیش فرض ، به صورت افقی آن را با بقیه متن در صفحه تراز کنید .
تیم ون دامم برای آخرین طراحی مجدد مکس ولتار از گلوله های آویز استفاده می کند :
ما خط قرمز را اضافه کرده ایم تا تأکید کنیم که چگونه همه متن به صورت افقی تراز شده است. به سادگی با تنظیم padding-leftویژگی CSS لیست بولت 0، می توانید به همان نتیجه برسید.
بیرون کشیدن نقل قول های معلق از طرف دیگر ، به همین سادگی نیست. بیشتر طراحان برای نشانگرها به تصویر پس زمینه متوسل می شوند و مطابق با آن مطابقت دارند ، همانطور که متیو بوکانان انجام می دهد :
علامت نقل قول معلق در اینجا باعث اختلال در جریان متن نمی شود . این جزئیاتی است که اغلب در آن مورد توجه قرار نمی گیرد اما ارزش سرمایه گذاری را دارد.
قوانینی را چاپ کنید که کاربردی ندارند
چاپ و وب یکسان نیستند. به نظر می رسد کاملاً واضح است ، اما بسیاری از مردم مانند یک رفتار با آنها رفتار می کنند. چاپ ثابت است و وب پویا است. داشتن کنترل کامل بر نحوه طراحی وب شما برای همه غیرممکن است .
ریتم عمودی ، متن توجیهی مناسب (با هیپنوتیزم و بدون رودخانه ) و چیدمان های چند ستونی تنها برخی از ویژگی های چاپ است که تقریباً در وب غیرممکن است. بنابراین ، CSS 3 احتمالاً یک راه حل همه و همه راه حل نخواهد بود و احتمالاً چند سال دیگر می تواند قبل از استفاده کامل از آن باشد. اکنون باید این اختلافات را بپذیریم: به وب به عنوان نسخه آنلاین چاپ نگاه نکنید. در عوض ، از پتانسیل ذاتی وب استفاده کنید.
کلمه ای در مورد جایگزینی تصویر
در مورد جایگزینی تصویر (تکنیک تعویض فونت ها با تصاویر) چطور؟ ما در مورد پشته های فونت صحبت کرده ایم ، اما آیا آنها نسبت به جایگزینی تصویر پایین نیستند؟ خوب ، این به آنچه شما فکر می کنید مهمتر است بستگی دارد: قادر به نمایش قلم دقیق مورد نظر خود یا داشتن محتوای پویا ، در دسترس و دوست داشتنی برای سئو؟ برخی از تکنیک های جایگزینی تصویر بسیار پیشرفته شده اند ، اما هنوز هم به اندازه متن ساده انعطاف پذیر نیستند. جایگزینی تصویر به خوبی به هدر و گزیده ها کمک می کند ، اما به سختی راه حلی برای متن بدن نیست.
6. با اضافه کردن فضای سفید در اطراف خود ، عناصر را از هم متمایز کنید.
فضای سفید یا فضای منفی با آنچه در آنجا نیست ارتباط دارد . فضای سفید مانند اندازه گیری و پیشرو ، فضای تنفس و آرامش مکانی را به متن می دهد . با اضافه کردن فضای سفید در اطراف آنها می توانید عناصر را از هم متمایز کنید. به عنوان مثال ، کپی نباید به نظر برسد. برای اطمینان از خوانایی ، اطمینان حاصل کنید که پاراگراف ها از کف بالایی برخوردار هستند.
تبلیغات عطر - یا هر تبلیغی برای یک محصول لوکس برای آن ماده - به دلیل استفاده از فضای سفید شناخته شده اند ... بارهای آن؛ و یک نوع سری برای اندازه گیری خوب.
مثال
فکر می کنم وقت آن رسیده است که یک پلاگین بی شرمانه باشد. تصویر بالا از وب سایت خود من Shift (px) است. طراحی بسیار وابسته به تایپوگرافی و فضای سفید است. فضای سفید احتمالاً حدود 50٪ صفحه را در بر می گیرد. فضای سفید یکی از ساده ترین است (زیرا شما واقعاً چیزی اضافه نمی کنید ، هستید؟) و مؤثرترین راهها برای ایجاد یک طراحی بصری دلپذیر و قابل خواندن است.
فضای سفید کلاس زیادی را به یک طراحی می افزاید. نترسید که بعضی از سوراخ ها را باز کنید ، حتی شکاف ها را باز کنید. طراحان بی تجربه وسوسه می شوند چیزی را در هر گوشه کوچک قرار دهند. طراحی در مورد برقراری ارتباط پیام است. بنابراین عناصر طراحی باید از این پیام پشتیبانی کنند و باعث افزایش سر و صدای آن نشوند.
مثال خوب دیگری از فضای سفید فراوان:
کایل مایر آستریا نشان می دهد که برای طراحی دلپذیر چیز زیادی لازم نیست. ممکن است برخی از افراد "مینیمالیستی" را با "ساده" اشتباه بگیرند. اما کنار کشیدن چنین سبکی نه ساده و نه آسان است (حتی اگر کسی با گرافیک یا تصاویر عالی نباشد).
7. همه عناصر را به هم وصل کنید.
"اتصال" در اینجا کمی اصطلاح ساخته شده است ، اما به نظر می رسد بهترین چیزی است که منظور ما از آن است. اتصال در اینجا به یک طراحی وب اشاره دارد که هم وحدت و هم قوام دارد . این دو ویژگی نشانگر حرفه ای بودن یک طرح (و بنابراین طراح آن) است. آنها ویژگی های بسیار گسترده ای هستند. یک طرح باید در استفاده از رنگها ، در قلمهای متنوع ، با نمادهای آن و غیره سازگار باشد. یک طراحی می تواند عالی به نظر برسد و هنوز هم از ناسازگاری رنج می برد.
وقتی یک طرح متناقض باشد ، وحدت آن را می توان در کاربر از دست داد. وحدت با قوام کمی متفاوت است. وحدت به چگونگی تعامل و تناسب عناصر مختلف در یک طرح اشاره دارد. به عنوان مثال ، آیا رنگ ها و گرافیک ها مطابقت دارند؟ آیا همه چیز به یک پیام یکپارچه کمک می کند؟ از سوی دیگر ، قوام بین صفحات یک طرح یافت می شود.
وحدت شاید مهمترین این دو باشد. بدون وحدت ، داشتن یک طرح خوب کار سختی است. با این وجود ، ناسازگاری ممکن است کمی "دست و پا گیر" به نظر برسد اما ممکن است طرح را "بد" نکند.
از هفت اصل مورد بحث در این مقاله ، ارتباط مهمترین است. ارتباط با نحوه جمع شدن همه عناصر ارتباط دارد: تعادل ، شبکه ، رنگ ها ، گرافیک ، نوع و فضای سفید. این نوعی چسب است که همه چیز را به هم وصل می کند . بدون این چسب ، طرح از هم جدا می شود. شما می توانستید یک نوع زیبا و یک پالت رنگی برجسته و دقیق را انتخاب کنید ، اما اگر این گرافیک ها افتضاح هستند یا به سادگی با یکدیگر مطابقت ندارند یا اگر همه چیز بدون تفکر با هم چیده شود ، طراحی از بین خواهد رفت.
این سخت ترین قسمت طراحی است. این چیزی نیست که به راحتی آموزش داده شود یا اصلاً لزوماً می توان آن را آموزش داد. کمی توانایی و تجربه طبیعی لازم است. اما این همان چیزی است که هست ، و باعث می شود تا یک طراحی در آخر خوب به نظر برسد.
مثال
ما زودتر به دلیل داشتن گرافیک های زیبا ، از WebDesigner Wall نیک لا ستایش کردیم ، اما این نیز نمونه خوبی از اتصال است. وقتی به طور کلی به گرافیک ها و سبک نگاه می کنید ، همه چیز نگاهی به آبرنگ دست به دست می دهد: تصاویر مقالات ، تصاویر پس زمینه آبرنگ ، doodles و آیکون های دست ساز ، شیوه رای گیری و غیره بر. توجه به جزئیات باعث می شود این طراحی از برتری برخوردار باشد.
منابع بیشتر
پنج قدم ساده برای طراحی سیستم های شبکه
یک راهنمای مبتدی برای شبکه ها است.
نسبت طلایی در طراحی وب
8 راه ساده برای بهبود تایپوگرافی در طراحی های شما
فونت ها و وب
درباره وضعیت فونت ها در وب و جایگزینی تصویر.
4 اصول طراحی خوب برای وب سایت ها
چهار اصل دیگر ، بیشتر از دیدگاه عملی.
نتیجه
طراحی خوب وب محدود به هفت اصل اصلی نیست که در اینجا مورد بحث قرار می گیرد. جنبه هایی مانند دسترسی ، خوانایی و قابلیت استفاده نیز نقش ایفا می کند.
به همین دلیل طراحی وب بسیار دشوار است. خیس کردن پاهای شما در طراحی بسیار آسان است ، به خصوص امروز ، با بسیاری از سیستم های مدیریت محتوا ، ابزار بلاگ و مضامین به راحتی در دسترس است. اما واقعاً تسلط بر همه جنبه های طراحی وب زمان می برد و ، بیایید صادقانه ، استعداد باشیم. داشتن توانایی در ساختن طرح های زیبا فقط یک جنبه دارد ، اما نکته مهمی است.
یاد بگیرید زندگی کنید و باهوش تر کار کنید ، سخت تر نیس
چگونه یک طراحی وب خوب به نظر برسد
طرح خود را متعادل نگه دارید.
طرح خود را با استفاده از شبکه ها تقسیم کنید.
برای طراحی خود حداکثر دو یا سه رنگ پایه را انتخاب کنید.
سعی کنید گرافیک ها به خوبی کنار هم قرار بگیرند.
تایپوگرافی وب سایت خود را بهبود بخشید.
با اضافه کردن فضای سفید در اطراف خود ، عناصر را متمایز کنید.
همه عناصر را به هم وصل کنید.
به نظر می رسد همه و پدربزرگشان (و سگ) این روزها وب سایت دارند. وب روز به روز شلوغ تر می شود ، به همین دلیل که خواندن این مقاله به ده ها وب سایت اضافه می شود. توجه به این امر در بین توده ها سخت و دشوارتر می شود.
نکته حرفه ای
شما نمی توانید طراحی وب شگفت انگیز و بدون اشکال spiffy داشته باشید. امروز فرم های وب زیبا طراحی کنید.
"خوشبختانه" برای ما طراحان ، به نظر نمی رسد که همه بدانند چه چیزی باعث ایجاد یا شکسته شدن یک طراحی وب می شود . در حال حاضر ، طراحی وب تا حدی فرایندی خلاقانه است و به همین دلیل می توان آن را بیشتر از علم نامید. اما از آنجا که ذاتاً رسانه ای برای ارائه است ، برخی از قوانین (یا حداقل اصول) اعمال می شوند. با دنبال کردن برخی از نشانگرهای ساده ، هر کسی باید بتواند طرحی بصری دلپذیر ایجاد کند و یک قدم به شهرت نزدیک شود. خوب، آن را نمی که ساده، و استعداد و تجربه مهم، اما هر کسی می تواند صفحه اصلی خود را به چیزی زیباتر عرض چند دقیقه صرف تبدیل شود.
چگونه طراحی وب خوب به نظر برسد (اینفوگرافیک)
بنابراین چه چیزی زیبایی را ایجاد می کند؟ فلش نیست. نه اینکه بگوییم فلش فاقد شایستگی است ، اما Flash به تنهایی طراحی را خوب نمی کند. برخی از وب سایت های ناخوشایند Flash در آنجا هستند. همچنین ، لازم نیست یک تصویرگر عالی برای تهیه طرح های جذاب باشد. در عوض ، به طراحی وب به عنوان همزیستی عناصر مختلف نگاه کنید . هیچ عنصر واحدی بیشترین شمارش را ندارد. بلکه ، عناصر باعث می شود یک طراحی خوب به نظر برسد.
1. طرح خود را متعادل نگه دارید.
تعادل همه چیز در مورد این است که اطمینان حاصل شود که طرح شما به یک طرف یا طرف دیگر نمی چرخد. مانند تعادل وزن در دستیابی به تقارن یا عدم تقارن است.
مثال
در گرافیک عنوان در وب سایت تفریق Khoi Vinh در زیر نگاه کنید. من این مثال را از اصول طراحی وب زیبا توسط جیسون بیرد گرفتم. جیسون اشاره می کند که چگونه صلیب به سمت راست ، وزن بصری اضافه شده ای را فراهم می کند که سگ در سمت چپ فراهم می کند. این یک جزئیات کوچک اما جزئی نیست. خودتان را با مخفی کردن صلیب با دست خود ببینید.
این همان چیزی است که ما تعادل نامتقارن می نامیم و این همان تعادل است. اگر به نحوه چیدمان مسائل دقت نکنید ، طراحی به سرعت نامتعادل می شود. شما می توانید وزن بصری یک طرح را از جهات مختلف ، مانند رنگ ، اندازه و اضافه یا حذف عناصر ، دستکاری کنید. اگر می خواستید صلیب را بسازید ، مثلاً پرتقالی پر جنب و جوش ، سنگین تر می شود و شاید دوباره طرح را از حالت تعادل خارج کنید. دستیابی به تعادل نامتقارن یک ماده ظریف است که برای تنظیم دقیق و چشمی آموزش دیده ، زمان زیادی لازم دارد.
در زیر مثال دیگری از توازن متقارن ، توسط بیست و یکم آورده شده است . اگرچه گرافیک هدر به صورت نامتقارن متعادل است (آیا می توانید نحوه انجام آن را تشخیص دهید) ، اما بقیه طرح های پایین به پایین دارای ستون های متقارن هستند. تعادل نامتقارن ممکن است برداشتن آن سخت تر باشد اما تمایل دارد طراحی را بازیگوش تر کند.
خواهید فهمید که هر طرحی که فکر می کنید خوب است ، یک توازن به خوبی ساخته شده در زیر آن دارد. و هر طرحی که در اینجا نشان داده می شود در هر 7 اصل مورد بحث ما امتیاز بالایی دارد. بنابراین یک دقیقه وقت بگذارید تا از بالا و پایین پیمایش کنید و در صورت گذر همه آنها از خودتان ببینید.
2. طراحی خود را با استفاده از شبکه ها تقسیم کنید.
مفهوم شبکه ها ارتباط نزدیکی با تعادل دارند. شبکه ها یک سری از خط کش های افقی و عمودی هستند که به شما کمک می کنند یک طرح را "جابجایی" کنید. به ستون ها فکر کنید. ستونها خوانایی را بهبود می بخشد و باعث می شود محتوای صفحه راحت تر جذب شود. فاصله گرفتن و استفاده از Rule of Thirds (یا همان نسبت طلایی مشابه ) همه چیز را روی چشم آسانتر می کند.
به عنوان مثال Rule of Thirds and Golden Ratio به همین دلیل است که نوارهای کناری معمولاً حدود یک سوم از عرض صفحه هستند و چرا منطقه اصلی محتوای تقریباً برابر با عرض طراحی تقسیم شده با 1.62 است (مساوی phi در ریاضیات). ما نمی خواهیم به این دلیل بپرسیم ، اما به نظر می رسد در عمل صادق است. همچنین به همین دلیل است که سوژه در عکس های گرفته شده حرفه ای معمولاً نه در وسط بلکه در تقاطع یک شبکه نه مربع خیالی (سه به سه ، با دو خط افقی و دو خط عمودی) قرار می گیرد.
مثال
این شبکه به ویژه به طراحی های مینیمالیستی وام می دهد. 5 سی و یک توسط Derek Punsalan نشان می دهد که چرا:
در حالی که طراحی به خودی خود از نظر بصری چشمگیر نیست ، ساختار دقیق و دقیق المان ها باعث می شود تا روی چشم آسان شود. ستون سمت چپ تقریباً دو برابر اندازه نوار کناری سمت راست است ، که فقط منطقی است و چیزی است که باید هنگام ایجاد طرح های خود به آن فکر کنید.
3. حداکثر برای طراحی خود دو یا سه رنگ پایه انتخاب کنید.
اگر قرمز رنگ قرمز را در وب سایت The First 20th (در بالا) به رنگ سبز آهک تغییر دهید ، چه می کنید؟ خوب به نظر می رسد؟ به احتمال زیاد اینطور نیست. زیرا به همان پالت رنگی تعلق ندارد (و البته سبز آهک ساده ترین رنگ برای کار با آن نیست). وب سایتهایی مانند ColourLovers به دلایلی وجود دارد. شما فقط نمی توانید رنگ های خود را به سبک Rambo ، اسلحه ها را انتخاب کنید. برخی از رنگ ها به خوبی کنار هم قرار می گیرند ، برخی دیگر اینگونه نیستند. بسیاری از تئوری ها در مورد رنگ ها و ترکیب آنها وجود دارد ، از جمله آن می توان به قراردادهایی درمورد طرح های تک رنگ و متضاد اشاره کرد ، اما چیزهای زیادی به عقل سلیم و احساس نسبت به آن می رسد.
برای خودتان بفهمید که چگونه با هم کار می کنند. تا حد امکان بسیاری از وب سایت ها مانند نمونه هایی که در هر یک از بسیاری از وب سایت های ویترین CSS نشان داده شده است (مانند بهترین گالری وب ) را خیس کنید تا احساس چگونگی تعامل رنگ ها با یکدیگر را بدست آورید. دو یا سه رنگ پایه را حداکثر برای طراحی خود انتخاب کنید و سپس از رنگ های روشن (که سبک تر هستند ، با رنگ سفید مخلوط کنید) و سایه ها (که تیره تر است ، با سیاه مخلوط کنید) از این رنگ های پایه استفاده کنید تا در صورت لزوم پالت را گسترش دهید.
انتخاب رنگ های زیبا به همان اندازه انتخاب رنگ های مناسب (یعنی رنگ های مناسب برای کار) مهم است. طراحی وب برای یک رستوران کوچک دنج می تواند به خوبی با رنگهای "خاکی" انجام شود: قرمز ، قهوه ای و غیره. هر رنگ پیامی را ارسال می کند ، و حق شماست که پیام را درست دریافت کنید.
مثال
وب سایت Bence Kucsan دارای سبک طراحی خاص خود است. عمدتا تک رنگ است (رنگ و سایه یک رنگ) و رنگی (سیاه و سفید) با رنگ (قرمز) برای برجسته کردن:
سیاه و سفید شیک و حرفه ای را نشان می دهد ، در حالی که رنگ قرمز ادویه ای را اضافه می کند که باعث می شود عناصر خاصی از آن استفاده کنند و طرح را از نگاه کسل کننده نکشید. البته بیش از رنگ قرمز این طرح را جالب می کند. به هر حال ، یک شرکت به طور خاص این سبک را محبوب کرد.
صحبت از رنگ ، WebDesigner Wall توسط نیک لا سعادت محض است:
همه آن پاستیل های نرم این طرح را درخشان می کنند. در نگاه اول ، انتخاب های رنگی ممکن است کمی دلخواه به نظر برسند ، اما وقتی از نزدیک نگاه می کنید متوجه یک پالت رنگی کاملاً تعریف شده می شوید که برای اطمینان از خوب بودن همه عناصر ضروری است. این وب سایت ، و به ویژه پیش زمینه آن ، همچنین ترکیب خوبی از رنگ ها و گرافیک ها را نشان می دهد ، که ما را به شماره چهار تبدیل می کند ...
4- سعی کنید که گرافیک ها به خوبی کنار هم قرار بگیرند.
خوب ، طراحی عالی نیازی به گرافیک فانتزی ندارد. اما گرافیک ضعیف قطعاً به یک طراحی آسیب می زند. گرافیک ها به پیام تصویری اضافه می کنند. وب سایتهایی مانند WebDesigner Wall دارای تصاویر برجسته ای هستند ، در حالی که سایر سایت ها کم ارزش هستند.
مثال
تیم ون دامم تنها تعداد کمی از گرافیک را در وب سایت خود Max Voltar استفاده می کند ، اما او آنها را با بیشترین فکر و مراقبت پیاده سازی می کند. تصویر پس زمینه غیر مزاحم و تاج پیچیده دو مورد از این گرافیک ها هستند. از لحاظ بصری ، آنها بیش از حد چشمگیر نیستند ، اما همه به ظاهر و احساس وب سایت می افزایند و هیچ جا جای آن نیست.
مدتی است که مکس ولتار طراحی متفاوتی از آنچه در بالا نشان داده شده است. اما به مدت دو ماه که این یکی آنلاین بود ، به راحتی یکی از موارد مورد علاقه من بود. به همین دلیل و به دلیل استفاده از آن از گرافیک بسیار مثال زدنی است ، من آن را نسبت به آخرین نسخه انتخاب کردم.
Rogie King's Komodo Media از لحاظ گرافیکی بسیار سنگین تر است ، کاملاً از نظر فنی و موضوعی.
شما ممکن است تصویرگر یا عکاس خوبی نباشید ، اما این بدان معنی نیست که نمی توانید گرافیک خوبی را در وب سایت خود قرار دهید. برخی مهارت های اساسی فتوشاپ ، احتمالاً برخی از تصاویر سهام و طعم عالی همه چیزهایی هستند که شما نیاز دارید. سعی کنید گرافیک ها به خوبی کنار هم قرار بگیرند و اطمینان حاصل کنید که آنها سبکی را که مد نظر شماست تجسم می کنند. همه ما با یک توانایی طبیعی یکسان نیستیم. با یادگیری دیگران می توانید مواردی را انتخاب کنید ، اما گاهی اوقات فقط باید استایل را انتخاب کنید که مناسب شما باشد (مانند یک سبک تمیز اگر بزرگترین تصویرگر نیستید).
5- تایپوگرافی وب سایت خود را بهبود بخشید.
هنر نوع موضوعی مشکل است که باید در مورد آن صحبت کنیم زیرا عناصر زیادی را در بر می گیرد. در حالی که می توان آن را به عنوان یک شاخه از طراحی در نظر گرفت ، می توان یک عمر خود را برای تسلط بر همه جوانب آن صرف کرد. این مکان برای ارائه مرجع کامل چاپی نیست ، بنابراین ما بحث خود را محدود خواهیم کرد تا در کوتاه مدت چه فایده ای برای شما خواهد داشت.
تایپوگرافی وب در مقایسه با تایپوگرافی چاپی معلول است . بزرگترین تفاوت عدم کنترل کامل ما بر روی ظاهر نوع در وب ، به دلیل شخصیت پویا آن است. بدیهی است ، رندر پویا نقاط قوت خود را دارد ، اما طراحان وب حداقل در حال حاضر کنترل کمی بر نتایج دارند. فونت های موجود در رایانه کاربر ، تفاوت در رندر مرورگر و پلتفرم و به طور کلی پشتیبانی از subpar در CSS باعث می شود که تایپوگرافی وب یک کار ناامیدکننده و ناامیدکننده باشد. اما در حالی که ممکن است ما برای رسیدن به پتانسیل آن به CSS 3 منتظر تایپوگرافی وب باشیم ، اما اکنون ابزارهایی هم داریم که بتوانیم جالب و مهمتر از همه زیبا به نظر برسیم .
پشته قلم
چندین روش نسبتاً آسان برای بهبود چشمگیر تایپوگرافی وب سایت شما وجود دارد ، که سه مورد از آنها در اینجا می خواهیم. یکی از آنها پشته های قلم است .
پشته های قلم فقط CSS اساسی هستند. آنها به شما امکان می دهند نظمی را که در آن باید فونت ها ارائه شود ، تعریف کنید. به طور دقیق ، ما در اینجا از انواع حروف صحبت می کنیم ، نه قلم ها. برای خلاصه اطلاعاتی در این زمینه مراجعه شود به تایپ فیس جان قهوهای مایل به زرد قلم! = .
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
خاصیت فوق باعث می شود تا نوع "Helvetica Neue" نوع بدن را کپی کند. با این وجود ، لازم است رایانه کاربر آن نوع خاصی را نصب کند. امروزه مکینتاش با Helvetica (Neue) از پیش نصب شده همراه است ، اما اکثر دستگاه های ویندوز این کار را نمی کنند.
زیبایی پشته های قلم این است که شما می توانید "خطاهای سقفی" را تعریف کنید ، به این معنی که هر زمان که یک تایپ تعریف شده از دست نرود ، مرورگر به سادگی به دنبال یک مورد بعدی می باشد. البته این بدان معنی است که طراحی دقیقاً برای همه به نظر نمی رسد ، و به همین ترتیب ما دوباره کنترل خود را از دست می دهیم. اما برای کسانی که نمی خواهند به راه حل دیگری متوسل شوند (مانند تعویض تصویر) ، این بهترین کاری است که CSS خالص در حال حاضر ارائه می دهد (تا روزی که بتوانیم با راحتی از @ font-face استفاده کنیم ).
ویلسون ماینر از پشته فونتهایی که در بالا به آن اشاره کردیم استفاده می کند. Helvetica Neue بهبود Helvetica است. و در حالی که Arial تقریباً بر روی هر رایانه (حداقل در دستگاه های ویندوز و مک) نصب شده است و بنابراین یک انتخاب محبوب برای وب است ، بیشتر طراحان Helvetica را به Arial ترجیح می دهند. به این ترتیب ، شما از هر دو دنیا بهترین استفاده را می کنید: Helvetica برای کسانی که آن را دارند و در صورت وجود Helvetica در دسترس نیست Arial.
جان تان از عناوین قلم جالب دیگری برای عناوین خود استفاده می کند:
body { font-family: baskerville, 'palatino linotype', 'times new roman', serif; }
فقط تعداد نسبتاً کمی از بازدیدکنندگان هدر در Baskerville را مشاهده می کنند ، اما این مشکلی نیست. این ویژگی به شخصیت اضافه می کند در حالی که به کسی که این ویژگی را نرساند صدمه می زند. باز هم ، پشته های قلم یک راه حل عالی نیستند ، اما آنها به شما مزیت می دهند .
اندازه گیری و پیشرو
اندازه گیری طول خطوط است ، و پیشرو ارتفاع (یا فاصله عمودی) خطوط است. در CSS ، اندازه گیری را می توان با تعیین عرض برای جعبه حاوی (به عنوان مثال پاراگراف) کنترل کرد. هر دو بر خوانایی تأثیر می گذارند . اگر خطوط خیلی کوتاه یا خیلی طولانی باشند ، کاربران راحت با خواندن مطالب راحت نخواهند شد. فرد اغلب این مشکل را با طرح بندی مایعات مشاهده می کند . بین 40 تا 80 کاراکتر در هر خط ایده آل به نظر می رسد.
با تعریف line-heightویژگی CSS ، می توان سرب افزاری را افزایش داد (یا کاهش داد) . به طور کلی ، ارتفاع خط 1.5 برای پاراگراف ها به خوبی کار می کند. بدین معنی که وقتی اندازه متن 12 نقطه باشد ، ارتفاع خط 18 نقطه می شود (1.5 × 12) ، که به اتاق اتاق تنفس می دهد .
حلق آویز و گلوله
راه سوم برای بهبود خوانایی ، حلق آویز به نقل از گلوله و گلوله است. به جای ترک متن لیست های بولت و نقل قول ها با تراز پیش فرض ، به صورت افقی آن را با بقیه متن در صفحه تراز کنید .
تیم ون دامم برای آخرین طراحی مجدد مکس ولتار از گلوله های آویز استفاده می کند :
ما خط قرمز را اضافه کرده ایم تا تأکید کنیم که چگونه همه متن به صورت افقی تراز شده است. به سادگی با تنظیم padding-leftویژگی CSS لیست بولت 0، می توانید به همان نتیجه برسید.
بیرون کشیدن نقل قول های معلق از طرف دیگر ، به همین سادگی نیست. بیشتر طراحان برای نشانگرها به تصویر پس زمینه متوسل می شوند و مطابق با آن مطابقت دارند ، همانطور که متیو بوکانان انجام می دهد :
علامت نقل قول معلق در اینجا باعث اختلال در جریان متن نمی شود . این جزئیاتی است که اغلب در آن مورد توجه قرار نمی گیرد اما ارزش سرمایه گذاری را دارد.
قوانینی را چاپ کنید که کاربردی ندارند
چاپ و وب یکسان نیستند. به نظر می رسد کاملاً واضح است ، اما بسیاری از مردم مانند یک رفتار با آنها رفتار می کنند. چاپ ثابت است و وب پویا است. داشتن کنترل کامل بر نحوه طراحی وب شما برای همه غیرممکن است .
ریتم عمودی ، متن توجیهی مناسب (با هیپنوتیزم و بدون رودخانه ) و چیدمان های چند ستونی تنها برخی از ویژگی های چاپ است که تقریباً در وب غیرممکن است. بنابراین ، CSS 3 احتمالاً یک راه حل همه و همه راه حل نخواهد بود و احتمالاً چند سال دیگر می تواند قبل از استفاده کامل از آن باشد. اکنون باید این اختلافات را بپذیریم: به وب به عنوان نسخه آنلاین چاپ نگاه نکنید. در عوض ، از پتانسیل ذاتی وب استفاده کنید.
کلمه ای در مورد جایگزینی تصویر
در مورد جایگزینی تصویر (تکنیک تعویض فونت ها با تصاویر) چطور؟ ما در مورد پشته های فونت صحبت کرده ایم ، اما آیا آنها نسبت به جایگزینی تصویر پایین نیستند؟ خوب ، این به آنچه شما فکر می کنید مهمتر است بستگی دارد: قادر به نمایش قلم دقیق مورد نظر خود یا داشتن محتوای پویا ، در دسترس و دوست داشتنی برای سئو؟ برخی از تکنیک های جایگزینی تصویر بسیار پیشرفته شده اند ، اما هنوز هم به اندازه متن ساده انعطاف پذیر نیستند. جایگزینی تصویر به خوبی به هدر و گزیده ها کمک می کند ، اما به سختی راه حلی برای متن بدن نیست.
6. با اضافه کردن فضای سفید در اطراف خود ، عناصر را از هم متمایز کنید.
فضای سفید یا فضای منفی با آنچه در آنجا نیست ارتباط دارد . فضای سفید مانند اندازه گیری و پیشرو ، فضای تنفس و آرامش مکانی را به متن می دهد . با اضافه کردن فضای سفید در اطراف آنها می توانید عناصر را از هم متمایز کنید. به عنوان مثال ، کپی نباید به نظر برسد. برای اطمینان از خوانایی ، اطمینان حاصل کنید که پاراگراف ها از کف بالایی برخوردار هستند.
تبلیغات عطر - یا هر تبلیغی برای یک محصول لوکس برای آن ماده - به دلیل استفاده از فضای سفید شناخته شده اند ... بارهای آن؛ و یک نوع سری برای اندازه گیری خوب.
مثال
فکر می کنم وقت آن رسیده است که یک پلاگین بی شرمانه باشد. تصویر بالا از وب سایت خود من Shift (px) است. طراحی بسیار وابسته به تایپوگرافی و فضای سفید است. فضای سفید احتمالاً حدود 50٪ صفحه را در بر می گیرد. فضای سفید یکی از ساده ترین است (زیرا شما واقعاً چیزی اضافه نمی کنید ، هستید؟) و مؤثرترین راهها برای ایجاد یک طراحی بصری دلپذیر و قابل خواندن است.
فضای سفید کلاس زیادی را به یک طراحی می افزاید. نترسید که بعضی از سوراخ ها را باز کنید ، حتی شکاف ها را باز کنید. طراحان بی تجربه وسوسه می شوند چیزی را در هر گوشه کوچک قرار دهند. طراحی در مورد برقراری ارتباط پیام است. بنابراین عناصر طراحی باید از این پیام پشتیبانی کنند و باعث افزایش سر و صدای آن نشوند.
مثال خوب دیگری از فضای سفید فراوان:
کایل مایر آستریا نشان می دهد که برای طراحی دلپذیر چیز زیادی لازم نیست. ممکن است برخی از افراد "مینیمالیستی" را با "ساده" اشتباه بگیرند. اما کنار کشیدن چنین سبکی نه ساده و نه آسان است (حتی اگر کسی با گرافیک یا تصاویر عالی نباشد).
7. همه عناصر را به هم وصل کنید.
"اتصال" در اینجا کمی اصطلاح ساخته شده است ، اما به نظر می رسد بهترین چیزی است که منظور ما از آن است. اتصال در اینجا به یک طراحی وب اشاره دارد که هم وحدت و هم قوام دارد . این دو ویژگی نشانگر حرفه ای بودن یک طرح (و بنابراین طراح آن) است. آنها ویژگی های بسیار گسترده ای هستند. یک طرح باید در استفاده از رنگها ، در قلمهای متنوع ، با نمادهای آن و غیره سازگار باشد. یک طراحی می تواند عالی به نظر برسد و هنوز هم از ناسازگاری رنج می برد.
وقتی یک طرح متناقض باشد ، وحدت آن را می توان در کاربر از دست داد. وحدت با قوام کمی متفاوت است. وحدت به چگونگی تعامل و تناسب عناصر مختلف در یک طرح اشاره دارد. به عنوان مثال ، آیا رنگ ها و گرافیک ها مطابقت دارند؟ آیا همه چیز به یک پیام یکپارچه کمک می کند؟ از سوی دیگر ، قوام بین صفحات یک طرح یافت می شود.
وحدت شاید مهمترین این دو باشد. بدون وحدت ، داشتن یک طرح خوب کار سختی است. با این وجود ، ناسازگاری ممکن است کمی "دست و پا گیر" به نظر برسد اما ممکن است طرح را "بد" نکند.
از هفت اصل مورد بحث در این مقاله ، ارتباط مهمترین است. ارتباط با نحوه جمع شدن همه عناصر ارتباط دارد: تعادل ، شبکه ، رنگ ها ، گرافیک ، نوع و فضای سفید. این نوعی چسب است که همه چیز را به هم وصل می کند . بدون این چسب ، طرح از هم جدا می شود. شما می توانستید یک نوع زیبا و یک پالت رنگی برجسته و دقیق را انتخاب کنید ، اما اگر این گرافیک ها افتضاح هستند یا به سادگی با یکدیگر مطابقت ندارند یا اگر همه چیز بدون تفکر با هم چیده شود ، طراحی از بین خواهد رفت.
این سخت ترین قسمت طراحی است. این چیزی نیست که به راحتی آموزش داده شود یا اصلاً لزوماً می توان آن را آموزش داد. کمی توانایی و تجربه طبیعی لازم است. اما این همان چیزی است که هست ، و باعث می شود تا یک طراحی در آخر خوب به نظر برسد.
مثال
ما زودتر به دلیل داشتن گرافیک های زیبا ، از WebDesigner Wall نیک لا ستایش کردیم ، اما این نیز نمونه خوبی از اتصال است. وقتی به طور کلی به گرافیک ها و سبک نگاه می کنید ، همه چیز نگاهی به آبرنگ دست به دست می دهد: تصاویر مقالات ، تصاویر پس زمینه آبرنگ ، doodles و آیکون های دست ساز ، شیوه رای گیری و غیره بر. توجه به جزئیات باعث می شود این طراحی از برتری برخوردار باشد.
منابع بیشتر
پنج قدم ساده برای طراحی سیستم های شبکه
یک راهنمای مبتدی برای شبکه ها است.
نسبت طلایی در طراحی وب
8 راه ساده برای بهبود تایپوگرافی در طراحی های شما
فونت ها و وب
درباره وضعیت فونت ها در وب و جایگزینی تصویر.
4 اصول طراحی خوب برای وب سایت ها
چهار اصل دیگر ، بیشتر از دیدگاه عملی.
نتیجه
طراحی خوب وب محدود به هفت اصل اصلی نیست که در اینجا مورد بحث قرار می گیرد. جنبه هایی مانند دسترسی ، خوانایی و قابلیت استفاده نیز نقش ایفا می کند.
به همین دلیل طراحی وب بسیار دشوار است. خیس کردن پاهای شما در طراحی بسیار آسان است ، به خصوص امروز ، با بسیاری از سیستم های مدیریت محتوا ، ابزار بلاگ و مضامین به راحتی در دسترس است. اما واقعاً تسلط بر همه جنبه های طراحی وب زمان می برد و ، بیایید صادقانه ، استعداد باشیم. داشتن توانایی در ساختن طرح های زیبا فقط یک جنبه دارد ، اما نکته مهمی است.
یاد بگیرید زندگی کنید و باهوش تر کار کنید ، سخت تر نیس
چگونه یک طراحی وب خوب به نظر برسد
طرح خود را متعادل نگه دارید.
طرح خود را با استفاده از شبکه ها تقسیم کنید.
برای طراحی خود حداکثر دو یا سه رنگ پایه را انتخاب کنید.
سعی کنید گرافیک ها به خوبی کنار هم قرار بگیرند.
تایپوگرافی وب سایت خود را بهبود بخشید.
با اضافه کردن فضای سفید در اطراف خود ، عناصر را متمایز کنید.
همه عناصر را به هم وصل کنید.
به نظر می رسد همه و پدربزرگشان (و سگ) این روزها وب سایت دارند. وب روز به روز شلوغ تر می شود ، به همین دلیل که خواندن این مقاله به ده ها وب سایت اضافه می شود. توجه به این امر در بین توده ها سخت و دشوارتر می شود.
نکته حرفه ای
شما نمی توانید طراحی وب شگفت انگیز و بدون اشکال spiffy داشته باشید. امروز فرم های وب زیبا طراحی کنید.
"خوشبختانه" برای ما طراحان ، به نظر نمی رسد که همه بدانند چه چیزی باعث ایجاد یا شکسته شدن یک طراحی وب می شود . در حال حاضر ، طراحی وب تا حدی فرایندی خلاقانه است و به همین دلیل می توان آن را بیشتر از علم نامید. اما از آنجا که ذاتاً رسانه ای برای ارائه است ، برخی از قوانین (یا حداقل اصول) اعمال می شوند. با دنبال کردن برخی از نشانگرهای ساده ، هر کسی باید بتواند طرحی بصری دلپذیر ایجاد کند و یک قدم به شهرت نزدیک شود. خوب، آن را نمی که ساده، و استعداد و تجربه مهم، اما هر کسی می تواند صفحه اصلی خود را به چیزی زیباتر عرض چند دقیقه صرف تبدیل شود.
چگونه طراحی وب خوب به نظر برسد (اینفوگرافیک)
بنابراین چه چیزی زیبایی را ایجاد می کند؟ فلش نیست. نه اینکه بگوییم فلش فاقد شایستگی است ، اما Flash به تنهایی طراحی را خوب نمی کند. برخی از وب سایت های ناخوشایند Flash در آنجا هستند. همچنین ، لازم نیست یک تصویرگر عالی برای تهیه طرح های جذاب باشد. در عوض ، به طراحی وب به عنوان همزیستی عناصر مختلف نگاه کنید . هیچ عنصر واحدی بیشترین شمارش را ندارد. بلکه ، عناصر باعث می شود یک طراحی خوب به نظر برسد.
1. طرح خود را متعادل نگه دارید.
تعادل همه چیز در مورد این است که اطمینان حاصل شود که طرح شما به یک طرف یا طرف دیگر نمی چرخد. مانند تعادل وزن در دستیابی به تقارن یا عدم تقارن است.
مثال
در گرافیک عنوان در وب سایت تفریق Khoi Vinh در زیر نگاه کنید. من این مثال را از اصول طراحی وب زیبا توسط جیسون بیرد گرفتم. جیسون اشاره می کند که چگونه صلیب به سمت راست ، وزن بصری اضافه شده ای را فراهم می کند که سگ در سمت چپ فراهم می کند. این یک جزئیات کوچک اما جزئی نیست. خودتان را با مخفی کردن صلیب با دست خود ببینید.
این همان چیزی است که ما تعادل نامتقارن می نامیم و این همان تعادل است. اگر به نحوه چیدمان مسائل دقت نکنید ، طراحی به سرعت نامتعادل می شود. شما می توانید وزن بصری یک طرح را از جهات مختلف ، مانند رنگ ، اندازه و اضافه یا حذف عناصر ، دستکاری کنید. اگر می خواستید صلیب را بسازید ، مثلاً پرتقالی پر جنب و جوش ، سنگین تر می شود و شاید دوباره طرح را از حالت تعادل خارج کنید. دستیابی به تعادل نامتقارن یک ماده ظریف است که برای تنظیم دقیق و چشمی آموزش دیده ، زمان زیادی لازم دارد.
در زیر مثال دیگری از توازن متقارن ، توسط بیست و یکم آورده شده است . اگرچه گرافیک هدر به صورت نامتقارن متعادل است (آیا می توانید نحوه انجام آن را تشخیص دهید) ، اما بقیه طرح های پایین به پایین دارای ستون های متقارن هستند. تعادل نامتقارن ممکن است برداشتن آن سخت تر باشد اما تمایل دارد طراحی را بازیگوش تر کند.
خواهید فهمید که هر طرحی که فکر می کنید خوب است ، یک توازن به خوبی ساخته شده در زیر آن دارد. و هر طرحی که در اینجا نشان داده می شود در هر 7 اصل مورد بحث ما امتیاز بالایی دارد. بنابراین یک دقیقه وقت بگذارید تا از بالا و پایین پیمایش کنید و در صورت گذر همه آنها از خودتان ببینید.
2. طراحی خود را با استفاده از شبکه ها تقسیم کنید.
مفهوم شبکه ها ارتباط نزدیکی با تعادل دارند. شبکه ها یک سری از خط کش های افقی و عمودی هستند که به شما کمک می کنند یک طرح را "جابجایی" کنید. به ستون ها فکر کنید. ستونها خوانایی را بهبود می بخشد و باعث می شود محتوای صفحه راحت تر جذب شود. فاصله گرفتن و استفاده از Rule of Thirds (یا همان نسبت طلایی مشابه ) همه چیز را روی چشم آسانتر می کند.
به عنوان مثال Rule of Thirds and Golden Ratio به همین دلیل است که نوارهای کناری معمولاً حدود یک سوم از عرض صفحه هستند و چرا منطقه اصلی محتوای تقریباً برابر با عرض طراحی تقسیم شده با 1.62 است (مساوی phi در ریاضیات). ما نمی خواهیم به این دلیل بپرسیم ، اما به نظر می رسد در عمل صادق است. همچنین به همین دلیل است که سوژه در عکس های گرفته شده حرفه ای معمولاً نه در وسط بلکه در تقاطع یک شبکه نه مربع خیالی (سه به سه ، با دو خط افقی و دو خط عمودی) قرار می گیرد.
مثال
این شبکه به ویژه به طراحی های مینیمالیستی وام می دهد. 5 سی و یک توسط Derek Punsalan نشان می دهد که چرا:
در حالی که طراحی به خودی خود از نظر بصری چشمگیر نیست ، ساختار دقیق و دقیق المان ها باعث می شود تا روی چشم آسان شود. ستون سمت چپ تقریباً دو برابر اندازه نوار کناری سمت راست است ، که فقط منطقی است و چیزی است که باید هنگام ایجاد طرح های خود به آن فکر کنید.
3. حداکثر برای طراحی خود دو یا سه رنگ پایه انتخاب کنید.
اگر قرمز رنگ قرمز را در وب سایت The First 20th (در بالا) به رنگ سبز آهک تغییر دهید ، چه می کنید؟ خوب به نظر می رسد؟ به احتمال زیاد اینطور نیست. زیرا به همان پالت رنگی تعلق ندارد (و البته سبز آهک ساده ترین رنگ برای کار با آن نیست). وب سایتهایی مانند ColourLovers به دلایلی وجود دارد. شما فقط نمی توانید رنگ های خود را به سبک Rambo ، اسلحه ها را انتخاب کنید. برخی از رنگ ها به خوبی کنار هم قرار می گیرند ، برخی دیگر اینگونه نیستند. بسیاری از تئوری ها در مورد رنگ ها و ترکیب آنها وجود دارد ، از جمله آن می توان به قراردادهایی درمورد طرح های تک رنگ و متضاد اشاره کرد ، اما چیزهای زیادی به عقل سلیم و احساس نسبت به آن می رسد.
برای خودتان بفهمید که چگونه با هم کار می کنند. تا حد امکان بسیاری از وب سایت ها مانند نمونه هایی که در هر یک از بسیاری از وب سایت های ویترین CSS نشان داده شده است (مانند بهترین گالری وب ) را خیس کنید تا احساس چگونگی تعامل رنگ ها با یکدیگر را بدست آورید. دو یا سه رنگ پایه را حداکثر برای طراحی خود انتخاب کنید و سپس از رنگ های روشن (که سبک تر هستند ، با رنگ سفید مخلوط کنید) و سایه ها (که تیره تر است ، با سیاه مخلوط کنید) از این رنگ های پایه استفاده کنید تا در صورت لزوم پالت را گسترش دهید.
انتخاب رنگ های زیبا به همان اندازه انتخاب رنگ های مناسب (یعنی رنگ های مناسب برای کار) مهم است. طراحی وب برای یک رستوران کوچک دنج می تواند به خوبی با رنگهای "خاکی" انجام شود: قرمز ، قهوه ای و غیره. هر رنگ پیامی را ارسال می کند ، و حق شماست که پیام را درست دریافت کنید.
مثال
وب سایت Bence Kucsan دارای سبک طراحی خاص خود است. عمدتا تک رنگ است (رنگ و سایه یک رنگ) و رنگی (سیاه و سفید) با رنگ (قرمز) برای برجسته کردن:
سیاه و سفید شیک و حرفه ای را نشان می دهد ، در حالی که رنگ قرمز ادویه ای را اضافه می کند که باعث می شود عناصر خاصی از آن استفاده کنند و طرح را از نگاه کسل کننده نکشید. البته بیش از رنگ قرمز این طرح را جالب می کند. به هر حال ، یک شرکت به طور خاص این سبک را محبوب کرد.
صحبت از رنگ ، WebDesigner Wall توسط نیک لا سعادت محض است:
همه آن پاستیل های نرم این طرح را درخشان می کنند. در نگاه اول ، انتخاب های رنگی ممکن است کمی دلخواه به نظر برسند ، اما وقتی از نزدیک نگاه می کنید متوجه یک پالت رنگی کاملاً تعریف شده می شوید که برای اطمینان از خوب بودن همه عناصر ضروری است. این وب سایت ، و به ویژه پیش زمینه آن ، همچنین ترکیب خوبی از رنگ ها و گرافیک ها را نشان می دهد ، که ما را به شماره چهار تبدیل می کند ...
4- سعی کنید که گرافیک ها به خوبی کنار هم قرار بگیرند.
خوب ، طراحی عالی نیازی به گرافیک فانتزی ندارد. اما گرافیک ضعیف قطعاً به یک طراحی آسیب می زند. گرافیک ها به پیام تصویری اضافه می کنند. وب سایتهایی مانند WebDesigner Wall دارای تصاویر برجسته ای هستند ، در حالی که سایر سایت ها کم ارزش هستند.
مثال
تیم ون دامم تنها تعداد کمی از گرافیک را در وب سایت خود Max Voltar استفاده می کند ، اما او آنها را با بیشترین فکر و مراقبت پیاده سازی می کند. تصویر پس زمینه غیر مزاحم و تاج پیچیده دو مورد از این گرافیک ها هستند. از لحاظ بصری ، آنها بیش از حد چشمگیر نیستند ، اما همه به ظاهر و احساس وب سایت می افزایند و هیچ جا جای آن نیست.
مدتی است که مکس ولتار طراحی متفاوتی از آنچه در بالا نشان داده شده است. اما به مدت دو ماه که این یکی آنلاین بود ، به راحتی یکی از موارد مورد علاقه من بود. به همین دلیل و به دلیل استفاده از آن از گرافیک بسیار مثال زدنی است ، من آن را نسبت به آخرین نسخه انتخاب کردم.
Rogie King's Komodo Media از لحاظ گرافیکی بسیار سنگین تر است ، کاملاً از نظر فنی و موضوعی.
شما ممکن است تصویرگر یا عکاس خوبی نباشید ، اما این بدان معنی نیست که نمی توانید گرافیک خوبی را در وب سایت خود قرار دهید. برخی مهارت های اساسی فتوشاپ ، احتمالاً برخی از تصاویر سهام و طعم عالی همه چیزهایی هستند که شما نیاز دارید. سعی کنید گرافیک ها به خوبی کنار هم قرار بگیرند و اطمینان حاصل کنید که آنها سبکی را که مد نظر شماست تجسم می کنند. همه ما با یک توانایی طبیعی یکسان نیستیم. با یادگیری دیگران می توانید مواردی را انتخاب کنید ، اما گاهی اوقات فقط باید استایل را انتخاب کنید که مناسب شما باشد (مانند یک سبک تمیز اگر بزرگترین تصویرگر نیستید).
5- تایپوگرافی وب سایت خود را بهبود بخشید.
هنر نوع موضوعی مشکل است که باید در مورد آن صحبت کنیم زیرا عناصر زیادی را در بر می گیرد. در حالی که می توان آن را به عنوان یک شاخه از طراحی در نظر گرفت ، می توان یک عمر خود را برای تسلط بر همه جوانب آن صرف کرد. این مکان برای ارائه مرجع کامل چاپی نیست ، بنابراین ما بحث خود را محدود خواهیم کرد تا در کوتاه مدت چه فایده ای برای شما خواهد داشت.
تایپوگرافی وب در مقایسه با تایپوگرافی چاپی معلول است . بزرگترین تفاوت عدم کنترل کامل ما بر روی ظاهر نوع در وب ، به دلیل شخصیت پویا آن است. بدیهی است ، رندر پویا نقاط قوت خود را دارد ، اما طراحان وب حداقل در حال حاضر کنترل کمی بر نتایج دارند. فونت های موجود در رایانه کاربر ، تفاوت در رندر مرورگر و پلتفرم و به طور کلی پشتیبانی از subpar در CSS باعث می شود که تایپوگرافی وب یک کار ناامیدکننده و ناامیدکننده باشد. اما در حالی که ممکن است ما برای رسیدن به پتانسیل آن به CSS 3 منتظر تایپوگرافی وب باشیم ، اما اکنون ابزارهایی هم داریم که بتوانیم جالب و مهمتر از همه زیبا به نظر برسیم .
پشته قلم
چندین روش نسبتاً آسان برای بهبود چشمگیر تایپوگرافی وب سایت شما وجود دارد ، که سه مورد از آنها در اینجا می خواهیم. یکی از آنها پشته های قلم است .
پشته های قلم فقط CSS اساسی هستند. آنها به شما امکان می دهند نظمی را که در آن باید فونت ها ارائه شود ، تعریف کنید. به طور دقیق ، ما در اینجا از انواع حروف صحبت می کنیم ، نه قلم ها. برای خلاصه اطلاعاتی در این زمینه مراجعه شود به تایپ فیس جان قهوهای مایل به زرد قلم! = .
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
خاصیت فوق باعث می شود تا نوع "Helvetica Neue" نوع بدن را کپی کند. با این وجود ، لازم است رایانه کاربر آن نوع خاصی را نصب کند. امروزه مکینتاش با Helvetica (Neue) از پیش نصب شده همراه است ، اما اکثر دستگاه های ویندوز این کار را نمی کنند.
زیبایی پشته های قلم این است که شما می توانید "خطاهای سقفی" را تعریف کنید ، به این معنی که هر زمان که یک تایپ تعریف شده از دست نرود ، مرورگر به سادگی به دنبال یک مورد بعدی می باشد. البته این بدان معنی است که طراحی دقیقاً برای همه به نظر نمی رسد ، و به همین ترتیب ما دوباره کنترل خود را از دست می دهیم. اما برای کسانی که نمی خواهند به راه حل دیگری متوسل شوند (مانند تعویض تصویر) ، این بهترین کاری است که CSS خالص در حال حاضر ارائه می دهد (تا روزی که بتوانیم با راحتی از @ font-face استفاده کنیم ).
ویلسون ماینر از پشته فونتهایی که در بالا به آن اشاره کردیم استفاده می کند. Helvetica Neue بهبود Helvetica است. و در حالی که Arial تقریباً بر روی هر رایانه (حداقل در دستگاه های ویندوز و مک) نصب شده است و بنابراین یک انتخاب محبوب برای وب است ، بیشتر طراحان Helvetica را به Arial ترجیح می دهند. به این ترتیب ، شما از هر دو دنیا بهترین استفاده را می کنید: Helvetica برای کسانی که آن را دارند و در صورت وجود Helvetica در دسترس نیست Arial.
جان تان از عناوین قلم جالب دیگری برای عناوین خود استفاده می کند:
body { font-family: baskerville, 'palatino linotype', 'times new roman', serif; }
فقط تعداد نسبتاً کمی از بازدیدکنندگان هدر در Baskerville را مشاهده می کنند ، اما این مشکلی نیست. این ویژگی به شخصیت اضافه می کند در حالی که به کسی که این ویژگی را نرساند صدمه می زند. باز هم ، پشته های قلم یک راه حل عالی نیستند ، اما آنها به شما مزیت می دهند .
اندازه گیری و پیشرو
اندازه گیری طول خطوط است ، و پیشرو ارتفاع (یا فاصله عمودی) خطوط است. در CSS ، اندازه گیری را می توان با تعیین عرض برای جعبه حاوی (به عنوان مثال پاراگراف) کنترل کرد. هر دو بر خوانایی تأثیر می گذارند . اگر خطوط خیلی کوتاه یا خیلی طولانی باشند ، کاربران راحت با خواندن مطالب راحت نخواهند شد. فرد اغلب این مشکل را با طرح بندی مایعات مشاهده می کند . بین 40 تا 80 کاراکتر در هر خط ایده آل به نظر می رسد.
با تعریف line-heightویژگی CSS ، می توان سرب افزاری را افزایش داد (یا کاهش داد) . به طور کلی ، ارتفاع خط 1.5 برای پاراگراف ها به خوبی کار می کند. بدین معنی که وقتی اندازه متن 12 نقطه باشد ، ارتفاع خط 18 نقطه می شود (1.5 × 12) ، که به اتاق اتاق تنفس می دهد .
حلق آویز و گلوله
راه سوم برای بهبود خوانایی ، حلق آویز به نقل از گلوله و گلوله است. به جای ترک متن لیست های بولت و نقل قول ها با تراز پیش فرض ، به صورت افقی آن را با بقیه متن در صفحه تراز کنید .
تیم ون دامم برای آخرین طراحی مجدد مکس ولتار از گلوله های آویز استفاده می کند :
ما خط قرمز را اضافه کرده ایم تا تأکید کنیم که چگونه همه متن به صورت افقی تراز شده است. به سادگی با تنظیم padding-leftویژگی CSS لیست بولت 0، می توانید به همان نتیجه برسید.
بیرون کشیدن نقل قول های معلق از طرف دیگر ، به همین سادگی نیست. بیشتر طراحان برای نشانگرها به تصویر پس زمینه متوسل می شوند و مطابق با آن مطابقت دارند ، همانطور که متیو بوکانان انجام می دهد :
علامت نقل قول معلق در اینجا باعث اختلال در جریان متن نمی شود . این جزئیاتی است که اغلب در آن مورد توجه قرار نمی گیرد اما ارزش سرمایه گذاری را دارد.
قوانینی را چاپ کنید که کاربردی ندارند
چاپ و وب یکسان نیستند. به نظر می رسد کاملاً واضح است ، اما بسیاری از مردم مانند یک رفتار با آنها رفتار می کنند. چاپ ثابت است و وب پویا است. داشتن کنترل کامل بر نحوه طراحی وب شما برای همه غیرممکن است .
ریتم عمودی ، متن توجیهی مناسب (با هیپنوتیزم و بدون رودخانه ) و چیدمان های چند ستونی تنها برخی از ویژگی های چاپ است که تقریباً در وب غیرممکن است. بنابراین ، CSS 3 احتمالاً یک راه حل همه و همه راه حل نخواهد بود و احتمالاً چند سال دیگر می تواند قبل از استفاده کامل از آن باشد. اکنون باید این اختلافات را بپذیریم: به وب به عنوان نسخه آنلاین چاپ نگاه نکنید. در عوض ، از پتانسیل ذاتی وب استفاده کنید.
کلمه ای در مورد جایگزینی تصویر
در مورد جایگزینی تصویر (تکنیک تعویض فونت ها با تصاویر) چطور؟ ما در مورد پشته های فونت صحبت کرده ایم ، اما آیا آنها نسبت به جایگزینی تصویر پایین نیستند؟ خوب ، این به آنچه شما فکر می کنید مهمتر است بستگی دارد: قادر به نمایش قلم دقیق مورد نظر خود یا داشتن محتوای پویا ، در دسترس و دوست داشتنی برای سئو؟ برخی از تکنیک های جایگزینی تصویر بسیار پیشرفته شده اند ، اما هنوز هم به اندازه متن ساده انعطاف پذیر نیستند. جایگزینی تصویر به خوبی به هدر و گزیده ها کمک می کند ، اما به سختی راه حلی برای متن بدن نیست.
6. با اضافه کردن فضای سفید در اطراف خود ، عناصر را از هم متمایز کنید.
فضای سفید یا فضای منفی با آنچه در آنجا نیست ارتباط دارد . فضای سفید مانند اندازه گیری و پیشرو ، فضای تنفس و آرامش مکانی را به متن می دهد . با اضافه کردن فضای سفید در اطراف آنها می توانید عناصر را از هم متمایز کنید. به عنوان مثال ، کپی نباید به نظر برسد. برای اطمینان از خوانایی ، اطمینان حاصل کنید که پاراگراف ها از کف بالایی برخوردار هستند.
تبلیغات عطر - یا هر تبلیغی برای یک محصول لوکس برای آن ماده - به دلیل استفاده از فضای سفید شناخته شده اند ... بارهای آن؛ و یک نوع سری برای اندازه گیری خوب.
مثال
فکر می کنم وقت آن رسیده است که یک پلاگین بی شرمانه باشد. تصویر بالا از وب سایت خود من Shift (px) است. طراحی بسیار وابسته به تایپوگرافی و فضای سفید است. فضای سفید احتمالاً حدود 50٪ صفحه را در بر می گیرد. فضای سفید یکی از ساده ترین است (زیرا شما واقعاً چیزی اضافه نمی کنید ، هستید؟) و مؤثرترین راهها برای ایجاد یک طراحی بصری دلپذیر و قابل خواندن است.
فضای سفید کلاس زیادی را به یک طراحی می افزاید. نترسید که بعضی از سوراخ ها را باز کنید ، حتی شکاف ها را باز کنید. طراحان بی تجربه وسوسه می شوند چیزی را در هر گوشه کوچک قرار دهند. طراحی در مورد برقراری ارتباط پیام است. بنابراین عناصر طراحی باید از این پیام پشتیبانی کنند و باعث افزایش سر و صدای آن نشوند.
مثال خوب دیگری از فضای سفید فراوان:
کایل مایر آستریا نشان می دهد که برای طراحی دلپذیر چیز زیادی لازم نیست. ممکن است برخی از افراد "مینیمالیستی" را با "ساده" اشتباه بگیرند. اما کنار کشیدن چنین سبکی نه ساده و نه آسان است (حتی اگر کسی با گرافیک یا تصاویر عالی نباشد).
7. همه عناصر را به هم وصل کنید.
"اتصال" در اینجا کمی اصطلاح ساخته شده است ، اما به نظر می رسد بهترین چیزی است که منظور ما از آن است. اتصال در اینجا به یک طراحی وب اشاره دارد که هم وحدت و هم قوام دارد . این دو ویژگی نشانگر حرفه ای بودن یک طرح (و بنابراین طراح آن) است. آنها ویژگی های بسیار گسترده ای هستند. یک طرح باید در استفاده از رنگها ، در قلمهای متنوع ، با نمادهای آن و غیره سازگار باشد. یک طراحی می تواند عالی به نظر برسد و هنوز هم از ناسازگاری رنج می برد.
وقتی یک طرح متناقض باشد ، وحدت آن را می توان در کاربر از دست داد. وحدت با قوام کمی متفاوت است. وحدت به چگونگی تعامل و تناسب عناصر مختلف در یک طرح اشاره دارد. به عنوان مثال ، آیا رنگ ها و گرافیک ها مطابقت دارند؟ آیا همه چیز به یک پیام یکپارچه کمک می کند؟ از سوی دیگر ، قوام بین صفحات یک طرح یافت می شود.
وحدت شاید مهمترین این دو باشد. بدون وحدت ، داشتن یک طرح خوب کار سختی است. با این وجود ، ناسازگاری ممکن است کمی "دست و پا گیر" به نظر برسد اما ممکن است طرح را "بد" نکند.
از هفت اصل مورد بحث در این مقاله ، ارتباط مهمترین است. ارتباط با نحوه جمع شدن همه عناصر ارتباط دارد: تعادل ، شبکه ، رنگ ها ، گرافیک ، نوع و فضای سفید. این نوعی چسب است که همه چیز را به هم وصل می کند . بدون این چسب ، طرح از هم جدا می شود. شما می توانستید یک نوع زیبا و یک پالت رنگی برجسته و دقیق را انتخاب کنید ، اما اگر این گرافیک ها افتضاح هستند یا به سادگی با یکدیگر مطابقت ندارند یا اگر همه چیز بدون تفکر با هم چیده شود ، طراحی از بین خواهد رفت.
این سخت ترین قسمت طراحی است. این چیزی نیست که به راحتی آموزش داده شود یا اصلاً لزوماً می توان آن را آموزش داد. کمی توانایی و تجربه طبیعی لازم است. اما این همان چیزی است که هست ، و باعث می شود تا یک طراحی در آخر خوب به نظر برسد.
مثال
ما زودتر به دلیل داشتن گرافیک های زیبا ، از WebDesigner Wall نیک لا ستایش کردیم ، اما این نیز نمونه خوبی از اتصال است. وقتی به طور کلی به گرافیک ها و سبک نگاه می کنید ، همه چیز نگاهی به آبرنگ دست به دست می دهد: تصاویر مقالات ، تصاویر پس زمینه آبرنگ ، doodles و آیکون های دست ساز ، شیوه رای گیری و غیره بر. توجه به جزئیات باعث می شود این طراحی از برتری برخوردار باشد.
منابع بیشتر
پنج قدم ساده برای طراحی سیستم های شبکه
یک راهنمای مبتدی برای شبکه ها است.
نسبت طلایی در طراحی وب
8 راه ساده برای بهبود تایپوگرافی در طراحی های شما
فونت ها و وب
درباره وضعیت فونت ها در وب و جایگزینی تصویر.
4 اصول طراحی خوب برای وب سایت ها
چهار اصل دیگر ، بیشتر از دیدگاه عملی.
نتیجه
طراحی خوب وب محدود به هفت اصل اصلی نیست که در اینجا مورد بحث قرار می گیرد. جنبه هایی مانند دسترسی ، خوانایی و قابلیت استفاده نیز نقش ایفا می کند.
به همین دلیل طراحی وب بسیار دشوار است. خیس کردن پاهای شما در طراحی بسیار آسان است ، به خصوص امروز ، با بسیاری از سیستم های مدیریت محتوا ، ابزار بلاگ و مضامین به راحتی در دسترس است. اما واقعاً تسلط بر همه جنبه های طراحی وب زمان می برد و ، بیایید صادقانه ، استعداد باشیم. داشتن توانایی در ساختن طرح های زیبا فقط یک جنبه دارد ، اما نکته مهمی است.
یاد بگیرید زندگی کنید و باهوش تر کار کنید ، سخت تر نیس
چگونه یک طراحی وب خوب به نظر برسد
طرح خود را متعادل نگه دارید.
طرح خود را با استفاده از شبکه ها تقسیم کنید.
برای طراحی خود حداکثر دو یا سه رنگ پایه را انتخاب کنید.
سعی کنید گرافیک ها به خوبی کنار هم قرار بگیرند.
تایپوگرافی وب سایت خود را بهبود بخشید.
با اضافه کردن فضای سفید در اطراف خود ، عناصر را متمایز کنید.
همه عناصر را به هم وصل کنید.
به نظر می رسد همه و پدربزرگشان (و سگ) این روزها وب سایت دارند. وب روز به روز شلوغ تر می شود ، به همین دلیل که خواندن این مقاله به ده ها وب سایت اضافه می شود. توجه به این امر در بین توده ها سخت و دشوارتر می شود.
نکته حرفه ای
شما نمی توانید طراحی وب شگفت انگیز و بدون اشکال spiffy داشته باشید. امروز فرم های وب زیبا طراحی کنید.
"خوشبختانه" برای ما طراحان ، به نظر نمی رسد که همه بدانند چه چیزی باعث ایجاد یا شکسته شدن یک طراحی وب می شود . در حال حاضر ، طراحی وب تا حدی فرایندی خلاقانه است و به همین دلیل می توان آن را بیشتر از علم نامید. اما از آنجا که ذاتاً رسانه ای برای ارائه است ، برخی از قوانین (یا حداقل اصول) اعمال می شوند. با دنبال کردن برخی از نشانگرهای ساده ، هر کسی باید بتواند طرحی بصری دلپذیر ایجاد کند و یک قدم به شهرت نزدیک شود. خوب، آن را نمی که ساده، و استعداد و تجربه مهم، اما هر کسی می تواند صفحه اصلی خود را به چیزی زیباتر عرض چند دقیقه صرف تبدیل شود.
چگونه طراحی وب خوب به نظر برسد (اینفوگرافیک)
بنابراین چه چیزی زیبایی را ایجاد می کند؟ فلش نیست. نه اینکه بگوییم فلش فاقد شایستگی است ، اما Flash به تنهایی طراحی را خوب نمی کند. برخی از وب سایت های ناخوشایند Flash در آنجا هستند. همچنین ، لازم نیست یک تصویرگر عالی برای تهیه طرح های جذاب باشد. در عوض ، به طراحی وب به عنوان همزیستی عناصر مختلف نگاه کنید . هیچ عنصر واحدی بیشترین شمارش را ندارد. بلکه ، عناصر باعث می شود یک طراحی خوب به نظر برسد.
1. طرح خود را متعادل نگه دارید.
تعادل همه چیز در مورد این است که اطمینان حاصل شود که طرح شما به یک طرف یا طرف دیگر نمی چرخد. مانند تعادل وزن در دستیابی به تقارن یا عدم تقارن است.
مثال
در گرافیک عنوان در وب سایت تفریق Khoi Vinh در زیر نگاه کنید. من این مثال را از اصول طراحی وب زیبا توسط جیسون بیرد گرفتم. جیسون اشاره می کند که چگونه صلیب به سمت راست ، وزن بصری اضافه شده ای را فراهم می کند که سگ در سمت چپ فراهم می کند. این یک جزئیات کوچک اما جزئی نیست. خودتان را با مخفی کردن صلیب با دست خود ببینید.
این همان چیزی است که ما تعادل نامتقارن می نامیم و این همان تعادل است. اگر به نحوه چیدمان مسائل دقت نکنید ، طراحی به سرعت نامتعادل می شود. شما می توانید وزن بصری یک طرح را از جهات مختلف ، مانند رنگ ، اندازه و اضافه یا حذف عناصر ، دستکاری کنید. اگر می خواستید صلیب را بسازید ، مثلاً پرتقالی پر جنب و جوش ، سنگین تر می شود و شاید دوباره طرح را از حالت تعادل خارج کنید. دستیابی به تعادل نامتقارن یک ماده ظریف است که برای تنظیم دقیق و چشمی آموزش دیده ، زمان زیادی لازم دارد.
در زیر مثال دیگری از توازن متقارن ، توسط بیست و یکم آورده شده است . اگرچه گرافیک هدر به صورت نامتقارن متعادل است (آیا می توانید نحوه انجام آن را تشخیص دهید) ، اما بقیه طرح های پایین به پایین دارای ستون های متقارن هستند. تعادل نامتقارن ممکن است برداشتن آن سخت تر باشد اما تمایل دارد طراحی را بازیگوش تر کند.
خواهید فهمید که هر طرحی که فکر می کنید خوب است ، یک توازن به خوبی ساخته شده در زیر آن دارد. و هر طرحی که در اینجا نشان داده می شود در هر 7 اصل مورد بحث ما امتیاز بالایی دارد. بنابراین یک دقیقه وقت بگذارید تا از بالا و پایین پیمایش کنید و در صورت گذر همه آنها از خودتان ببینید.
2. طراحی خود را با استفاده از شبکه ها تقسیم کنید.
مفهوم شبکه ها ارتباط نزدیکی با تعادل دارند. شبکه ها یک سری از خط کش های افقی و عمودی هستند که به شما کمک می کنند یک طرح را "جابجایی" کنید. به ستون ها فکر کنید. ستونها خوانایی را بهبود می بخشد و باعث می شود محتوای صفحه راحت تر جذب شود. فاصله گرفتن و استفاده از Rule of Thirds (یا همان نسبت طلایی مشابه ) همه چیز را روی چشم آسانتر می کند.
به عنوان مثال Rule of Thirds and Golden Ratio به همین دلیل است که نوارهای کناری معمولاً حدود یک سوم از عرض صفحه هستند و چرا منطقه اصلی محتوای تقریباً برابر با عرض طراحی تقسیم شده با 1.62 است (مساوی phi در ریاضیات). ما نمی خواهیم به این دلیل بپرسیم ، اما به نظر می رسد در عمل صادق است. همچنین به همین دلیل است که سوژه در عکس های گرفته شده حرفه ای معمولاً نه در وسط بلکه در تقاطع یک شبکه نه مربع خیالی (سه به سه ، با دو خط افقی و دو خط عمودی) قرار می گیرد.
مثال
این شبکه به ویژه به طراحی های مینیمالیستی وام می دهد. 5 سی و یک توسط Derek Punsalan نشان می دهد که چرا:
در حالی که طراحی به خودی خود از نظر بصری چشمگیر نیست ، ساختار دقیق و دقیق المان ها باعث می شود تا روی چشم آسان شود. ستون سمت چپ تقریباً دو برابر اندازه نوار کناری سمت راست است ، که فقط منطقی است و چیزی است که باید هنگام ایجاد طرح های خود به آن فکر کنید.
3. حداکثر برای طراحی خود دو یا سه رنگ پایه انتخاب کنید.
اگر قرمز رنگ قرمز را در وب سایت The First 20th (در بالا) به رنگ سبز آهک تغییر دهید ، چه می کنید؟ خوب به نظر می رسد؟ به احتمال زیاد اینطور نیست. زیرا به همان پالت رنگی تعلق ندارد (و البته سبز آهک ساده ترین رنگ برای کار با آن نیست). وب سایتهایی مانند ColourLovers به دلایلی وجود دارد. شما فقط نمی توانید رنگ های خود را به سبک Rambo ، اسلحه ها را انتخاب کنید. برخی از رنگ ها به خوبی کنار هم قرار می گیرند ، برخی دیگر اینگونه نیستند. بسیاری از تئوری ها در مورد رنگ ها و ترکیب آنها وجود دارد ، از جمله آن می توان به قراردادهایی درمورد طرح های تک رنگ و متضاد اشاره کرد ، اما چیزهای زیادی به عقل سلیم و احساس نسبت به آن می رسد.
برای خودتان بفهمید که چگونه با هم کار می کنند. تا حد امکان بسیاری از وب سایت ها مانند نمونه هایی که در هر یک از بسیاری از وب سایت های ویترین CSS نشان داده شده است (مانند بهترین گالری وب ) را خیس کنید تا احساس چگونگی تعامل رنگ ها با یکدیگر را بدست آورید. دو یا سه رنگ پایه را حداکثر برای طراحی خود انتخاب کنید و سپس از رنگ های روشن (که سبک تر هستند ، با رنگ سفید مخلوط کنید) و سایه ها (که تیره تر است ، با سیاه مخلوط کنید) از این رنگ های پایه استفاده کنید تا در صورت لزوم پالت را گسترش دهید.
انتخاب رنگ های زیبا به همان اندازه انتخاب رنگ های مناسب (یعنی رنگ های مناسب برای کار) مهم است. طراحی وب برای یک رستوران کوچک دنج می تواند به خوبی با رنگهای "خاکی" انجام شود: قرمز ، قهوه ای و غیره. هر رنگ پیامی را ارسال می کند ، و حق شماست که پیام را درست دریافت کنید.
مثال
وب سایت Bence Kucsan دارای سبک طراحی خاص خود است. عمدتا تک رنگ است (رنگ و سایه یک رنگ) و رنگی (سیاه و سفید) با رنگ (قرمز) برای برجسته کردن:
سیاه و سفید شیک و حرفه ای را نشان می دهد ، در حالی که رنگ قرمز ادویه ای را اضافه می کند که باعث می شود عناصر خاصی از آن استفاده کنند و طرح را از نگاه کسل کننده نکشید. البته بیش از رنگ قرمز این طرح را جالب می کند. به هر حال ، یک شرکت به طور خاص این سبک را محبوب کرد.
صحبت از رنگ ، WebDesigner Wall توسط نیک لا سعادت محض است:
همه آن پاستیل های نرم این طرح را درخشان می کنند. در نگاه اول ، انتخاب های رنگی ممکن است کمی دلخواه به نظر برسند ، اما وقتی از نزدیک نگاه می کنید متوجه یک پالت رنگی کاملاً تعریف شده می شوید که برای اطمینان از خوب بودن همه عناصر ضروری است. این وب سایت ، و به ویژه پیش زمینه آن ، همچنین ترکیب خوبی از رنگ ها و گرافیک ها را نشان می دهد ، که ما را به شماره چهار تبدیل می کند ...
4- سعی کنید که گرافیک ها به خوبی کنار هم قرار بگیرند.
خوب ، طراحی عالی نیازی به گرافیک فانتزی ندارد. اما گرافیک ضعیف قطعاً به یک طراحی آسیب می زند. گرافیک ها به پیام تصویری اضافه می کنند. وب سایتهایی مانند WebDesigner Wall دارای تصاویر برجسته ای هستند ، در حالی که سایر سایت ها کم ارزش هستند.
مثال
تیم ون دامم تنها تعداد کمی از گرافیک را در وب سایت خود Max Voltar استفاده می کند ، اما او آنها را با بیشترین فکر و مراقبت پیاده سازی می کند. تصویر پس زمینه غیر مزاحم و تاج پیچیده دو مورد از این گرافیک ها هستند. از لحاظ بصری ، آنها بیش از حد چشمگیر نیستند ، اما همه به ظاهر و احساس وب سایت می افزایند و هیچ جا جای آن نیست.
مدتی است که مکس ولتار طراحی متفاوتی از آنچه در بالا نشان داده شده است. اما به مدت دو ماه که این یکی آنلاین بود ، به راحتی یکی از موارد مورد علاقه من بود. به همین دلیل و به دلیل استفاده از آن از گرافیک بسیار مثال زدنی است ، من آن را نسبت به آخرین نسخه انتخاب کردم.
Rogie King's Komodo Media از لحاظ گرافیکی بسیار سنگین تر است ، کاملاً از نظر فنی و موضوعی.
شما ممکن است تصویرگر یا عکاس خوبی نباشید ، اما این بدان معنی نیست که نمی توانید گرافیک خوبی را در وب سایت خود قرار دهید. برخی مهارت های اساسی فتوشاپ ، احتمالاً برخی از تصاویر سهام و طعم عالی همه چیزهایی هستند که شما نیاز دارید. سعی کنید گرافیک ها به خوبی کنار هم قرار بگیرند و اطمینان حاصل کنید که آنها سبکی را که مد نظر شماست تجسم می کنند. همه ما با یک توانایی طبیعی یکسان نیستیم. با یادگیری دیگران می توانید مواردی را انتخاب کنید ، اما گاهی اوقات فقط باید استایل را انتخاب کنید که مناسب شما باشد (مانند یک سبک تمیز اگر بزرگترین تصویرگر نیستید).
5- تایپوگرافی وب سایت خود را بهبود بخشید.
هنر نوع موضوعی مشکل است که باید در مورد آن صحبت کنیم زیرا عناصر زیادی را در بر می گیرد. در حالی که می توان آن را به عنوان یک شاخه از طراحی در نظر گرفت ، می توان یک عمر خود را برای تسلط بر همه جوانب آن صرف کرد. این مکان برای ارائه مرجع کامل چاپی نیست ، بنابراین ما بحث خود را محدود خواهیم کرد تا در کوتاه مدت چه فایده ای برای شما خواهد داشت.
تایپوگرافی وب در مقایسه با تایپوگرافی چاپی معلول است . بزرگترین تفاوت عدم کنترل کامل ما بر روی ظاهر نوع در وب ، به دلیل شخصیت پویا آن است. بدیهی است ، رندر پویا نقاط قوت خود را دارد ، اما طراحان وب حداقل در حال حاضر کنترل کمی بر نتایج دارند. فونت های موجود در رایانه کاربر ، تفاوت در رندر مرورگر و پلتفرم و به طور کلی پشتیبانی از subpar در CSS باعث می شود که تایپوگرافی وب یک کار ناامیدکننده و ناامیدکننده باشد. اما در حالی که ممکن است ما برای رسیدن به پتانسیل آن به CSS 3 منتظر تایپوگرافی وب باشیم ، اما اکنون ابزارهایی هم داریم که بتوانیم جالب و مهمتر از همه زیبا به نظر برسیم .
پشته قلم
چندین روش نسبتاً آسان برای بهبود چشمگیر تایپوگرافی وب سایت شما وجود دارد ، که سه مورد از آنها در اینجا می خواهیم. یکی از آنها پشته های قلم است .
پشته های قلم فقط CSS اساسی هستند. آنها به شما امکان می دهند نظمی را که در آن باید فونت ها ارائه شود ، تعریف کنید. به طور دقیق ، ما در اینجا از انواع حروف صحبت می کنیم ، نه قلم ها. برای خلاصه اطلاعاتی در این زمینه مراجعه شود به تایپ فیس جان قهوهای مایل به زرد قلم! = .
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
خاصیت فوق باعث می شود تا نوع "Helvetica Neue" نوع بدن را کپی کند. با این وجود ، لازم است رایانه کاربر آن نوع خاصی را نصب کند. امروزه مکینتاش با Helvetica (Neue) از پیش نصب شده همراه است ، اما اکثر دستگاه های ویندوز این کار را نمی کنند.
زیبایی پشته های قلم این است که شما می توانید "خطاهای سقفی" را تعریف کنید ، به این معنی که هر زمان که یک تایپ تعریف شده از دست نرود ، مرورگر به سادگی به دنبال یک مورد بعدی می باشد. البته این بدان معنی است که طراحی دقیقاً برای همه به نظر نمی رسد ، و به همین ترتیب ما دوباره کنترل خود را از دست می دهیم. اما برای کسانی که نمی خواهند به راه حل دیگری متوسل شوند (مانند تعویض تصویر) ، این بهترین کاری است که CSS خالص در حال حاضر ارائه می دهد (تا روزی که بتوانیم با راحتی از @ font-face استفاده کنیم ).
ویلسون ماینر از پشته فونتهایی که در بالا به آن اشاره کردیم استفاده می کند. Helvetica Neue بهبود Helvetica است. و در حالی که Arial تقریباً بر روی هر رایانه (حداقل در دستگاه های ویندوز و مک) نصب شده است و بنابراین یک انتخاب محبوب برای وب است ، بیشتر طراحان Helvetica را به Arial ترجیح می دهند. به این ترتیب ، شما از هر دو دنیا بهترین استفاده را می کنید: Helvetica برای کسانی که آن را دارند و در صورت وجود Helvetica در دسترس نیست Arial.
جان تان از عناوین قلم جالب دیگری برای عناوین خود استفاده می کند:
body { font-family: baskerville, 'palatino linotype', 'times new roman', serif; }
فقط تعداد نسبتاً کمی از بازدیدکنندگان هدر در Baskerville را مشاهده می کنند ، اما این مشکلی نیست. این ویژگی به شخصیت اضافه می کند در حالی که به کسی که این ویژگی را نرساند صدمه می زند. باز هم ، پشته های قلم یک راه حل عالی نیستند ، اما آنها به شما مزیت می دهند .
اندازه گیری و پیشرو
اندازه گیری طول خطوط است ، و پیشرو ارتفاع (یا فاصله عمودی) خطوط است. در CSS ، اندازه گیری را می توان با تعیین عرض برای جعبه حاوی (به عنوان مثال پاراگراف) کنترل کرد. هر دو بر خوانایی تأثیر می گذارند . اگر خطوط خیلی کوتاه یا خیلی طولانی باشند ، کاربران راحت با خواندن مطالب راحت نخواهند شد. فرد اغلب این مشکل را با طرح بندی مایعات مشاهده می کند . بین 40 تا 80 کاراکتر در هر خط ایده آل به نظر می رسد.
با تعریف line-heightویژگی CSS ، می توان سرب افزاری را افزایش داد (یا کاهش داد) . به طور کلی ، ارتفاع خط 1.5 برای پاراگراف ها به خوبی کار می کند. بدین معنی که وقتی اندازه متن 12 نقطه باشد ، ارتفاع خط 18 نقطه می شود (1.5 × 12) ، که به اتاق اتاق تنفس می دهد .
حلق آویز و گلوله
راه سوم برای بهبود خوانایی ، حلق آویز به نقل از گلوله و گلوله است. به جای ترک متن لیست های بولت و نقل قول ها با تراز پیش فرض ، به صورت افقی آن را با بقیه متن در صفحه تراز کنید .
تیم ون دامم برای آخرین طراحی مجدد مکس ولتار از گلوله های آویز استفاده می کند :
ما خط قرمز را اضافه کرده ایم تا تأکید کنیم که چگونه همه متن به صورت افقی تراز شده است. به سادگی با تنظیم padding-leftویژگی CSS لیست بولت 0، می توانید به همان نتیجه برسید.
بیرون کشیدن نقل قول های معلق از طرف دیگر ، به همین سادگی نیست. بیشتر طراحان برای نشانگرها به تصویر پس زمینه متوسل می شوند و مطابق با آن مطابقت دارند ، همانطور که متیو بوکانان انجام می دهد :
علامت نقل قول معلق در اینجا باعث اختلال در جریان متن نمی شود . این جزئیاتی است که اغلب در آن مورد توجه قرار نمی گیرد اما ارزش سرمایه گذاری را دارد.
قوانینی را چاپ کنید که کاربردی ندارند
چاپ و وب یکسان نیستند. به نظر می رسد کاملاً واضح است ، اما بسیاری از مردم مانند یک رفتار با آنها رفتار می کنند. چاپ ثابت است و وب پویا است. داشتن کنترل کامل بر نحوه طراحی وب شما برای همه غیرممکن است .
ریتم عمودی ، متن توجیهی مناسب (با هیپنوتیزم و بدون رودخانه ) و چیدمان های چند ستونی تنها برخی از ویژگی های چاپ است که تقریباً در وب غیرممکن است. بنابراین ، CSS 3 احتمالاً یک راه حل همه و همه راه حل نخواهد بود و احتمالاً چند سال دیگر می تواند قبل از استفاده کامل از آن باشد. اکنون باید این اختلافات را بپذیریم: به وب به عنوان نسخه آنلاین چاپ نگاه نکنید. در عوض ، از پتانسیل ذاتی وب استفاده کنید.
کلمه ای در مورد جایگزینی تصویر
در مورد جایگزینی تصویر (تکنیک تعویض فونت ها با تصاویر) چطور؟ ما در مورد پشته های فونت صحبت کرده ایم ، اما آیا آنها نسبت به جایگزینی تصویر پایین نیستند؟ خوب ، این به آنچه شما فکر می کنید مهمتر است بستگی دارد: قادر به نمایش قلم دقیق مورد نظر خود یا داشتن محتوای پویا ، در دسترس و دوست داشتنی برای سئو؟ برخی از تکنیک های جایگزینی تصویر بسیار پیشرفته شده اند ، اما هنوز هم به اندازه متن ساده انعطاف پذیر نیستند. جایگزینی تصویر به خوبی به هدر و گزیده ها کمک می کند ، اما به سختی راه حلی برای متن بدن نیست.
6. با اضافه کردن فضای سفید در اطراف خود ، عناصر را از هم متمایز کنید.
فضای سفید یا فضای منفی با آنچه در آنجا نیست ارتباط دارد . فضای سفید مانند اندازه گیری و پیشرو ، فضای تنفس و آرامش مکانی را به متن می دهد . با اضافه کردن فضای سفید در اطراف آنها می توانید عناصر را از هم متمایز کنید. به عنوان مثال ، کپی نباید به نظر برسد. برای اطمینان از خوانایی ، اطمینان حاصل کنید که پاراگراف ها از کف بالایی برخوردار هستند.
تبلیغات عطر - یا هر تبلیغی برای یک محصول لوکس برای آن ماده - به دلیل استفاده از فضای سفید شناخته شده اند ... بارهای آن؛ و یک نوع سری برای اندازه گیری خوب.
مثال
فکر می کنم وقت آن رسیده است که یک پلاگین بی شرمانه باشد. تصویر بالا از وب سایت خود من Shift (px) است. طراحی بسیار وابسته به تایپوگرافی و فضای سفید است. فضای سفید احتمالاً حدود 50٪ صفحه را در بر می گیرد. فضای سفید یکی از ساده ترین است (زیرا شما واقعاً چیزی اضافه نمی کنید ، هستید؟) و مؤثرترین راهها برای ایجاد یک طراحی بصری دلپذیر و قابل خواندن است.
فضای سفید کلاس زیادی را به یک طراحی می افزاید. نترسید که بعضی از سوراخ ها را باز کنید ، حتی شکاف ها را باز کنید. طراحان بی تجربه وسوسه می شوند چیزی را در هر گوشه کوچک قرار دهند. طراحی در مورد برقراری ارتباط پیام است. بنابراین عناصر طراحی باید از این پیام پشتیبانی کنند و باعث افزایش سر و صدای آن نشوند.
مثال خوب دیگری از فضای سفید فراوان:
کایل مایر آستریا نشان می دهد که برای طراحی دلپذیر چیز زیادی لازم نیست. ممکن است برخی از افراد "مینیمالیستی" را با "ساده" اشتباه بگیرند. اما کنار کشیدن چنین سبکی نه ساده و نه آسان است (حتی اگر کسی با گرافیک یا تصاویر عالی نباشد).
7. همه عناصر را به هم وصل کنید.
"اتصال" در اینجا کمی اصطلاح ساخته شده است ، اما به نظر می رسد بهترین چیزی است که منظور ما از آن است. اتصال در اینجا به یک طراحی وب اشاره دارد که هم وحدت و هم قوام دارد . این دو ویژگی نشانگر حرفه ای بودن یک طرح (و بنابراین طراح آن) است. آنها ویژگی های بسیار گسترده ای هستند. یک طرح باید در استفاده از رنگها ، در قلمهای متنوع ، با نمادهای آن و غیره سازگار باشد. یک طراحی می تواند عالی به نظر برسد و هنوز هم از ناسازگاری رنج می برد.
وقتی یک طرح متناقض باشد ، وحدت آن را می توان در کاربر از دست داد. وحدت با قوام کمی متفاوت است. وحدت به چگونگی تعامل و تناسب عناصر مختلف در یک طرح اشاره دارد. به عنوان مثال ، آیا رنگ ها و گرافیک ها مطابقت دارند؟ آیا همه چیز به یک پیام یکپارچه کمک می کند؟ از سوی دیگر ، قوام بین صفحات یک طرح یافت می شود.
وحدت شاید مهمترین این دو باشد. بدون وحدت ، داشتن یک طرح خوب کار سختی است. با این وجود ، ناسازگاری ممکن است کمی "دست و پا گیر" به نظر برسد اما ممکن است طرح را "بد" نکند.
از هفت اصل مورد بحث در این مقاله ، ارتباط مهمترین است. ارتباط با نحوه جمع شدن همه عناصر ارتباط دارد: تعادل ، شبکه ، رنگ ها ، گرافیک ، نوع و فضای سفید. این نوعی چسب است که همه چیز را به هم وصل می کند . بدون این چسب ، طرح از هم جدا می شود. شما می توانستید یک نوع زیبا و یک پالت رنگی برجسته و دقیق را انتخاب کنید ، اما اگر این گرافیک ها افتضاح هستند یا به سادگی با یکدیگر مطابقت ندارند یا اگر همه چیز بدون تفکر با هم چیده شود ، طراحی از بین خواهد رفت.
این سخت ترین قسمت طراحی است. این چیزی نیست که به راحتی آموزش داده شود یا اصلاً لزوماً می توان آن را آموزش داد. کمی توانایی و تجربه طبیعی لازم است. اما این همان چیزی است که هست ، و باعث می شود تا یک طراحی در آخر خوب به نظر برسد.
مثال
ما زودتر به دلیل داشتن گرافیک های زیبا ، از WebDesigner Wall نیک لا ستایش کردیم ، اما این نیز نمونه خوبی از اتصال است. وقتی به طور کلی به گرافیک ها و سبک نگاه می کنید ، همه چیز نگاهی به آبرنگ دست به دست می دهد: تصاویر مقالات ، تصاویر پس زمینه آبرنگ ، doodles و آیکون های دست ساز ، شیوه رای گیری و غیره بر. توجه به جزئیات باعث می شود این طراحی از برتری برخوردار باشد.
منابع بیشتر
پنج قدم ساده برای طراحی سیستم های شبکه
یک راهنمای مبتدی برای شبکه ها است.
نسبت طلایی در طراحی وب
8 راه ساده برای بهبود تایپوگرافی در طراحی های شما
فونت ها و وب
درباره وضعیت فونت ها در وب و جایگزینی تصویر.
4 اصول طراحی خوب برای وب سایت ها
چهار اصل دیگر ، بیشتر از دیدگاه عملی.
نتیجه
طراحی خوب وب محدود به هفت اصل اصلی نیست که در اینجا مورد بحث قرار می گیرد. جنبه هایی مانند دسترسی ، خوانایی و قابلیت استفاده نیز نقش ایفا می کند.
به همین دلیل طراحی وب بسیار دشوار است. خیس کردن پاهای شما در طراحی بسیار آسان است ، به خصوص امروز ، با بسیاری از سیستم های مدیریت محتوا ، ابزار بلاگ و مضامین به راحتی در دسترس است. اما واقعاً تسلط بر همه جنبه های طراحی وب زمان می برد و ، بیایید صادقانه ، استعداد باشیم. داشتن توانایی در ساختن طرح های زیبا فقط یک جنبه دارد ، اما نکته مهمی است.
یاد بگیرید زندگی کنید و باهوش تر کار کنید ، سخت تر نیس
چگونه یک طراحی وب خوب به نظر برسد
طرح خود را متعادل نگه دارید.
طرح خود را با استفاده از شبکه ها تقسیم کنید.
برای طراحی خود حداکثر دو یا سه رنگ پایه را انتخاب کنید.
سعی کنید گرافیک ها به خوبی کنار هم قرار بگیرند.
تایپوگرافی وب سایت خود را بهبود بخشید.
با اضافه کردن فضای سفید در اطراف خود ، عناصر را متمایز کنید.
همه عناصر را به هم وصل کنید.
به نظر می رسد همه و پدربزرگشان (و سگ) این روزها وب سایت دارند. وب روز به روز شلوغ تر می شود ، به همین دلیل که خواندن این مقاله به ده ها وب سایت اضافه می شود. توجه به این امر در بین توده ها سخت و دشوارتر می شود.
نکته حرفه ای
شما نمی توانید طراحی وب شگفت انگیز و بدون اشکال spiffy داشته باشید. امروز فرم های وب زیبا طراحی کنید.
"خوشبختانه" برای ما طراحان ، به نظر نمی رسد که همه بدانند چه چیزی باعث ایجاد یا شکسته شدن یک طراحی وب می شود . در حال حاضر ، طراحی وب تا حدی فرایندی خلاقانه است و به همین دلیل می توان آن را بیشتر از علم نامید. اما از آنجا که ذاتاً رسانه ای برای ارائه است ، برخی از قوانین (یا حداقل اصول) اعمال می شوند. با دنبال کردن برخی از نشانگرهای ساده ، هر کسی باید بتواند طرحی بصری دلپذیر ایجاد کند و یک قدم به شهرت نزدیک شود. خوب، آن را نمی که ساده، و استعداد و تجربه مهم، اما هر کسی می تواند صفحه اصلی خود را به چیزی زیباتر عرض چند دقیقه صرف تبدیل شود.
چگونه طراحی وب خوب به نظر برسد (اینفوگرافیک)
بنابراین چه چیزی زیبایی را ایجاد می کند؟ فلش نیست. نه اینکه بگوییم فلش فاقد شایستگی است ، اما Flash به تنهایی طراحی را خوب نمی کند. برخی از وب سایت های ناخوشایند Flash در آنجا هستند. همچنین ، لازم نیست یک تصویرگر عالی برای تهیه طرح های جذاب باشد. در عوض ، به طراحی وب به عنوان همزیستی عناصر مختلف نگاه کنید . هیچ عنصر واحدی بیشترین شمارش را ندارد. بلکه ، عناصر باعث می شود یک طراحی خوب به نظر برسد.
1. طرح خود را متعادل نگه دارید.
تعادل همه چیز در مورد این است که اطمینان حاصل شود که طرح شما به یک طرف یا طرف دیگر نمی چرخد. مانند تعادل وزن در دستیابی به تقارن یا عدم تقارن است.
مثال
در گرافیک عنوان در وب سایت تفریق Khoi Vinh در زیر نگاه کنید. من این مثال را از اصول طراحی وب زیبا توسط جیسون بیرد گرفتم. جیسون اشاره می کند که چگونه صلیب به سمت راست ، وزن بصری اضافه شده ای را فراهم می کند که سگ در سمت چپ فراهم می کند. این یک جزئیات کوچک اما جزئی نیست. خودتان را با مخفی کردن صلیب با دست خود ببینید.
این همان چیزی است که ما تعادل نامتقارن می نامیم و این همان تعادل است. اگر به نحوه چیدمان مسائل دقت نکنید ، طراحی به سرعت نامتعادل می شود. شما می توانید وزن بصری یک طرح را از جهات مختلف ، مانند رنگ ، اندازه و اضافه یا حذف عناصر ، دستکاری کنید. اگر می خواستید صلیب را بسازید ، مثلاً پرتقالی پر جنب و جوش ، سنگین تر می شود و شاید دوباره طرح را از حالت تعادل خارج کنید. دستیابی به تعادل نامتقارن یک ماده ظریف است که برای تنظیم دقیق و چشمی آموزش دیده ، زمان زیادی لازم دارد.
در زیر مثال دیگری از توازن متقارن ، توسط بیست و یکم آورده شده است . اگرچه گرافیک هدر به صورت نامتقارن متعادل است (آیا می توانید نحوه انجام آن را تشخیص دهید) ، اما بقیه طرح های پایین به پایین دارای ستون های متقارن هستند. تعادل نامتقارن ممکن است برداشتن آن سخت تر باشد اما تمایل دارد طراحی را بازیگوش تر کند.
خواهید فهمید که هر طرحی که فکر می کنید خوب است ، یک توازن به خوبی ساخته شده در زیر آن دارد. و هر طرحی که در اینجا نشان داده می شود در هر 7 اصل مورد بحث ما امتیاز بالایی دارد. بنابراین یک دقیقه وقت بگذارید تا از بالا و پایین پیمایش کنید و در صورت گذر همه آنها از خودتان ببینید.
2. طراحی خود را با استفاده از شبکه ها تقسیم کنید.
مفهوم شبکه ها ارتباط نزدیکی با تعادل دارند. شبکه ها یک سری از خط کش های افقی و عمودی هستند که به شما کمک می کنند یک طرح را "جابجایی" کنید. به ستون ها فکر کنید. ستونها خوانایی را بهبود می بخشد و باعث می شود محتوای صفحه راحت تر جذب شود. فاصله گرفتن و استفاده از Rule of Thirds (یا همان نسبت طلایی مشابه ) همه چیز را روی چشم آسانتر می کند.
به عنوان مثال Rule of Thirds and Golden Ratio به همین دلیل است که نوارهای کناری معمولاً حدود یک سوم از عرض صفحه هستند و چرا منطقه اصلی محتوای تقریباً برابر با عرض طراحی تقسیم شده با 1.62 است (مساوی phi در ریاضیات). ما نمی خواهیم به این دلیل بپرسیم ، اما به نظر می رسد در عمل صادق است. همچنین به همین دلیل است که سوژه در عکس های گرفته شده حرفه ای معمولاً نه در وسط بلکه در تقاطع یک شبکه نه مربع خیالی (سه به سه ، با دو خط افقی و دو خط عمودی) قرار می گیرد.
مثال
این شبکه به ویژه به طراحی های مینیمالیستی وام می دهد. 5 سی و یک توسط Derek Punsalan نشان می دهد که چرا:
در حالی که طراحی به خودی خود از نظر بصری چشمگیر نیست ، ساختار دقیق و دقیق المان ها باعث می شود تا روی چشم آسان شود. ستون سمت چپ تقریباً دو برابر اندازه نوار کناری سمت راست است ، که فقط منطقی است و چیزی است که باید هنگام ایجاد طرح های خود به آن فکر کنید.
3. حداکثر برای طراحی خود دو یا سه رنگ پایه انتخاب کنید.
اگر قرمز رنگ قرمز را در وب سایت The First 20th (در بالا) به رنگ سبز آهک تغییر دهید ، چه می کنید؟ خوب به نظر می رسد؟ به احتمال زیاد اینطور نیست. زیرا به همان پالت رنگی تعلق ندارد (و البته سبز آهک ساده ترین رنگ برای کار با آن نیست). وب سایتهایی مانند ColourLovers به دلایلی وجود دارد. شما فقط نمی توانید رنگ های خود را به سبک Rambo ، اسلحه ها را انتخاب کنید. برخی از رنگ ها به خوبی کنار هم قرار می گیرند ، برخی دیگر اینگونه نیستند. بسیاری از تئوری ها در مورد رنگ ها و ترکیب آنها وجود دارد ، از جمله آن می توان به قراردادهایی درمورد طرح های تک رنگ و متضاد اشاره کرد ، اما چیزهای زیادی به عقل سلیم و احساس نسبت به آن می رسد.
برای خودتان بفهمید که چگونه با هم کار می کنند. تا حد امکان بسیاری از وب سایت ها مانند نمونه هایی که در هر یک از بسیاری از وب سایت های ویترین CSS نشان داده شده است (مانند بهترین گالری وب ) را خیس کنید تا احساس چگونگی تعامل رنگ ها با یکدیگر را بدست آورید. دو یا سه رنگ پایه را حداکثر برای طراحی خود انتخاب کنید و سپس از رنگ های روشن (که سبک تر هستند ، با رنگ سفید مخلوط کنید) و سایه ها (که تیره تر است ، با سیاه مخلوط کنید) از این رنگ های پایه استفاده کنید تا در صورت لزوم پالت را گسترش دهید.
انتخاب رنگ های زیبا به همان اندازه انتخاب رنگ های مناسب (یعنی رنگ های مناسب برای کار) مهم است. طراحی وب برای یک رستوران کوچک دنج می تواند به خوبی با رنگهای "خاکی" انجام شود: قرمز ، قهوه ای و غیره. هر رنگ پیامی را ارسال می کند ، و حق شماست که پیام را درست دریافت کنید.
مثال
وب سایت Bence Kucsan دارای سبک طراحی خاص خود است. عمدتا تک رنگ است (رنگ و سایه یک رنگ) و رنگی (سیاه و سفید) با رنگ (قرمز) برای برجسته کردن:
سیاه و سفید شیک و حرفه ای را نشان می دهد ، در حالی که رنگ قرمز ادویه ای را اضافه می کند که باعث می شود عناصر خاصی از آن استفاده کنند و طرح را از نگاه کسل کننده نکشید. البته بیش از رنگ قرمز این طرح را جالب می کند. به هر حال ، یک شرکت به طور خاص این سبک را محبوب کرد.
صحبت از رنگ ، WebDesigner Wall توسط نیک لا سعادت محض است:
همه آن پاستیل های نرم این طرح را درخشان می کنند. در نگاه اول ، انتخاب های رنگی ممکن است کمی دلخواه به نظر برسند ، اما وقتی از نزدیک نگاه می کنید متوجه یک پالت رنگی کاملاً تعریف شده می شوید که برای اطمینان از خوب بودن همه عناصر ضروری است. این وب سایت ، و به ویژه پیش زمینه آن ، همچنین ترکیب خوبی از رنگ ها و گرافیک ها را نشان می دهد ، که ما را به شماره چهار تبدیل می کند ...
4- سعی کنید که گرافیک ها به خوبی کنار هم قرار بگیرند.
خوب ، طراحی عالی نیازی به گرافیک فانتزی ندارد. اما گرافیک ضعیف قطعاً به یک طراحی آسیب می زند. گرافیک ها به پیام تصویری اضافه می کنند. وب سایتهایی مانند WebDesigner Wall دارای تصاویر برجسته ای هستند ، در حالی که سایر سایت ها کم ارزش هستند.
مثال
تیم ون دامم تنها تعداد کمی از گرافیک را در وب سایت خود Max Voltar استفاده می کند ، اما او آنها را با بیشترین فکر و مراقبت پیاده سازی می کند. تصویر پس زمینه غیر مزاحم و تاج پیچیده دو مورد از این گرافیک ها هستند. از لحاظ بصری ، آنها بیش از حد چشمگیر نیستند ، اما همه به ظاهر و احساس وب سایت می افزایند و هیچ جا جای آن نیست.
مدتی است که مکس ولتار طراحی متفاوتی از آنچه در بالا نشان داده شده است. اما به مدت دو ماه که این یکی آنلاین بود ، به راحتی یکی از موارد مورد علاقه من بود. به همین دلیل و به دلیل استفاده از آن از گرافیک بسیار مثال زدنی است ، من آن را نسبت به آخرین نسخه انتخاب کردم.
Rogie King's Komodo Media از لحاظ گرافیکی بسیار سنگین تر است ، کاملاً از نظر فنی و موضوعی.
شما ممکن است تصویرگر یا عکاس خوبی نباشید ، اما این بدان معنی نیست که نمی توانید گرافیک خوبی را در وب سایت خود قرار دهید. برخی مهارت های اساسی فتوشاپ ، احتمالاً برخی از تصاویر سهام و طعم عالی همه چیزهایی هستند که شما نیاز دارید. سعی کنید گرافیک ها به خوبی کنار هم قرار بگیرند و اطمینان حاصل کنید که آنها سبکی را که مد نظر شماست تجسم می کنند. همه ما با یک توانایی طبیعی یکسان نیستیم. با یادگیری دیگران می توانید مواردی را انتخاب کنید ، اما گاهی اوقات فقط باید استایل را انتخاب کنید که مناسب شما باشد (مانند یک سبک تمیز اگر بزرگترین تصویرگر نیستید).
5- تایپوگرافی وب سایت خود را بهبود بخشید.
هنر نوع موضوعی مشکل است که باید در مورد آن صحبت کنیم زیرا عناصر زیادی را در بر می گیرد. در حالی که می توان آن را به عنوان یک شاخه از طراحی در نظر گرفت ، می توان یک عمر خود را برای تسلط بر همه جوانب آن صرف کرد. این مکان برای ارائه مرجع کامل چاپی نیست ، بنابراین ما بحث خود را محدود خواهیم کرد تا در کوتاه مدت چه فایده ای برای شما خواهد داشت.
تایپوگرافی وب در مقایسه با تایپوگرافی چاپی معلول است . بزرگترین تفاوت عدم کنترل کامل ما بر روی ظاهر نوع در وب ، به دلیل شخصیت پویا آن است. بدیهی است ، رندر پویا نقاط قوت خود را دارد ، اما طراحان وب حداقل در حال حاضر کنترل کمی بر نتایج دارند. فونت های موجود در رایانه کاربر ، تفاوت در رندر مرورگر و پلتفرم و به طور کلی پشتیبانی از subpar در CSS باعث می شود که تایپوگرافی وب یک کار ناامیدکننده و ناامیدکننده باشد. اما در حالی که ممکن است ما برای رسیدن به پتانسیل آن به CSS 3 منتظر تایپوگرافی وب باشیم ، اما اکنون ابزارهایی هم داریم که بتوانیم جالب و مهمتر از همه زیبا به نظر برسیم .
پشته قلم
چندین روش نسبتاً آسان برای بهبود چشمگیر تایپوگرافی وب سایت شما وجود دارد ، که سه مورد از آنها در اینجا می خواهیم. یکی از آنها پشته های قلم است .
پشته های قلم فقط CSS اساسی هستند. آنها به شما امکان می دهند نظمی را که در آن باید فونت ها ارائه شود ، تعریف کنید. به طور دقیق ، ما در اینجا از انواع حروف صحبت می کنیم ، نه قلم ها. برای خلاصه اطلاعاتی در این زمینه مراجعه شود به تایپ فیس جان قهوهای مایل به زرد قلم! = .
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
خاصیت فوق باعث می شود تا نوع "Helvetica Neue" نوع بدن را کپی کند. با این وجود ، لازم است رایانه کاربر آن نوع خاصی را نصب کند. امروزه مکینتاش با Helvetica (Neue) از پیش نصب شده همراه است ، اما اکثر دستگاه های ویندوز این کار را نمی کنند.
زیبایی پشته های قلم این است که شما می توانید "خطاهای سقفی" را تعریف کنید ، به این معنی که هر زمان که یک تایپ تعریف شده از دست نرود ، مرورگر به سادگی به دنبال یک مورد بعدی می باشد. البته این بدان معنی است که طراحی دقیقاً برای همه به نظر نمی رسد ، و به همین ترتیب ما دوباره کنترل خود را از دست می دهیم. اما برای کسانی که نمی خواهند به راه حل دیگری متوسل شوند (مانند تعویض تصویر) ، این بهترین کاری است که CSS خالص در حال حاضر ارائه می دهد (تا روزی که بتوانیم با راحتی از @ font-face استفاده کنیم ).
ویلسون ماینر از پشته فونتهایی که در بالا به آن اشاره کردیم استفاده می کند. Helvetica Neue بهبود Helvetica است. و در حالی که Arial تقریباً بر روی هر رایانه (حداقل در دستگاه های ویندوز و مک) نصب شده است و بنابراین یک انتخاب محبوب برای وب است ، بیشتر طراحان Helvetica را به Arial ترجیح می دهند. به این ترتیب ، شما از هر دو دنیا بهترین استفاده را می کنید: Helvetica برای کسانی که آن را دارند و در صورت وجود Helvetica در دسترس نیست Arial.
جان تان از عناوین قلم جالب دیگری برای عناوین خود استفاده می کند:
body { font-family: baskerville, 'palatino linotype', 'times new roman', serif; }
فقط تعداد نسبتاً کمی از بازدیدکنندگان هدر در Baskerville را مشاهده می کنند ، اما این مشکلی نیست. این ویژگی به شخصیت اضافه می کند در حالی که به کسی که این ویژگی را نرساند صدمه می زند. باز هم ، پشته های قلم یک راه حل عالی نیستند ، اما آنها به شما مزیت می دهند .
اندازه گیری و پیشرو
اندازه گیری طول خطوط است ، و پیشرو ارتفاع (یا فاصله عمودی) خطوط است. در CSS ، اندازه گیری را می توان با تعیین عرض برای جعبه حاوی (به عنوان مثال پاراگراف) کنترل کرد. هر دو بر خوانایی تأثیر می گذارند . اگر خطوط خیلی کوتاه یا خیلی طولانی باشند ، کاربران راحت با خواندن مطالب راحت نخواهند شد. فرد اغلب این مشکل را با طرح بندی مایعات مشاهده می کند . بین 40 تا 80 کاراکتر در هر خط ایده آل به نظر می رسد.
با تعریف line-heightویژگی CSS ، می توان سرب افزاری را افزایش داد (یا کاهش داد) . به طور کلی ، ارتفاع خط 1.5 برای پاراگراف ها به خوبی کار می کند. بدین معنی که وقتی اندازه متن 12 نقطه باشد ، ارتفاع خط 18 نقطه می شود (1.5 × 12) ، که به اتاق اتاق تنفس می دهد .
حلق آویز و گلوله
راه سوم برای بهبود خوانایی ، حلق آویز به نقل از گلوله و گلوله است. به جای ترک متن لیست های بولت و نقل قول ها با تراز پیش فرض ، به صورت افقی آن را با بقیه متن در صفحه تراز کنید .
تیم ون دامم برای آخرین طراحی مجدد مکس ولتار از گلوله های آویز استفاده می کند :
ما خط قرمز را اضافه کرده ایم تا تأکید کنیم که چگونه همه متن به صورت افقی تراز شده است. به سادگی با تنظیم padding-leftویژگی CSS لیست بولت 0، می توانید به همان نتیجه برسید.
بیرون کشیدن نقل قول های معلق از طرف دیگر ، به همین سادگی نیست. بیشتر طراحان برای نشانگرها به تصویر پس زمینه متوسل می شوند و مطابق با آن مطابقت دارند ، همانطور که متیو بوکانان انجام می دهد :
علامت نقل قول معلق در اینجا باعث اختلال در جریان متن نمی شود . این جزئیاتی است که اغلب در آن مورد توجه قرار نمی گیرد اما ارزش سرمایه گذاری را دارد.
قوانینی را چاپ کنید که کاربردی ندارند
چاپ و وب یکسان نیستند. به نظر می رسد کاملاً واضح است ، اما بسیاری از مردم مانند یک رفتار با آنها رفتار می کنند. چاپ ثابت است و وب پویا است. داشتن کنترل کامل بر نحوه طراحی وب شما برای همه غیرممکن است .
ریتم عمودی ، متن توجیهی مناسب (با هیپنوتیزم و بدون رودخانه ) و چیدمان های چند ستونی تنها برخی از ویژگی های چاپ است که تقریباً در وب غیرممکن است. بنابراین ، CSS 3 احتمالاً یک راه حل همه و همه راه حل نخواهد بود و احتمالاً چند سال دیگر می تواند قبل از استفاده کامل از آن باشد. اکنون باید این اختلافات را بپذیریم: به وب به عنوان نسخه آنلاین چاپ نگاه نکنید. در عوض ، از پتانسیل ذاتی وب استفاده کنید.
کلمه ای در مورد جایگزینی تصویر
در مورد جایگزینی تصویر (تکنیک تعویض فونت ها با تصاویر) چطور؟ ما در مورد پشته های فونت صحبت کرده ایم ، اما آیا آنها نسبت به جایگزینی تصویر پایین نیستند؟ خوب ، این به آنچه شما فکر می کنید مهمتر است بستگی دارد: قادر به نمایش قلم دقیق مورد نظر خود یا داشتن محتوای پویا ، در دسترس و دوست داشتنی برای سئو؟ برخی از تکنیک های جایگزینی تصویر بسیار پیشرفته شده اند ، اما هنوز هم به اندازه متن ساده انعطاف پذیر نیستند. جایگزینی تصویر به خوبی به هدر و گزیده ها کمک می کند ، اما به سختی راه حلی برای متن بدن نیست.
6. با اضافه کردن فضای سفید در اطراف خود ، عناصر را از هم متمایز کنید.
فضای سفید یا فضای منفی با آنچه در آنجا نیست ارتباط دارد . فضای سفید مانند اندازه گیری و پیشرو ، فضای تنفس و آرامش مکانی را به متن می دهد . با اضافه کردن فضای سفید در اطراف آنها می توانید عناصر را از هم متمایز کنید. به عنوان مثال ، کپی نباید به نظر برسد. برای اطمینان از خوانایی ، اطمینان حاصل کنید که پاراگراف ها از کف بالایی برخوردار هستند.
تبلیغات عطر - یا هر تبلیغی برای یک محصول لوکس برای آن ماده - به دلیل استفاده از فضای سفید شناخته شده اند ... بارهای آن؛ و یک نوع سری برای اندازه گیری خوب.
مثال
فکر می کنم وقت آن رسیده است که یک پلاگین بی شرمانه باشد. تصویر بالا از وب سایت خود من Shift (px) است. طراحی بسیار وابسته به تایپوگرافی و فضای سفید است. فضای سفید احتمالاً حدود 50٪ صفحه را در بر می گیرد. فضای سفید یکی از ساده ترین است (زیرا شما واقعاً چیزی اضافه نمی کنید ، هستید؟) و مؤثرترین راهها برای ایجاد یک طراحی بصری دلپذیر و قابل خواندن است.
فضای سفید کلاس زیادی را به یک طراحی می افزاید. نترسید که بعضی از سوراخ ها را باز کنید ، حتی شکاف ها را باز کنید. طراحان بی تجربه وسوسه می شوند چیزی را در هر گوشه کوچک قرار دهند. طراحی در مورد برقراری ارتباط پیام است. بنابراین عناصر طراحی باید از این پیام پشتیبانی کنند و باعث افزایش سر و صدای آن نشوند.
مثال خوب دیگری از فضای سفید فراوان:
کایل مایر آستریا نشان می دهد که برای طراحی دلپذیر چیز زیادی لازم نیست. ممکن است برخی از افراد "مینیمالیستی" را با "ساده" اشتباه بگیرند. اما کنار کشیدن چنین سبکی نه ساده و نه آسان است (حتی اگر کسی با گرافیک یا تصاویر عالی نباشد).
7. همه عناصر را به هم وصل کنید.
"اتصال" در اینجا کمی اصطلاح ساخته شده است ، اما به نظر می رسد بهترین چیزی است که منظور ما از آن است. اتصال در اینجا به یک طراحی وب اشاره دارد که هم وحدت و هم قوام دارد . این دو ویژگی نشانگر حرفه ای بودن یک طرح (و بنابراین طراح آن) است. آنها ویژگی های بسیار گسترده ای هستند. یک طرح باید در استفاده از رنگها ، در قلمهای متنوع ، با نمادهای آن و غیره سازگار باشد. یک طراحی می تواند عالی به نظر برسد و هنوز هم از ناسازگاری رنج می برد.
وقتی یک طرح متناقض باشد ، وحدت آن را می توان در کاربر از دست داد. وحدت با قوام کمی متفاوت است. وحدت به چگونگی تعامل و تناسب عناصر مختلف در یک طرح اشاره دارد. به عنوان مثال ، آیا رنگ ها و گرافیک ها مطابقت دارند؟ آیا همه چیز به یک پیام یکپارچه کمک می کند؟ از سوی دیگر ، قوام بین صفحات یک طرح یافت می شود.
وحدت شاید مهمترین این دو باشد. بدون وحدت ، داشتن یک طرح خوب کار سختی است. با این وجود ، ناسازگاری ممکن است کمی "دست و پا گیر" به نظر برسد اما ممکن است طرح را "بد" نکند.
از هفت اصل مورد بحث در این مقاله ، ارتباط مهمترین است. ارتباط با نحوه جمع شدن همه عناصر ارتباط دارد: تعادل ، شبکه ، رنگ ها ، گرافیک ، نوع و فضای سفید. این نوعی چسب است که همه چیز را به هم وصل می کند . بدون این چسب ، طرح از هم جدا می شود. شما می توانستید یک نوع زیبا و یک پالت رنگی برجسته و دقیق را انتخاب کنید ، اما اگر این گرافیک ها افتضاح هستند یا به سادگی با یکدیگر مطابقت ندارند یا اگر همه چیز بدون تفکر با هم چیده شود ، طراحی از بین خواهد رفت.
این سخت ترین قسمت طراحی است. این چیزی نیست که به راحتی آموزش داده شود یا اصلاً لزوماً می توان آن را آموزش داد. کمی توانایی و تجربه طبیعی لازم است. اما این همان چیزی است که هست ، و باعث می شود تا یک طراحی در آخر خوب به نظر برسد.
مثال
ما زودتر به دلیل داشتن گرافیک های زیبا ، از WebDesigner Wall نیک لا ستایش کردیم ، اما این نیز نمونه خوبی از اتصال است. وقتی به طور کلی به گرافیک ها و سبک نگاه می کنید ، همه چیز نگاهی به آبرنگ دست به دست می دهد: تصاویر مقالات ، تصاویر پس زمینه آبرنگ ، doodles و آیکون های دست ساز ، شیوه رای گیری و غیره بر. توجه به جزئیات باعث می شود این طراحی از برتری برخوردار باشد.
منابع بیشتر
پنج قدم ساده برای طراحی سیستم های شبکه
یک راهنمای مبتدی برای شبکه ها است.
نسبت طلایی در طراحی وب
8 راه ساده برای بهبود تایپوگرافی در طراحی های شما
فونت ها و وب
درباره وضعیت فونت ها در وب و جایگزینی تصویر.
4 اصول طراحی خوب برای وب سایت ها
چهار اصل دیگر ، بیشتر از دیدگاه عملی.
نتیجه
طراحی خوب وب محدود به هفت اصل اصلی نیست که در اینجا مورد بحث قرار می گیرد. جنبه هایی مانند دسترسی ، خوانایی و قابلیت استفاده نیز نقش ایفا می کند.
به همین دلیل طراحی وب بسیار دشوار است. خیس کردن پاهای شما در طراحی بسیار آسان است ، به خصوص امروز ، با بسیاری از سیستم های مدیریت محتوا ، ابزار بلاگ و مضامین به راحتی در دسترس است. اما واقعاً تسلط بر همه جنبه های طراحی وب زمان می برد و ، بیایید صادقانه ، استعداد باشیم. داشتن توانایی در ساختن طرح های زیبا فقط یک جنبه دارد ، اما نکته مهمی است.
یاد بگیرید زندگی کنید و باهوش تر کار کنید ، سخت تر نیس
چگونه یک طراحی وب خوب به نظر برسد
طرح خود را متعادل نگه دارید.
طرح خود را با استفاده از شبکه ها تقسیم کنید.
برای طراحی خود حداکثر دو یا سه رنگ پایه را انتخاب کنید.
سعی کنید گرافیک ها به خوبی کنار هم قرار بگیرند.
تایپوگرافی وب سایت خود را بهبود بخشید.
با اضافه کردن فضای سفید در اطراف خود ، عناصر را متمایز کنید.
همه عناصر را به هم وصل کنید.
به نظر می رسد همه و پدربزرگشان (و سگ) این روزها وب سایت دارند. وب روز به روز شلوغ تر می شود ، به همین دلیل که خواندن این مقاله به ده ها وب سایت اضافه می شود. توجه به این امر در بین توده ها سخت و دشوارتر می شود.
نکته حرفه ای
شما نمی توانید طراحی وب شگفت انگیز و بدون اشکال spiffy داشته باشید. امروز فرم های وب زیبا طراحی کنید.
"خوشبختانه" برای ما طراحان ، به نظر نمی رسد که همه بدانند چه چیزی باعث ایجاد یا شکسته شدن یک طراحی وب می شود . در حال حاضر ، طراحی وب تا حدی فرایندی خلاقانه است و به همین دلیل می توان آن را بیشتر از علم نامید. اما از آنجا که ذاتاً رسانه ای برای ارائه است ، برخی از قوانین (یا حداقل اصول) اعمال می شوند. با دنبال کردن برخی از نشانگرهای ساده ، هر کسی باید بتواند طرحی بصری دلپذیر ایجاد کند و یک قدم به شهرت نزدیک شود. خوب، آن را نمی که ساده، و استعداد و تجربه مهم، اما هر کسی می تواند صفحه اصلی خود را به چیزی زیباتر عرض چند دقیقه صرف تبدیل شود.
چگونه طراحی وب خوب به نظر برسد (اینفوگرافیک)
بنابراین چه چیزی زیبایی را ایجاد می کند؟ فلش نیست. نه اینکه بگوییم فلش فاقد شایستگی است ، اما Flash به تنهایی طراحی را خوب نمی کند. برخی از وب سایت های ناخوشایند Flash در آنجا هستند. همچنین ، لازم نیست یک تصویرگر عالی برای تهیه طرح های جذاب باشد. در عوض ، به طراحی وب به عنوان همزیستی عناصر مختلف نگاه کنید . هیچ عنصر واحدی بیشترین شمارش را ندارد. بلکه ، عناصر باعث می شود یک طراحی خوب به نظر برسد.
1. طرح خود را متعادل نگه دارید.
تعادل همه چیز در مورد این است که اطمینان حاصل شود که طرح شما به یک طرف یا طرف دیگر نمی چرخد. مانند تعادل وزن در دستیابی به تقارن یا عدم تقارن است.
مثال
در گرافیک عنوان در وب سایت تفریق Khoi Vinh در زیر نگاه کنید. من این مثال را از اصول طراحی وب زیبا توسط جیسون بیرد گرفتم. جیسون اشاره می کند که چگونه صلیب به سمت راست ، وزن بصری اضافه شده ای را فراهم می کند که سگ در سمت چپ فراهم می کند. این یک جزئیات کوچک اما جزئی نیست. خودتان را با مخفی کردن صلیب با دست خود ببینید.
این همان چیزی است که ما تعادل نامتقارن می نامیم و این همان تعادل است. اگر به نحوه چیدمان مسائل دقت نکنید ، طراحی به سرعت نامتعادل می شود. شما می توانید وزن بصری یک طرح را از جهات مختلف ، مانند رنگ ، اندازه و اضافه یا حذف عناصر ، دستکاری کنید. اگر می خواستید صلیب را بسازید ، مثلاً پرتقالی پر جنب و جوش ، سنگین تر می شود و شاید دوباره طرح را از حالت تعادل خارج کنید. دستیابی به تعادل نامتقارن یک ماده ظریف است که برای تنظیم دقیق و چشمی آموزش دیده ، زمان زیادی لازم دارد.
در زیر مثال دیگری از توازن متقارن ، توسط بیست و یکم آورده شده است . اگرچه گرافیک هدر به صورت نامتقارن متعادل است (آیا می توانید نحوه انجام آن را تشخیص دهید) ، اما بقیه طرح های پایین به پایین دارای ستون های متقارن هستند. تعادل نامتقارن ممکن است برداشتن آن سخت تر باشد اما تمایل دارد طراحی را بازیگوش تر کند.
خواهید فهمید که هر طرحی که فکر می کنید خوب است ، یک توازن به خوبی ساخته شده در زیر آن دارد. و هر طرحی که در اینجا نشان داده می شود در هر 7 اصل مورد بحث ما امتیاز بالایی دارد. بنابراین یک دقیقه وقت بگذارید تا از بالا و پایین پیمایش کنید و در صورت گذر همه آنها از خودتان ببینید.
2. طراحی خود را با استفاده از شبکه ها تقسیم کنید.
مفهوم شبکه ها ارتباط نزدیکی با تعادل دارند. شبکه ها یک سری از خط کش های افقی و عمودی هستند که به شما کمک می کنند یک طرح را "جابجایی" کنید. به ستون ها فکر کنید. ستونها خوانایی را بهبود می بخشد و باعث می شود محتوای صفحه راحت تر جذب شود. فاصله گرفتن و استفاده از Rule of Thirds (یا همان نسبت طلایی مشابه ) همه چیز را روی چشم آسانتر می کند.
به عنوان مثال Rule of Thirds and Golden Ratio به همین دلیل است که نوارهای کناری معمولاً حدود یک سوم از عرض صفحه هستند و چرا منطقه اصلی محتوای تقریباً برابر با عرض طراحی تقسیم شده با 1.62 است (مساوی phi در ریاضیات). ما نمی خواهیم به این دلیل بپرسیم ، اما به نظر می رسد در عمل صادق است. همچنین به همین دلیل است که سوژه در عکس های گرفته شده حرفه ای معمولاً نه در وسط بلکه در تقاطع یک شبکه نه مربع خیالی (سه به سه ، با دو خط افقی و دو خط عمودی) قرار می گیرد.
مثال
این شبکه به ویژه به طراحی های مینیمالیستی وام می دهد. 5 سی و یک توسط Derek Punsalan نشان می دهد که چرا:
در حالی که طراحی به خودی خود از نظر بصری چشمگیر نیست ، ساختار دقیق و دقیق المان ها باعث می شود تا روی چشم آسان شود. ستون سمت چپ تقریباً دو برابر اندازه نوار کناری سمت راست است ، که فقط منطقی است و چیزی است که باید هنگام ایجاد طرح های خود به آن فکر کنید.
3. حداکثر برای طراحی خود دو یا سه رنگ پایه انتخاب کنید.
اگر قرمز رنگ قرمز را در وب سایت The First 20th (در بالا) به رنگ سبز آهک تغییر دهید ، چه می کنید؟ خوب به نظر می رسد؟ به احتمال زیاد اینطور نیست. زیرا به همان پالت رنگی تعلق ندارد (و البته سبز آهک ساده ترین رنگ برای کار با آن نیست). وب سایتهایی مانند ColourLovers به دلایلی وجود دارد. شما فقط نمی توانید رنگ های خود را به سبک Rambo ، اسلحه ها را انتخاب کنید. برخی از رنگ ها به خوبی کنار هم قرار می گیرند ، برخی دیگر اینگونه نیستند. بسیاری از تئوری ها در مورد رنگ ها و ترکیب آنها وجود دارد ، از جمله آن می توان به قراردادهایی درمورد طرح های تک رنگ و متضاد اشاره کرد ، اما چیزهای زیادی به عقل سلیم و احساس نسبت به آن می رسد.
برای خودتان بفهمید که چگونه با هم کار می کنند. تا حد امکان بسیاری از وب سایت ها مانند نمونه هایی که در هر یک از بسیاری از وب سایت های ویترین CSS نشان داده شده است (مانند بهترین گالری وب ) را خیس کنید تا احساس چگونگی تعامل رنگ ها با یکدیگر را بدست آورید. دو یا سه رنگ پایه را حداکثر برای طراحی خود انتخاب کنید و سپس از رنگ های روشن (که سبک تر هستند ، با رنگ سفید مخلوط کنید) و سایه ها (که تیره تر است ، با سیاه مخلوط کنید) از این رنگ های پایه استفاده کنید تا در صورت لزوم پالت را گسترش دهید.
انتخاب رنگ های زیبا به همان اندازه انتخاب رنگ های مناسب (یعنی رنگ های مناسب برای کار) مهم است. طراحی وب برای یک رستوران کوچک دنج می تواند به خوبی با رنگهای "خاکی" انجام شود: قرمز ، قهوه ای و غیره. هر رنگ پیامی را ارسال می کند ، و حق شماست که پیام را درست دریافت کنید.
مثال
وب سایت Bence Kucsan دارای سبک طراحی خاص خود است. عمدتا تک رنگ است (رنگ و سایه یک رنگ) و رنگی (سیاه و سفید) با رنگ (قرمز) برای برجسته کردن:
سیاه و سفید شیک و حرفه ای را نشان می دهد ، در حالی که رنگ قرمز ادویه ای را اضافه می کند که باعث می شود عناصر خاصی از آن استفاده کنند و طرح را از نگاه کسل کننده نکشید. البته بیش از رنگ قرمز این طرح را جالب می کند. به هر حال ، یک شرکت به طور خاص این سبک را محبوب کرد.
صحبت از رنگ ، WebDesigner Wall توسط نیک لا سعادت محض است:
همه آن پاستیل های نرم این طرح را درخشان می کنند. در نگاه اول ، انتخاب های رنگی ممکن است کمی دلخواه به نظر برسند ، اما وقتی از نزدیک نگاه می کنید متوجه یک پالت رنگی کاملاً تعریف شده می شوید که برای اطمینان از خوب بودن همه عناصر ضروری است. این وب سایت ، و به ویژه پیش زمینه آن ، همچنین ترکیب خوبی از رنگ ها و گرافیک ها را نشان می دهد ، که ما را به شماره چهار تبدیل می کند ...
4- سعی کنید که گرافیک ها به خوبی کنار هم قرار بگیرند.
خوب ، طراحی عالی نیازی به گرافیک فانتزی ندارد. اما گرافیک ضعیف قطعاً به یک طراحی آسیب می زند. گرافیک ها به پیام تصویری اضافه می کنند. وب سایتهایی مانند WebDesigner Wall دارای تصاویر برجسته ای هستند ، در حالی که سایر سایت ها کم ارزش هستند.
مثال
تیم ون دامم تنها تعداد کمی از گرافیک را در وب سایت خود Max Voltar استفاده می کند ، اما او آنها را با بیشترین فکر و مراقبت پیاده سازی می کند. تصویر پس زمینه غیر مزاحم و تاج پیچیده دو مورد از این گرافیک ها هستند. از لحاظ بصری ، آنها بیش از حد چشمگیر نیستند ، اما همه به ظاهر و احساس وب سایت می افزایند و هیچ جا جای آن نیست.
مدتی است که مکس ولتار طراحی متفاوتی از آنچه در بالا نشان داده شده است. اما به مدت دو ماه که این یکی آنلاین بود ، به راحتی یکی از موارد مورد علاقه من بود. به همین دلیل و به دلیل استفاده از آن از گرافیک بسیار مثال زدنی است ، من آن را نسبت به آخرین نسخه انتخاب کردم.
Rogie King's Komodo Media از لحاظ گرافیکی بسیار سنگین تر است ، کاملاً از نظر فنی و موضوعی.
شما ممکن است تصویرگر یا عکاس خوبی نباشید ، اما این بدان معنی نیست که نمی توانید گرافیک خوبی را در وب سایت خود قرار دهید. برخی مهارت های اساسی فتوشاپ ، احتمالاً برخی از تصاویر سهام و طعم عالی همه چیزهایی هستند که شما نیاز دارید. سعی کنید گرافیک ها به خوبی کنار هم قرار بگیرند و اطمینان حاصل کنید که آنها سبکی را که مد نظر شماست تجسم می کنند. همه ما با یک توانایی طبیعی یکسان نیستیم. با یادگیری دیگران می توانید مواردی را انتخاب کنید ، اما گاهی اوقات فقط باید استایل را انتخاب کنید که مناسب شما باشد (مانند یک سبک تمیز اگر بزرگترین تصویرگر نیستید).
5- تایپوگرافی وب سایت خود را بهبود بخشید.
هنر نوع موضوعی مشکل است که باید در مورد آن صحبت کنیم زیرا عناصر زیادی را در بر می گیرد. در حالی که می توان آن را به عنوان یک شاخه از طراحی در نظر گرفت ، می توان یک عمر خود را برای تسلط بر همه جوانب آن صرف کرد. این مکان برای ارائه مرجع کامل چاپی نیست ، بنابراین ما بحث خود را محدود خواهیم کرد تا در کوتاه مدت چه فایده ای برای شما خواهد داشت.
تایپوگرافی وب در مقایسه با تایپوگرافی چاپی معلول است . بزرگترین تفاوت عدم کنترل کامل ما بر روی ظاهر نوع در وب ، به دلیل شخصیت پویا آن است. بدیهی است ، رندر پویا نقاط قوت خود را دارد ، اما طراحان وب حداقل در حال حاضر کنترل کمی بر نتایج دارند. فونت های موجود در رایانه کاربر ، تفاوت در رندر مرورگر و پلتفرم و به طور کلی پشتیبانی از subpar در CSS باعث می شود که تایپوگرافی وب یک کار ناامیدکننده و ناامیدکننده باشد. اما در حالی که ممکن است ما برای رسیدن به پتانسیل آن به CSS 3 منتظر تایپوگرافی وب باشیم ، اما اکنون ابزارهایی هم داریم که بتوانیم جالب و مهمتر از همه زیبا به نظر برسیم .
پشته قلم
چندین روش نسبتاً آسان برای بهبود چشمگیر تایپوگرافی وب سایت شما وجود دارد ، که سه مورد از آنها در اینجا می خواهیم. یکی از آنها پشته های قلم است .
پشته های قلم فقط CSS اساسی هستند. آنها به شما امکان می دهند نظمی را که در آن باید فونت ها ارائه شود ، تعریف کنید. به طور دقیق ، ما در اینجا از انواع حروف صحبت می کنیم ، نه قلم ها. برای خلاصه اطلاعاتی در این زمینه مراجعه شود به تایپ فیس جان قهوهای مایل به زرد قلم! = .
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
خاصیت فوق باعث می شود تا نوع "Helvetica Neue" نوع بدن را کپی کند. با این وجود ، لازم است رایانه کاربر آن نوع خاصی را نصب کند. امروزه مکینتاش با Helvetica (Neue) از پیش نصب شده همراه است ، اما اکثر دستگاه های ویندوز این کار را نمی کنند.
زیبایی پشته های قلم این است که شما می توانید "خطاهای سقفی" را تعریف کنید ، به این معنی که هر زمان که یک تایپ تعریف شده از دست نرود ، مرورگر به سادگی به دنبال یک مورد بعدی می باشد. البته این بدان معنی است که طراحی دقیقاً برای همه به نظر نمی رسد ، و به همین ترتیب ما دوباره کنترل خود را از دست می دهیم. اما برای کسانی که نمی خواهند به راه حل دیگری متوسل شوند (مانند تعویض تصویر) ، این بهترین کاری است که CSS خالص در حال حاضر ارائه می دهد (تا روزی که بتوانیم با راحتی از @ font-face استفاده کنیم ).
ویلسون ماینر از پشته فونتهایی که در بالا به آن اشاره کردیم استفاده می کند. Helvetica Neue بهبود Helvetica است. و در حالی که Arial تقریباً بر روی هر رایانه (حداقل در دستگاه های ویندوز و مک) نصب شده است و بنابراین یک انتخاب محبوب برای وب است ، بیشتر طراحان Helvetica را به Arial ترجیح می دهند. به این ترتیب ، شما از هر دو دنیا بهترین استفاده را می کنید: Helvetica برای کسانی که آن را دارند و در صورت وجود Helvetica در دسترس نیست Arial.
جان تان از عناوین قلم جالب دیگری برای عناوین خود استفاده می کند:
body { font-family: baskerville, 'palatino linotype', 'times new roman', serif; }
فقط تعداد نسبتاً کمی از بازدیدکنندگان هدر در Baskerville را مشاهده می کنند ، اما این مشکلی نیست. این ویژگی به شخصیت اضافه می کند در حالی که به کسی که این ویژگی را نرساند صدمه می زند. باز هم ، پشته های قلم یک راه حل عالی نیستند ، اما آنها به شما مزیت می دهند .
اندازه گیری و پیشرو
اندازه گیری طول خطوط است ، و پیشرو ارتفاع (یا فاصله عمودی) خطوط است. در CSS ، اندازه گیری را می توان با تعیین عرض برای جعبه حاوی (به عنوان مثال پاراگراف) کنترل کرد. هر دو بر خوانایی تأثیر می گذارند . اگر خطوط خیلی کوتاه یا خیلی طولانی باشند ، کاربران راحت با خواندن مطالب راحت نخواهند شد. فرد اغلب این مشکل را با طرح بندی مایعات مشاهده می کند . بین 40 تا 80 کاراکتر در هر خط ایده آل به نظر می رسد.
با تعریف line-heightویژگی CSS ، می توان سرب افزاری را افزایش داد (یا کاهش داد) . به طور کلی ، ارتفاع خط 1.5 برای پاراگراف ها به خوبی کار می کند. بدین معنی که وقتی اندازه متن 12 نقطه باشد ، ارتفاع خط 18 نقطه می شود (1.5 × 12) ، که به اتاق اتاق تنفس می دهد .
حلق آویز و گلوله
راه سوم برای بهبود خوانایی ، حلق آویز به نقل از گلوله و گلوله است. به جای ترک متن لیست های بولت و نقل قول ها با تراز پیش فرض ، به صورت افقی آن را با بقیه متن در صفحه تراز کنید .
تیم ون دامم برای آخرین طراحی مجدد مکس ولتار از گلوله های آویز استفاده می کند :
ما خط قرمز را اضافه کرده ایم تا تأکید کنیم که چگونه همه متن به صورت افقی تراز شده است. به سادگی با تنظیم padding-leftویژگی CSS لیست بولت 0، می توانید به همان نتیجه برسید.
بیرون کشیدن نقل قول های معلق از طرف دیگر ، به همین سادگی نیست. بیشتر طراحان برای نشانگرها به تصویر پس زمینه متوسل می شوند و مطابق با آن مطابقت دارند ، همانطور که متیو بوکانان انجام می دهد :
علامت نقل قول معلق در اینجا باعث اختلال در جریان متن نمی شود . این جزئیاتی است که اغلب در آن مورد توجه قرار نمی گیرد اما ارزش سرمایه گذاری را دارد.
قوانینی را چاپ کنید که کاربردی ندارند
چاپ و وب یکسان نیستند. به نظر می رسد کاملاً واضح است ، اما بسیاری از مردم مانند یک رفتار با آنها رفتار می کنند. چاپ ثابت است و وب پویا است. داشتن کنترل کامل بر نحوه طراحی وب شما برای همه غیرممکن است .
ریتم عمودی ، متن توجیهی مناسب (با هیپنوتیزم و بدون رودخانه ) و چیدمان های چند ستونی تنها برخی از ویژگی های چاپ است که تقریباً در وب غیرممکن است. بنابراین ، CSS 3 احتمالاً یک راه حل همه و همه راه حل نخواهد بود و احتمالاً چند سال دیگر می تواند قبل از استفاده کامل از آن باشد. اکنون باید این اختلافات را بپذیریم: به وب به عنوان نسخه آنلاین چاپ نگاه نکنید. در عوض ، از پتانسیل ذاتی وب استفاده کنید.
کلمه ای در مورد جایگزینی تصویر
در مورد جایگزینی تصویر (تکنیک تعویض فونت ها با تصاویر) چطور؟ ما در مورد پشته های فونت صحبت کرده ایم ، اما آیا آنها نسبت به جایگزینی تصویر پایین نیستند؟ خوب ، این به آنچه شما فکر می کنید مهمتر است بستگی دارد: قادر به نمایش قلم دقیق مورد نظر خود یا داشتن محتوای پویا ، در دسترس و دوست داشتنی برای سئو؟ برخی از تکنیک های جایگزینی تصویر بسیار پیشرفته شده اند ، اما هنوز هم به اندازه متن ساده انعطاف پذیر نیستند. جایگزینی تصویر به خوبی به هدر و گزیده ها کمک می کند ، اما به سختی راه حلی برای متن بدن نیست.
6. با اضافه کردن فضای سفید در اطراف خود ، عناصر را از هم متمایز کنید.
فضای سفید یا فضای منفی با آنچه در آنجا نیست ارتباط دارد . فضای سفید مانند اندازه گیری و پیشرو ، فضای تنفس و آرامش مکانی را به متن می دهد . با اضافه کردن فضای سفید در اطراف آنها می توانید عناصر را از هم متمایز کنید. به عنوان مثال ، کپی نباید به نظر برسد. برای اطمینان از خوانایی ، اطمینان حاصل کنید که پاراگراف ها از کف بالایی برخوردار هستند.
تبلیغات عطر - یا هر تبلیغی برای یک محصول لوکس برای آن ماده - به دلیل استفاده از فضای سفید شناخته شده اند ... بارهای آن؛ و یک نوع سری برای اندازه گیری خوب.
مثال
فکر می کنم وقت آن رسیده است که یک پلاگین بی شرمانه باشد. تصویر بالا از وب سایت خود من Shift (px) است. طراحی بسیار وابسته به تایپوگرافی و فضای سفید است. فضای سفید احتمالاً حدود 50٪ صفحه را در بر می گیرد. فضای سفید یکی از ساده ترین است (زیرا شما واقعاً چیزی اضافه نمی کنید ، هستید؟) و مؤثرترین راهها برای ایجاد یک طراحی بصری دلپذیر و قابل خواندن است.
فضای سفید کلاس زیادی را به یک طراحی می افزاید. نترسید که بعضی از سوراخ ها را باز کنید ، حتی شکاف ها را باز کنید. طراحان بی تجربه وسوسه می شوند چیزی را در هر گوشه کوچک قرار دهند. طراحی در مورد برقراری ارتباط پیام است. بنابراین عناصر طراحی باید از این پیام پشتیبانی کنند و باعث افزایش سر و صدای آن نشوند.
مثال خوب دیگری از فضای سفید فراوان:
کایل مایر آستریا نشان می دهد که برای طراحی دلپذیر چیز زیادی لازم نیست. ممکن است برخی از افراد "مینیمالیستی" را با "ساده" اشتباه بگیرند. اما کنار کشیدن چنین سبکی نه ساده و نه آسان است (حتی اگر کسی با گرافیک یا تصاویر عالی نباشد).
7. همه عناصر را به هم وصل کنید.
"اتصال" در اینجا کمی اصطلاح ساخته شده است ، اما به نظر می رسد بهترین چیزی است که منظور ما از آن است. اتصال در اینجا به یک طراحی وب اشاره دارد که هم وحدت و هم قوام دارد . این دو ویژگی نشانگر حرفه ای بودن یک طرح (و بنابراین طراح آن) است. آنها ویژگی های بسیار گسترده ای هستند. یک طرح باید در استفاده از رنگها ، در قلمهای متنوع ، با نمادهای آن و غیره سازگار باشد. یک طراحی می تواند عالی به نظر برسد و هنوز هم از ناسازگاری رنج می برد.
وقتی یک طرح متناقض باشد ، وحدت آن را می توان در کاربر از دست داد. وحدت با قوام کمی متفاوت است. وحدت به چگونگی تعامل و تناسب عناصر مختلف در یک طرح اشاره دارد. به عنوان مثال ، آیا رنگ ها و گرافیک ها مطابقت دارند؟ آیا همه چیز به یک پیام یکپارچه کمک می کند؟ از سوی دیگر ، قوام بین صفحات یک طرح یافت می شود.
وحدت شاید مهمترین این دو باشد. بدون وحدت ، داشتن یک طرح خوب کار سختی است. با این وجود ، ناسازگاری ممکن است کمی "دست و پا گیر" به نظر برسد اما ممکن است طرح را "بد" نکند.
از هفت اصل مورد بحث در این مقاله ، ارتباط مهمترین است. ارتباط با نحوه جمع شدن همه عناصر ارتباط دارد: تعادل ، شبکه ، رنگ ها ، گرافیک ، نوع و فضای سفید. این نوعی چسب است که همه چیز را به هم وصل می کند . بدون این چسب ، طرح از هم جدا می شود. شما می توانستید یک نوع زیبا و یک پالت رنگی برجسته و دقیق را انتخاب کنید ، اما اگر این گرافیک ها افتضاح هستند یا به سادگی با یکدیگر مطابقت ندارند یا اگر همه چیز بدون تفکر با هم چیده شود ، طراحی از بین خواهد رفت.
این سخت ترین قسمت طراحی است. این چیزی نیست که به راحتی آموزش داده شود یا اصلاً لزوماً می توان آن را آموزش داد. کمی توانایی و تجربه طبیعی لازم است. اما این همان چیزی است که هست ، و باعث می شود تا یک طراحی در آخر خوب به نظر برسد.
مثال
ما زودتر به دلیل داشتن گرافیک های زیبا ، از WebDesigner Wall نیک لا ستایش کردیم ، اما این نیز نمونه خوبی از اتصال است. وقتی به طور کلی به گرافیک ها و سبک نگاه می کنید ، همه چیز نگاهی به آبرنگ دست به دست می دهد: تصاویر مقالات ، تصاویر پس زمینه آبرنگ ، doodles و آیکون های دست ساز ، شیوه رای گیری و غیره بر. توجه به جزئیات باعث می شود این طراحی از برتری برخوردار باشد.
منابع بیشتر
پنج قدم ساده برای طراحی سیستم های شبکه
یک راهنمای مبتدی برای شبکه ها است.
نسبت طلایی در طراحی وب
8 راه ساده برای بهبود تایپوگرافی در طراحی های شما
فونت ها و وب
درباره وضعیت فونت ها در وب و جایگزینی تصویر.
4 اصول طراحی خوب برای وب سایت ها
چهار اصل دیگر ، بیشتر از دیدگاه عملی.
نتیجه
طراحی خوب وب محدود به هفت اصل اصلی نیست که در اینجا مورد بحث قرار می گیرد. جنبه هایی مانند دسترسی ، خوانایی و قابلیت استفاده نیز نقش ایفا می کند.
به همین دلیل طراحی وب بسیار دشوار است. خیس کردن پاهای شما در طراحی بسیار آسان است ، به خصوص امروز ، با بسیاری از سیستم های مدیریت محتوا ، ابزار بلاگ و مضامین به راحتی در دسترس است. اما واقعاً تسلط بر همه جنبه های طراحی وب زمان می برد و ، بیایید صادقانه ، استعداد باشیم. داشتن توانایی در ساختن طرح های زیبا فقط یک جنبه دارد ، اما نکته مهمی است.
یاد بگیرید زندگی کنید و باهوش تر کار کنید ، سخت تر نیست
نمودار مجذور کاسمتری
نمودار مجذور کاسمتری
