طراحی گرافیک سایت

  • طراحی سایت تک صفحه ایی معایب و مزایا

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

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

    تفاوت و اختلاف نظر های بین این دو زاویه دید بسیار است برای همین امروز مفهومی به نام طراحی مبتنی بر رشد (Growth-Driven Design) به وجود آمده است که طراحی در آن بر اساس واقعیت و اطلاعات است و نه عقیده.

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

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

  • آیا امکان طراحی سایت با فتوشاپ وجود دارد؟

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

     

    مقدمه ایی به فتوشاپ

    فتوشاپ برای طراحی لوگو و پوستر و ویرایش عکس توسعه داده شد. اما توانایی آن به حوزه توسعه وب سایت نیز ادامه پیدا کرد. و امروز برخی توسعه دهندگان می توانند از فتوشاپ برای توسعه مدل (mock-up) طرح بندی (layout) وب سایت و حتی تولید کد از طراحی استفاده کنند.

    شرکت ادوب در واقع برای نظر عموم توجه کرده و سعی نموده تا قدمی در زمینه توسعه وب با کمک ابزار فتوشاپ بردارد. بدین جهت آن ها چندین ابزار را در جهت توسعه وب بهبود داده اند.

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

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

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

     

    چرا فتوشاپ

    طراحان وب می توانند از برنامه های مختلفی برای انجام کار استفاده کنند. مثلا برخی از طراحان با استفاده ازAdobe Illustrator (AI)  و حتی Adobe InDesign برای نمایش بصری سایت به مشتری و توسعه دهنده گان وب استفاده می کنند.

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

    من از Illustrator استفاده کردم و سعی نمودم که در امکانات ارائه شده در آن به دنبال چیزی برای راحت کردن کار هایم بیابم، اما کاربرد آن زیاد هم طول نکشید چون این نرم افزار چیزی کم دارد که فتوشاپ آن را دارد. و آن پیکسل است. البته که در Illustrator هم از پیکسل استفاده شده است اما تفاوتی در این دو نرم افزار است. وقتی که یک طراح می خواهد یک Front-end را توسعه دهد از سیستم پیکسل استفاده می کند روشی مرسوم در بین طراحان. اما در Illustrator شما هیچ وقت نمی توانید درک خوبی از پیکسل داشته باشید. شاید عجیب باشد اما با زوم کردن متوجه تفاوت فتوشاپ و Illustrator خواهید شد. در فتوشاپ در هر حالتی مقیاس و پیکسل مشخص هستند. اما در استفاده از Illustrator با استفاده از “one pixel rule” شما حس می کنید بجای یک پیکسل دو پیکسل دارید. در مجموع وقتی در این دو نرم افزار دقیق می شوید متوجه تفاوت آن ها در مدیریت پیکسل خواهید شد.

    با استفاده از Smart Object و قرار دادن Element ها در یک طراحی Global بسیاری از طراحان هدر ها، footer ها و سایر اجزا را جدا از هم نگه می دارند. اگر یک مشتری بخواهد که تغییری در یکی از این قسمت ها بدهد آن وقت شما باید آن را فقط در یک قسمت اعمال کنید. این یکی از خصوصیات عالی فتوشاپ در طراحی است.

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

    راحتی تنظیم رزولوشن

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

    فرمت های مختلف

    فتوشاپ در بهینه سازی تصاویر در فرمت های مختلف به شما کمک می کند. این ابزار از فرمت های SVG، PNG، GIF و JPG و غیره پشتیبانی می کند. این برنامه همچنین برای ذخیره کردن به فرمت های مختلف دارای خروجی های متنوع پیش فرض نیز می باشد.

    تنوع فونت

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

    ...
  • نحوه چیدن صفحه اصلی وب سایت

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

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

     

  • علم گرافیک در طراحی صفحات وب سایت

     

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

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

    ابتدا فرآیند طراحی گرافیکی سایت را بیان می کنیم:

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

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

  • صفر تا صد طراحی لوگو

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

  • چطور یک صفحه فرود سایت موفق بسازیم که کاربرها را به مشتری تبدیل کند؟

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

  • سایت را ابتدا بر روی کاغذ طراحی نمایید

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

  • راهنمای طراحی تجربه کاربری UX

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

  • ترکیب رنگ عالی برای طراحی سایت

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

info [ at ] sitedar.com
تهران، سعادت آباد، سرو غربی، کوچه آریا، پلاک 4، واحد 7
22083926 - 22085386 - 22082258
طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد
پشتیبانی آنلاین مشتریان 24 ساعته و هفت روز هفته