طراحی وب خوب در HTML چیست؟

9 اصل ضروری برای طراحی وب خوب

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

به این واقعیت افزوده شده است که بسیاری از طراحان وب (خود شامل) خود آموز هستند، طراحی وب سایت هنوز هم به اندازه ای رمان است که تنها در چندین نرمافزار طراحی تنها یک موضوع جانبی باشد و محیط به گونه ای که اغلب به عنوان تکنولوژی پایه ای تغییر می کند.

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

1. اولویت (هدایت چشم)

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

یک مثال ساده از اولویت این است که در بیشتر سایت ها اولین چیزی که می بینید لوگو است. این اغلب به دلیل آن است که بزرگ است و در آنچه که در مطالعات نشان داده شده است به عنوان اولین نفر مردم نگاه (در سمت چپ بالا) تنظیم شده است. او چیز خوبی است چون شما احتمالا می خواهید کاربر بلافاصله بفهمد که چه سایتی را مشاهده می کنید.

اما اولویت باید خیلی بیشتر باشد. شما باید چشم های کاربر را از طریق دنباله ای از مراحل هدایت کنید. به عنوان مثال، ممکن است بخواهید کاربر خود را از لوگو / نام تجاری به یک بیانیه اولیه موقعیت، کنار یک تصویر پانچ (برای دادن شخصیت سایت)، سپس به متن اصلی، با ناوبری و یک نوار کناری در موقعیت ثانویه در تسلسل و توالی.

آنچه که کاربر شما باید به دنبال آن باشد، طراحی وب سایت شماست.

برای دستیابی به اهداف شما، ابزارهای زیادی را در اختیار دارید:

موقعیت - که در آن چیزی بر روی یک صفحه است به وضوح بر چه نظری کاربر آن را می بیند تأثیر می گذارد.

رنگ - با استفاده از رنگ های شفاف و ظریف یک راه ساده برای گفتن کاربر به کجا نگاه کنید.

کنتراست - بودن متفاوت باعث می شود چیزها با هم متفاوت باشند، در حالیکه همانند آنها ثانویه است.

اندازه - بزرگ می شود مقدم بر بیش از کمی (مگر اینکه همه چیز بزرگ است، در این مورد ممکن است کمی به لطف Contrast برجسته)

عناصر طراحی - اگر یک فلش غول پیکر با اشاره به چیزی وجود دارد، حدس بزنید که در آن کاربر نگاه خواهد کرد؟

خواندن بیشتر:

شما می توانید بیشتر از افکار من در مورد اولویت در یک Psdtuts + پست قدیمی به نام عناصر طراحی وب بزرگ - لهستانی. جاشوا دیوید مک کلورگ-ژنویس در مورد اصول طراحی وب سایت و طراحی وب در Digital-Web بحث می کند. جاشوا همواره طولانی ترین نام دارد :-)

ماریوس یک سایت بسیار تمیز و بسیار ساده با فضای زیادی دارد

2. فاصله

وقتی اولین بار شروع به طراحی کردم می خواستم هر فضای موجود را با چیزهایی پر کنم. فضای خالی به نظر من هدر رفت. درواقع خلاف این موضوع صحت دارد.

فاصله چیزها را روشن تر می کند. در طراحی وب سه جنبه فضایی وجود دارد که باید توجه داشته باشید:

فاصله خطوط

هنگامی که متن را خارج می کنید، فضای بین خطوط به طور مستقیم بر روی خواندن آن ظاهر می شود. فضای بسیار کمی باعث می شود که چشم شما از یک خط به سمت دیگر پرت شود، فضای زیادی به این معنی است که وقتی شما یک خط از متن را به پایان برسانید و به چشم دیگر برسد، می توانید از بین برود. بنابراین شما باید یک محیط شاد را پیدا کنید. شما می توانید فاصله خط را در CSS با انتخاب 'line-height' کنترل کنید. به طور کلی مقدار پیش فرض را معمولا پیدا می کنم معمولا فاصله کمی دارد. فاصله خط از لحاظ فنی منجر می شود (pronounced ledding)، که از فرایندی است که پرینترها برای استفاده از جدا کردن خطوط متن در روزهای قدیمی استفاده می کنند - با قرار دادن میله های سرب بین خطوط.

