اصول طراحی وب سایت

آشنایی با اصول , قوانین و پیش نیازهای طراحی وب سایت


چرا سبک طراحی از گذشته تا به حال تغییر نکرده است؟

میلاد عالی ۱۱ دیدگاه اصول طراحی وب سایت چهارشنبه, ۲۳ام مرداد , ۱۳۹۲ 12145 بازدید

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

grids - webtarget.ir

چرا سبک طراحی از گذشته تا به حال تغییر نکرده است؟

رنگ و احساس : هر رنگ در طراحی وب چه معنای دارد؟

مهدخت یافتیان ۳۳ دیدگاه استاندارد وب سایت , اصول طراحی وب سایت دوشنبه, ۱۷ام تیر , ۱۳۹۲ 35712 بازدید

رنگ ها می توانند حس های زیادی را منتقل کنند در طراحی یک پروژه خیلی مهم است که بدانید که رنگ ها چه تاثیری می تواند در انتقال پیغام شما داشته باشند.

رنگ ها و احساس ها - webtarget.ir

رنگ و احساس : هر رنگ در طراحی وب چه معنای دارد؟

۸ روش برای بهبود فوترهای معمولی و رایج

میلاد عالی ۱۵ دیدگاه اصول طراحی وب سایت سه شنبه, ۴ام تیر , ۱۳۹۲ 15430 بازدید

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

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

 8 روش برای  بهبود فوترهای معمولی و رایج - webtarget.ir

۸ روش برای بهبود فوترهای معمولی و رایج

طراحان وب یا همان معماران وب

مهدخت یافتیان ۱۱ دیدگاه اصول طراحی وب سایت , ایده و خلاقیت دوشنبه, ۲۷ام خرداد , ۱۳۹۲ 15715 بازدید

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

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

ما معمار هستیم - webtarget.ir

طراحان وب یا همان معماران وب

مکث کن، نگاه کن، کلیک کن : عناصری برای جلب توجه کاربران در طراحی وب

مهدخت یافتیان ۲۳ دیدگاه اصول طراحی وب سایت , تبلیغات و بازاریابی چهارشنبه, ۸ام خرداد , ۱۳۹۲ 19542 بازدید

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

عناصری برای جلب توجه  در طراحی وب - webtarget.ir

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

مکث کن، نگاه کن، کلیک کن : عناصری برای جلب توجه کاربران در طراحی وب

قوانین نانوشته در نقد طراحی وب سایت

مهدخت یافتیان ۴ دیدگاه اصول طراحی وب سایت سه شنبه, ۲۴ام اردیبهشت , ۱۳۹۲ 9542 بازدید

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

قوانین نانوشته در نقد طرح - webtarget.ir

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

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

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

در مورد هر کدام از این قوانین با جزئیات صحبت خواهد شد اما در ابتدا کمی مقدمه چینی می کنم:

قوانین نانوشته در نقد طراحی وب سایت

معرفی شبیه سازهای موبایل جهت تست وب سایت

مهسا کیانی ۱۶ دیدگاه استاندارد وب سایت , اصول طراحی وب سایت یکشنبه, ۱۵ام اردیبهشت , ۱۳۹۲ 19007 بازدید

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

bbmobilelearn

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

معرفی شبیه سازهای موبایل جهت تست وب سایت

چگونه نقشه ای برای محتوا و مطالب وب سایت ایجاد کنیم؟

مهدخت یافتیان ۱۳ دیدگاه اصول طراحی وب سایت , بهینه سازی وب سایت شنبه, ۳۰ام دی , ۱۳۹۱ 15689 بازدید

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

 نقشه راهنمای محتوای وب - webtarget.ir

چگونه نقشه ای برای محتوا و مطالب وب سایت ایجاد کنیم؟

طراحان وبسایت از چه فریم‌ورک‌های سی اس اس ریسپانسیوی استفاده می‌کنند؟

علی طبیب زاده ۵۰ دیدگاه CSS , اصول طراحی وب سایت سه شنبه, ۱۲ام دی , ۱۳۹۱ 36950 بازدید

با ظهور پدیده طراحی وب واکنش‌گرا یا Responsive بسیاری از توسعه‌دهندگان و طراحان ماهر و خلاق به ساختن فریم‌ورک‌هایی برای آسان‌ و منظم‌تر کردن این تکنیک طراحی٬ پرداختند. در این نوع طراحی٬ عملیات ریاضی مربوط به تغییر سایز عناصر در صفحه ممکن است کسل کننده و ملال‌آور شوند و وقت زیادی را بی‌جهت از طراح وب‌سایت بگیرند. اما تعدادی فریم‌ورک ریسپانسیو وجود دارد که این فرآیند طراحی را برای طراحان و توسعه‌دهندگان آسان و سریع می‌کند. این فریم‌ورک‌ها تمام موارد مورد نیاز شامل گریدهای پیچیده٬ layoutها و مدیا کوئری‌ها را یک جا برای شما فراهم آورده تا طرح ریسپانسیو خود را به آسانی پیاده سازی کنید. در این مطلب تعدادی از این محبوب‌ترین فریم‌ورک‌ها که بیشتر توسط طراحان مورد استفاده قرار گرفته را معرفی خواهیم کرد.

Bootstrap

احتمالا نام بوتسترپ – Bootstrap را شنیدید. فریم‌ورکی که توسط چند تن از مهندسین توییتر ساخته شده است٬ اکنون به عنوان بیشترین فریم‌ورک مورد استفاده شناخته می‌شود. بوتسترپ با قابلیت‌ها و امکانات جامع زیادی ساخته شده است که باعث می‌شود طراحان بتوانند آن را هر گونه که در نظر دارند برای هر طرح مجزا تغییر دهند.