چسباندن

به طور کلی متن هرگز نباید عناصر دیگر را لمس کند. برای مثال، تصاویر نباید متن را لمس کنند، نباید مرزها یا جداول باشند.

چسباندن فضای بین عناصر و متن است. قانون ساده این است که شما همیشه باید فضا داشته باشید. البته استثنائات وجود دارد، به ویژه اگر متن نوعی از عنوان / گرافیک باشد یا نام شما دیوید کارسون است :-) اما به عنوان یک قاعده کلی، قرار دادن فاصله بین متن و سایر نقاط جهان، آن را بی نهایت بیشتر قابل خواندن و دلپذیر .

فضای سفید

اول از همه، فضای سفید لازم نیست سفید باشد. این اصطلاح به سادگی به فضای خالی روی یک صفحه اشاره می کند (یا فضای منفی که گاهی اوقات نامیده می شود). فضای سفید برای تعادل، نسبت و کنتراست به یک صفحه استفاده می شود. بسیاری از فضای سفید به نظر می رسد که ظرافت و ظرافت بیشتری داشته باشند، به عنوان مثال اگر به معماری گرانقیمت بروند، تقریبا همیشه فضای بسیار زیادی را می بینید. اگر می خواهید یاد بگیرید که به طور موثر از فضای سفید استفاده کنید، از طریق یک مجله بروید و نگاه کنید که چگونه آگهی ها قرار داده می شوند. تبلیغات برای مارک های بزرگ ساعت ها و اتومبیل هامانند این است که بسیاری از فضای خالی استفاده می شود به عنوان یک عنصر طراحی.

خواندن بیشتر:

در WebDesignFromScratch یک مقاله فوق العاده به نام Web 2.0 چگونه به طراحی راهنمای وجود دارد، که در مورد ساده سازی - یک مفهوم است که استفاده زیادی از فاصله می دهد وجود دارد. خیلی چیزهای مفید دیگری هم وجود دارد!

Noodlebox کار خوبی در استفاده از حالت های روشن / خاموش در ناوبری خود برای حفظ کاربر گرا است.

آگهی

3. ناوبری

یکی از تجربیات بسیار ناامید کننده که می توانید در یک وب سایت داشته باشید، قادر به کشف کردن کجا و یا کجا هستید. من دوست دارم فکر کنم که برای بسیاری از طراحان وب، ناوبری یک مفهوم است که ما موفق به کارشناسی ارشد شده، اما من هنوز هم برخی از نمونه های بسیار بد وجود دارد. دو جنبه ناوبری وجود دارد:

ناوبری - از کجا می توانید بروید؟

چند قاعده معمولی وجود دارد که در اینجا قابل یاد آوری است. دکمه هایی که برای گردش در اطراف یک سایت باید پیدا شوند - به سمت بالای صفحه و شناسایی آسان است. آنها باید مانند دکمه های ناوبری به نظر برسند. متن یک دکمه باید بسیار واضح باشد تا جایی که شما آن را می گیرید. به غیر از حس مشترک، مهم است که ناوبری قابل استفاده باشد. به عنوان مثال، اگر شما یک زیر منو rollover داشته باشید، حصول اطمینان از اینکه فرد بتواند به موارد زیر منو دسترسی پیدا کند بدون از دست رفتن رولورد مهم است. به طور مشابه تغییر رنگ یا تصویر در rollover بازخورد عالی برای یک کاربر است.

جهت - اکنون کجا هستید؟

راه های زیادی وجود دارد که شما می توانید یک کاربر را هدایت کنید، به همین دلیل است که بهانه ای وجود ندارد. در سایت های کوچک، ممکن است فقط یک موضوع بزرگ یا یک نسخه "پایین" دکمه مناسب در منو شما باشد. در یک سایت بزرگتر، شما ممکن است از مسیرهای نان خرد شده، زیر عنوان ها و نقشه سایت برای واقعا از دست رفته استفاده کنید.

خواندن بیشتر:

SmashingMagazine دارای مجموعه ای از سبک های ناوبری مبتنی بر CSS است که برای انجام آن مفید هستند و # 3 یکی از معدود است! یک لیست جداگانه همچنین دارای یک مقاله خوب در مورد جهت گیری به نام کجا من هستم؟

 

 

4. طراحی برای ساخت

زندگی بسیار ساده تر از زمانی که طراحان وب به پوسته های CSS منتقل شده اند بسیار ساده تر شده اند، اما حتی در حال حاضر هنوز هم مهم است که در مورد چگونگی ساخت سایت زمانی که هنوز در فتوشاپ هستید فکر کنید. موارد زیر را در نظر بگیرید:

آیا واقعا می تواند انجام شود؟

شما ممکن است یک فونت شگفت انگیز برای کپی بدن خود داشته باشید، اما آیا در واقع یک فونت استاندارد HTML است؟ شما ممکن است یک طرح زیبا داشته باشید که به نظر می رسد زیبا است اما 1100 پیکسل عرض دارد و برای اکثر کاربران یک پیمایش افقی به ارمغان خواهد آورد. مهم این است که بدانیم چه چیزی می تواند و نمی تواند انجام شود، به همین دلیل است که من اعتقاد دارم همه طراحان وب باید حداقل بعضی وقت ها سایت ها را ایجاد کنند.

چه اتفاقی می افتد زمانی که یک صفحه تغییر اندازه می دهد؟

آیا شما نیاز به تکرار پس زمینه دارید؟ آنها چگونه کار خواهند کرد؟ آیا طراحی در مرکز یا چپ هم تراز شده است؟

آیا شما کاری را انجام می دهید که از لحاظ فنی دشوار است؟

حتی با موقعیت CSS، بعضی چیزهایی مانند ترازگذاری عمودی هنوز کمی دردناک هستند و گاهی اوقات بهتر است از آنها اجتناب شود.

می تواند تغییرات کوچک در طراحی شما تا حد زیادی ساده می کند چگونه شما آن را ساخت؟

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

برای سایت های بزرگ، به ویژه، می توانید چیزهایی را ساده کنید؟

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

اگر کسی نوع خوبی داشته باشد، iLoveTypography است!

5. تایپوگرافی

متن رایج ترین عنصر طراحی است، بنابراین تعجب آور نیست که بسیاری از اندیشه ها به آن رسیده اند. مهم است که موارد زیر را در نظر داشته باشید:

انتخاب فونت - انواع مختلف فونت ها چیزهای مختلفی در مورد طراحی می گویند. بعضی به نظر مدرن، بعضی به نظر می ریزند. اطمینان حاصل کنید که از ابزار مناسب برای کار استفاده می کنید.

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

فاصله - همانطور که در بالا بحث شد، فاصله بین خطوط و دور از اشیاء دیگر مهم است که در نظر بگیریم. شما همچنین باید در مورد فاصله میان نامه ها فکر کنید، هرچند در وب این اهمیت کمتری دارد، زیرا شما کنترل زیادی از آن ندارید.

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

رنگ - یکی از بدترین عادت های من تبدیل متن کم کنتراست است. به نظر می رسد خوب است اما متاسفانه خیلی خوب نیست. با این حال، به نظر می رسد که این کار را با هر طراحی وب سایت که تا به حال ساخته ام، انجام دهم، tsk tsk tsk.

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

خواندن بیشتر:

نیک لا در WebDesignerWall دارای یک مقاله عالی در مورد تایپوگرافی آنلاین به نام کنتراست تایپوگرافی و جریان است.

Happycog می گوید قابلیت استفاده در خارج از سایت، و سایت خود را ساده و آسان برای استفاده است.

6. قابلیت استفاده

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

ما قبلا برخی از جنبه های قابلیت استفاده - Navigation، Priority و Text را مورد بحث قرار داده ایم. در اینجا سه ​​مورد مهم دیگر وجود دارد:

پیوستن به استانداردها

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

فکر کنید که کاربران واقعی چه کاری انجام خواهند داد