bootstrap

طراحان وبسایت از چه فریم‌ورک‌های سی اس اس ریسپانسیوی استفاده می‌کنند؟

متا تگ viewport metatag و استفاده در طراحی نسخه موبایل وب سایت

بهزاد علی بیگی ۴۶ دیدگاه اصول طراحی وب سایت سه شنبه, ۵ام دی , ۱۳۹۱ 33727 بازدید

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

responsive_web_design

متا تگ viewport چیست ؟ و چه کاربردی در طراحی نسخه موبایل سایت دارد ؟

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

در این مقاله سعی می کنیم با یک مثال ساده و به دور از پیچیدگی زیاد دلیل استفاده از این تگ را به طور عملی نشان دهیم.

متا تگ viewport metatag و استفاده در طراحی نسخه موبایل وب سایت

همه چیز در مورد Unicode – UTF8 و مجموعه‌های کاراکتری

سوران خضری ۶۲ دیدگاه استاندارد وب سایت , اصول طراحی وب سایت شنبه, ۱۸ام آذر , ۱۳۹۱ 90822 بازدید

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

این داستان تعدادی از آن کاراکترها را از نزدیک دنبال خواهد کرد هنگامی که آن‌ها از وب سرور به مرورگر و در جهت مخالف در حرکت هستند. در طول مسیر شما بیشتر درباره تاریخچه کاراکتر، مجموعه‌های کاراکتری، Unicode و UTF8 اطلاعات پیدا خواهید کرد، و اینکه چرا علامت‌های سوال و کاراکترهای استرس‌دار (accented: علامت‌ تکیه‌‌ی‌ صدا [بدین‌ شکل‌’]) عجیب و غریب گاهی در پایگاه داده‌ها و فایل‌های متنی ظاهر می‌شوند.

همه چیز در مورد Unicode – UTF8 و مجموعه‌های کاراکتری

طراحی مینیمال: خلاصه ی تاریخچه و نکات کاربردی

مهدخت یافتیان ۲۵ دیدگاه اصول طراحی وب سایت , ایده و خلاقیت شنبه, ۲۰ام آبان , ۱۳۹۱ 36684 بازدید

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

طراحی مینیمال، خیلی لوکس، پر زرق و برق و متداول نیست اما در بسیاری از رشته ها و زمینه های مختلف نفوذ کرده است، مخصوصا در زمینه های هنری. هر چیزی که به رابط کاربری (User Interface) ارتباط داشته باشد از طراحی سخت افزار، ماشین، فیلم ها، بازی ها، طراحی وب سایت گرفته تا طراحی بصری (Visual) و موارد دیگر، تحت تاثیر مینیمالیسم قرار گرفته اند.

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

دلیل اصلی اینکه چرا مینیمالیسم در رشته ها و زمینه های مختلف نفوذ کرده هنوز معلوم نیست اما خیلی ها آن را نفوذ هنر پاپیولار ( هنر توده ) یا(pop art) می نامند.زیرا مینیمالیسم بیشتر شبیه یک اصل است تا یک شیوه بصری . و تا زمانی که یک اصل باشد همه زمینه ها حتی طراحان معماری نمای ساختمان و طراحان صنعتی هم می توانند از آن استفاده و آن را توسعه دهند. کاری که در حال حاضر طراحان وب و طراحان بصری ( visual ) در حال انجام آنند.

تاریخچه مینیمالیسم - webtarget.ir

طراحی مینیمال: خلاصه ی تاریخچه و نکات کاربردی

آنچه طراحان وب باید از فونت بدانند

ناصر حاجلو ۲۳ دیدگاه استاندارد وب سایت , اصول طراحی وب سایت چهارشنبه, ۲۹ام شهریور , ۱۳۹۱ 26093 بازدید

آنچه در زیر مطالعه می‌فرمایید چکیده مطلبی است که در همایش استانداردهای وب و بستر وب باز، در تاریخ پنج‌شنبه ۲۹ تیر ماه ۱۳۹۱ توسط ناصر حاجلو، در ارتباط با وب فونت بیان شد.

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

آنچه طراحان وب باید از فونت بدانند

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

آنچه طراحان وب باید از فونت بدانند

‫چگونه یک وب سایت را تست کنیم ؟‬

مهدخت یافتیان ۱۲ دیدگاه استاندارد وب سایت , اصول طراحی وب سایت دوشنبه, ۶ام شهریور , ۱۳۹۱ 12564 بازدید

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

تست وب سایت webtarget.ir

‫چگونه یک وب سایت را تست کنیم ؟‬

وب سایت های واکنش گرا – Responsive Web Design

امیر سروری ۱۴ دیدگاه اصول طراحی وب سایت , ایده و خلاقیت دوشنبه, ۱۲ام تیر , ۱۳۹۱ 26446 بازدید

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


طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

webtarget

وب سایت های واکنش گرا – Responsive Web Design

چهار نکته که در طراحی دکمه خرید باید به آن توجه کرد

علی اقدم ۱۱ دیدگاه اصول طراحی وب سایت , تبلیغات و بازاریابی سه شنبه, ۱۶ام خرداد , ۱۳۹۱ 19555 بازدید

طراحی دکمه خرید

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

چهار نکته که در طراحی دکمه خرید باید به آن توجه کرد



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.