Prototyping یک ابزار رایج در طراحی است که در واقع طرح را امتحان می کند. این کار به این دلیل انجام می شود که اغلب هنگامی که شما در واقع از یک طراحی استفاده می کنید، متوجه می شوید چیزهای کوچکی که تفاوت زیادی را ایجاد می کنند. ALA یک مقاله در حالی که به عنوان "هرگز استفاده از یک هشدار زمانی که شما به معنای لغو، یک نمونه عالی از یک تصمیم طراحی کوچک رابط است که می تواند زندگی برای یک کاربر خوردن.

به وظایف کاربر فکر کنید

هنگامی که یک کاربر به سایت شما می آید چه کاری انجام می دهند؟ لیست انواع مختلف وظایف را که افراد ممکن است در یک سایت انجام دهند، چگونه آنها را به دست می آورند و اینکه چگونه می خواهید آن را برای آنها انجام دهید، فهرست کنید. این ممکن است به معنای داشتن وظایف واقعا معمولی در صفحه اصلی شما باشد (برای مثال «شروع خرید»، «درباره اینکه چه کاری انجام میدهید» را یاد بگیرید و غیره) یا ممکن است به معنای اطمینان از چیزی مانند داشتن یک کادر جستجو همیشه راحت باشد. در انتهای روز، طراحی وب شما یک ابزار برای افرادی است که از آنها استفاده می کنید و افراد دوست ندارند از ابزارهای آزار دهنده استفاده کنند!

خواندن بیشتر:

AListApart دارای مقالات زیادی در مورد استفاده از وب است.

پالپ الکتریکی موفق به خشن شدن می شود، اما اگر شما دقیقا نگاه کنید متوجه می شوید یک شبکه قوی وجود دارد و همه چیز در واقع همه چیز را تشکیل می دهد.

7. تراز

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

شما همچنین می توانید طرح های خود را بر روی یک شبکه خاص بنویسید. من باید اعتراف کنم این کار را به صورت آگاهانه انجام نمی دهم - البته بدیهی است که یک سایت مانند Psdtuts + در واقع یک ساختار شبکه بسیار قوی دارد. در این سال من چند مقاله واقعا خوب در طراحی شبکه از جمله طراحی SmashingMagazine با مبتنی بر Grid و تفکر لیست خارج از شبکه دیده ام. در حقیقت، اگر شما علاقه مند به طراحی شبکه باشید، باید قطعا به خانه DesignByGrid.com نام برده شده به تمام چیزهایی که می خواهید بروید.

سایت ExpressionEngine روح وضوح است. همه چیز تیز و پاک است.

8. وضوح (شفافیت)

طراحی وب سایت شما در طراحی وب بسیار متنوع است. و هنگامی که به وضوح می آید، همه چیز در مورد پیکسل هاست.

در CSS شما، همه چیز پیکسل کامل خواهد بود، بنابراین هیچ چیز در مورد نگرانی وجود دارد، اما در فتوشاپ این نیست. برای رسیدن به یک طراحی تیز، باید:

لبه های شکل را به پیکسل ها متصل کنید. در صورتی که شما آنها را در فتوشاپ ایجاد می کنید، ممکن است به صورت دستی پاک کردن اشکال، خطوط و جعبه ها باشد.

اطمینان حاصل کنید که هر متن با استفاده از تنظیمات ضد لغزش مناسب ایجاد می شود. من "شارپ" زیادی استفاده می کنم.

اطمینان از این است که کنتراست بالا است به طوری که مرزها به وضوح تعریف شده است.

کمی بیش از حد تاکید بر مرزها برای غلبه بر کنتراست.

خواندن بیشتر:

من کمی بیشتر در مورد وضوح در عناصر طراحی وب بزرگ - لهستانی نوشته شده است. من متوجه شده ام که طراحان چاپ، به ویژه در طراحی وب، به پیکسل فکر نمی کنند، اما این واقعا حیاتی است.

Veerle کار بسیار خوبی از نگه داشتن حتی کوچکترین جزئیات سازگار در سراسر هیئت مدیره است.

9. ثبات

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