رفتن به مطلب

hostcode

Members
  • تعداد ارسال ها

    135
  • تاریخ عضویت

  • آخرین بازدید

  • روز های برد

    1

پست ها ارسال شده توسط hostcode

  1. چگونگی طراحی فرم ها و اشکال در CSS

    چگونگی طراحی فرم ها و اشکال در CSS

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

     



    نمایش نسخه ی نمایشی ← . 

     

  2. در 10 دقیقه با فتوشاپ یک طرح تایپوگرافی زیبا ایجاد کنید

    در 10 دقیقه با فتوشاپ یک طرح تایپوگرافی زیبا ایجاد کنید

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

     


    به عنوان مثال، اگر یک آموزش ویدئویی در YouTube آپلود کنید، این ویدئو رسانه متوسط پویا است که به تماشاگر کمک می کند تا به هدفش برسد. از سوی دیگر، متن تمام جزئیات مورد نیاز را روشن نمایش نمیدهد. 

     


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

     


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

     


    این آموزش Adobe Photoshop یک مثال خوب از یک تصویر چاپی با یک پیام ساده است: برای انجام اشتباه   شروع خوبی است پس نترسید.  شروع کنیم!

     


    typography-tutorial -final

     


    1. فتوشاپ را باز کنید یک فایل جدید ایجاد کنید من یک اندازه از پیش تعیین شده با عرض 8 اینچ و ارتفاع 10 اینچ با 300dpi استفاده کردم. البته می توانید  به اندازه ای که می خواهید تغییر دهید. 

     


    typography-tutorial -1

     


    2. بعد، یک لایه جدید اضافه کنید نام آن "پس زمینه" است. دو بار کلیک کنید تا پنجره LAYER STYLE را نشان دهد.

     


    typography-tutorial -2

     


    3. به Gradient Overlay بروید و روی شیب کلیک کنید. یک پنجره باز خواهد شد که به شما اجازه می دهد که رنگ های مورد استفاده را انتخاب کنید. از # 6dd0f7 و # 4aa8cd استفاده کنید. ایجاد سبک: شعاعی. 

     


    typography-tutorial -3a

     


    typography-tutorial -3b

     


    4. اکنون ما باید طراحی روبان را انجام دهیم. به ابزار مستطیل بروید و یک مستطیل را بکشید. رنگ آن # 8393ca. 

     


    typography-tutorial -4a

     


    5. اکنون یک مثلث با استفاده از ابزار قلم ایجاد کنید. شما باید بتوانید یک مثلث ایجاد کنید که مانند یک فلپ روبان واقعی ظاهر شود. رنگ آن # 6274b2. 

     


    typography-tutorial -5

     


    6. کپی مثلث . حالا مستطیل دیگری را با استفاده از ابزار مستطیل شکل دهید. رنگ آن # 8393ca است. مستطیل ها را به طوری که با فلپ های مثلث با هم تداخل دارند

     

    قرار دهید
    7. روبانها را کپی کنید. 

     


    typography-tutorial -6

     


    8. اکنون پیام را روی نوارهای کاغذی بنویسید. در این مورد من از فونت  قهوه ای زرد استفاده کردم. من آن را سیاه رنگ کردم برای پیام مرکز، از Vermes Vibes 2 White استفاده کردم و # 6274b2 را رنگ آمیزی کردم. 

     


    typography-tutorial -7

     


    typography-tutorial -9

     


    10. ذخیره آن به عنوان یک فایل JPEG. 

     


    typography-tutorial -final

     


    انجام شد! با تشکر از شما برای خواندن! 

     

    • Like 1
  3. طراحی تکنولوژی های پوشیدنی و ارتباط آن با طراحی سایت

     
    طراحی تکنولوژی های پوشیدنی و ارتباط آن با طراحی سایت

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

     


    در طول سال های گذشته، فناوری پوشیدنی مانند Google Glass و - در آینده نزدیک - < a href = "https://www.macrumors.com/roundup/apple-watch/" target = "_ blank"> iWatch اپل ، صحبت از شهر تکنولوژی است. ما می دانیم کمی، دنیای فناوری به سرعت در حال تغییر است. این احتمال بسیار بزرگی است که در آینده نزدیک ابزارها دیگر قابل حمل نخواهند بود. آنها می خواهند پوشانده شوند. 

     


    google-glass

    فناوری پوشیدنی؟ این چیست؟


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

     


    به طور معمول، تکنولوژی پوشیدنی به عنوان ابزار برای تناسب اندام استفاده می شود. نمونه های بزرگی از این Fidbit و ساعتهای هوشمند مانند Pebble 

     


    با این حال، آن را به عنوان یک نوع اساسی از تکنولوژی که توده ها می توانند استفاده کنند تبدیل شد. یک نمونه عالی از این Google Glass است. اگر قیمت نوآورانه در بازار 1500 دلار فروخته شود، محصول نوآورانه گوگل مطمئنا ابروها را افزایش می دهد، اما هنگامی که رقابت فراوانی به دست می آید، می توان انتظار داشت قیمت آن کاهش یابد (که ما امیدواریم بتوانیم آن را تامین کنیم).

    Where it all started


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

     


    در دهه 1960، مخترعین فناوری پوشیدنی از ابزارهایی استفاده کردند که برای تعداد کارتها انجام شده است. آن را به شدت افزایش می دهد شانس خود را برای برنده شدن در جدول رولت. 
    beat-the فروشنده

     


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

     


    شاید دلیل آن این است که فناوری پوشیدنی در سالهای گذشته راهی برای دوستی بیشتر در مورد UI پیدا نکرده است. 

     


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

     


    و احتمالا، تا آن زمان، ما در نهایت آنچه را که آنها به عنوان اینترنت چیزها 

     


    این بدان معناست که در 10 سال آینده احتمالا گوشواره های هوشمند یا iNecklaces را خواهیم داشت. این ممکن است به اختراعات دیگری نیز باز گردد. با فناوری پوشیدنی به طور کامل تاسیس شده است، برخی از نابغه های فن آوری نیز امکان گجت هایی را که قادر به تعامل هولوگرافی هستند، می بینند. بله، مثل Ironman است. تنها تفاوت این است که شما می توانید تونی استارک بازی کنید. 
    width of wearable-gadget

     


    با توجه به این که روند محبوب تر می شود، کاربران بیشتر و بیشتر با شگفتی های این تکنولوژی ملاقات می کنند. در نتیجه، همه چیز مانند یک Domino، طراحی وب شامل می شود. 

     


    تکنولوژی پوشیدنی بیشتر تولید و خرید می شود، شرکت ها و مشتریان بیشتری به ابزارهای جدید می پردازند و شما نقش مهمی را در طراحی آنچه که درک می کنید بازی می کنید. 

     


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

     


    اجازه دهید این را به شما بگویم: تکنولوژی سریعتر از آنچه شما فکر می کنید می تواند پیشرفت کند. یک روز شما بیش از رایانه های قرص می آید و بعد از چند هفته فن آوری پوشیدنی غالب می شود. 

     


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

    چگونه طراحی وب سایت چگونه تاثیر می گذارد؟


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

     


    در اینجا چند بینش وجود دارد: 

    طراحی ها مطمئنا به وسیله قابل پوشیدن واکنش نشان خواهند داد


    این بسیار واضح است قبل از سن گوشی های هوشمند و قرص، طراحی وب بیشتر برای مانیتورهای رایانه مناسب بود. هنگامی که گوشی های هوشمند به یک روند تبدیل شدند، ناگهان، طراحی پاسخگو به یک روند تبدیل شد. حالا که سن 
    smart-watch

     


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

    اطلاعات مضر سریع تر خواهد شد


    تقاضا در اطلاعات فوری نیز قطعا افزایش خواهد یافت. نکته اصلی استفاده از ابزار برای شما این است که برای دسترسی به اطلاعات حتی بدون دستیابی به جیب شما دسترسی پیدا کنید. 
    social -network-smart-watch

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


    توسعه تکنولوژی پوشیدنی می تواند اولین گام در توسعه سایر فن آوری های پیشرفته باشد. یک نمونه عالی از این ابزار iOptik است که به شما اجازه می دهد با یک بوم مجازی، با ترکیبی از لنزهای تماسی و عینک پروژکتور بازی کنید.

     


    ioptik

     


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

     


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

    اندازه فونت بزرگتر خواهد شد


    من این را برای تأکید تکرار میکنم: تکنولوژیهای پوشیدنی فضاهای صفحه کوچکتر را دارند. 

     


    این به این معنی است که 16px-font اندازه در برخی از دستگاه ها نیز بسیار کوچک است. جالب است که چگونه طراحی وب مدیریت می شود تا محتوا را روی یک صفحه کوچک قرار دهد بدون این که کاربر بتواند فقط به خواندن دستگاه نزدیکتر شود. 
    minimal

     


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

     


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

     

    src = "48.jpg

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

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

     


    یک وب سایت یک محصول نهایی

    اجازه دهید مشتریان شما بدانند که چه کاری انجام می دهید


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

     


    این یک حقیقت است که بسیاری از طراحان وب وجود دارند که به اندازه شما استعداد دارند یا شاید از شما با استعداد تر هم باشند. پس ارزش فوق العاده ای که می توانید اضافه کنید این است که مشتریان قدیمی خود را حفظ و برای مدت طولانی با شما کار کنند؟ 
    پل جارویس  یک طراح معمولیست که می تواند 9000 دلار برای هر پروژه دریافت کند زیرا او به مشتریان خود را  خدمات مختلفی ارائه می دهد. استراتژی هایی که به آنها کمک می کند به طور موثر برای کسب و کار  و  وب سایت شان ارزش افزوده داشته باشند. 

     


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

     


    پل جارویس

     

    سایتی کارا طراحی کنید


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

     

     

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

     


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

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

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

    customer-requirement.jpg

    ۱- از مشتریان درخواست ارجاع کنیم

    توی شماره فروردین ماه مجله همشهری داستان، سردبیر قسمتی از حرف‌های خودش را اینجوری به مخاطبان در میان گذاشت:

    (( مجلات کاغذی روزگار سختی را می‌گذرانند، رقابت در دنیای که همه سرشان توی گوشی‌های هوشمند است سخت تر و سخت تر می شود. تنها راهی که نسخه کاغذی داستان چاپ بشود این است که شما داستان را تبلیغ کنید و هدیه‌اش بدهید.))

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

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

    coustomer-help.jpg

    ۲- به مشتریان کمک کنیم

    ما در جامعه در موقعیت‌های مختلفی قرار می‌گیریم که مطابق آنها نقش‌های مختلفی را می‌پذیریم، به عنوان مثال ما تنها یک سبد دوستان در ذهن خودمان نداریم که هر کسی با ما آشنا شد، او را درون آن قرار دهیم. ماکوم گلدول در کتاب Tipping point در این مورد یک عدد طلایی را بدست آورده است. او اعتقاد دارد آدم ها تنها با ۱۵۰ نفر می توانند ارتباط موثر و پایداری داشته باشند.

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

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

    calander.png

     

    ۳- همیشه در دید مشتریان باشیم

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

    discount-customer.jpg

     

    ۴- برای پیشنهادهای آنها مشوق بگذارید

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

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

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


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

     1. Free Material UI Kit

    کیت ابزار رایگان متریال بهترین ابزار برای  طراحی متریال است - زبان طراحی مینیمالیستی توسط گوگل. این برنامه با بسیاری از عناصر طراحی رابط کاربری Material مانند پروفایل، آمار، نمودارها، دکمه ها، منوی ناوبری و غیره بسته شده است. شامل بیش از 40 عنصر و قالب های UI، بیش از 30 آیکون و 7 دسته بندی برنامه برای پروژه بزرگ بعدی  شما. 
    free-material-kit.png

    Do

    درست مثل نام کوتاه و نقطه به نقطه، طراحی تمیز یکی از پایه های DoUI Kit است. وب سایت رسمی ادعا می کند که Do   بیشتر برای استفاده از APP UI KIT  است.این مجموعه با 130 صفحه نمایش، 10 تم های منحصر به فرد و بیش از 250 عناصر UI بارگیری شده است، این کیت به شما در سازماندهی عناصر در UI کمک می کند.  
    do.png

    3. WOHOO: کیت UI برنامه رایگان موبایل


    Wohoo یک کیت UI خوب برای iOS است - iOS 8. 8. فایل PSD در این کیت دارای 100٪ لایه مبتنی بر بردار است و Retina HD آماده است. این کیت بسیار مفید است اگر شما در مورد سه مدل آیفون - آیفون 5، آیفون 6 و آیفون 6S - به ایده های برنامه توجه داشته باشید. 

     


    woohoo.png
     

     4. کیت UI آی فون اپل

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

     


    FireShot-Screen-Capture-144-Elven-iPhone-App-UI-Kit-on-Behance-www_behance_net_gallery_8296849_Elven-iPhone-App-UI-Kit.png
     

    5. CafeGrapp


    CafeGrapp - یک کیت UI برای iOS 8 است . به نظر می رسد به اندازه کافی با زیبایی شناسی و طراحی مسطح آن امیدوار کننده است. این یک رابط جذاب  را ارائه می دهد. کیت UI ارائه شده 7 PSDs شامل - چهارچوب، ورود به سیستم، نمایه من،  Flavours Maps  و Side. است

     


    cafegrapp.png

    6. Kit API GUI


    کیت UI بعدی در لیست ما به طور خاص برای ساعت اپل است که باید از نام آن حدس زده باشید. کیت دارای بیش از 270 قالب در 6 طبقه است که نشان می دهد که این امکان را برای طراحی مدل های متعدد UI فراهم می کند.  
    کیت UI از یک نسخه از فونت سانفرانسیسکو استفاده می کند که سیستم جدید اپل است. همچنین شما می توانید فونت Roboto که مشابه سان فرانسیسکو است قرار دهید. کیت UI دارای جزئیات باور نکردنی برای ایجاد UI   پوشیدنی است، که مانند یک رویا برای طراحان است. این کیت از دستورالعمل های اپل پیروی می کند، باعث می شود که هر طراح UI برای هر برنامه ای که می خواهد، از آن استفاده کند. 

     

    apple-watch.png
  7.  شاخص های عملکرد کلیدی، که به عنوان KPI شناخته می شود،پارمترهای قابل اندازه گیری که به سازمان کمک می کند تا پیشرفت را در راستای اهداف خود تعریف و پیگیری کند.

    با وجودی که تلاشهای زیادی  برای بهبود تجربه کاربر و کیفیت تعاملات کاربر و افزایش رضایت کلی انجام می شود نتیجه ها کیفی است، اما نیاز به اندازه گیری این تلاش ها و اندازه گیری پیشرفت داریم. KPI های UX این اندازه گیری ها را میسر می شوند .

     

     

    3.png

     

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

    KPI هایی که نشان دهنده پیشرفت در رابطه با اهداف مربوط به تجربه کاربر هستند به عنوان KPI UX شناخته میشوند.

     

     

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

    کمی دشوار است ، اما از سوی دیگر KPI UX بینش بزرگ را در مسائل مربوط به قابلیت استفاده است.

     

    تیم طراحی UX می توانند از دو نوع KPI UX استفاده کنند: کمی و کیفی.

    KPI  های کمی UX

     

    • میزان موفقیت وظیفه
    • زمان بر روی وظیفه
    • استفاده از جستجو در مقابل ناوبری
    • نرخ خطای کاربر
    • مقیاس قابلیت استفاده سیستم (SUS)

    KPI کیفی UX

     

    • انتظارات و عملکرد گزارش شده است
    • رضایت کلی

     

     

     

    1. نرخ موفقیت وظیفه

     

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

     

     

    4.png

     

     

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

     

    2. زمان انجام وظیفه

     

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

     

     

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

     

     

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

    3. استفاده از جستجو در مقابل منو ناوبری

     

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

     

     

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

     

     

    5.png

    4. نرخ خطای کاربر

     

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

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

     

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

     

     

     

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

    نرخ وقوع یک خطا :

     

     

    6.png

     

     

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

    نرخ خطا :

     

     

    7.png

     

     

    مثال: پنج کاربر پرداخت آنلاین کارت اعتباری انجام داده اند. این وظیفه دارای هفت موقعیت خطا است. هر یک از این کاربران بر این اساس اشتباهات زیادی را انجام داده است: 2، 4، 1، 2 و 3.

     

     

    میانگین خطای رخداد خطای کار پرداخت آنلاین کارت اعتباری

     

    (2+4+1+2+3)/7×5= 0.34 
      0.34
    * 100 = 34%

    5. مقیاس پذیری سیستم (SUS)

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

     

  8. سال نو، زمان جدید برای فکر کردن در مورد روند طراحی سایت است.
     
    شروع سال، وقت خوبی است که سال گذشته و موفقیت های آن را پشت سر بگذارید و با چیزهایی که می خواهید بهبود و تغییر دهید، پیش بروید.
     روند طراحی سایت نیز از این قاعده مستثنا نیست. بسیاری از عناصر در  سال 2018 به محبوبیت دست یافتند و همچنان به عنوان روند در سال 2019 ادامه خواهند یافت. این عناصر شامل  رنگ، تایپوگرافی و استفاده از متن، صدا  و رابط های VR و UX هستند.
     
    در حال حاضر بسیاری از چیزهایی که در طراحی وب اتفاق می افتد، مانند یک سنت است و پشت سر گذاشتن آنها بسیار دشوار است، اما ما امیدواریم که از دیدن 17  ترند طراحی وب و روند UI در سال 2019 لذت ببرید و به جریان بپیوندید.
     
     

    پالت های رنگی پر جنب و جوش

    3.jpg4.jpg5.jpg
     
    رنگ روشن در همه جا است از زمینه های شیب دار تا پوشش تصاویر روشن به انیمیشن هایی که از رنگ های متحرک استفاده می کنند، پالت های رنگی پر جنب و جوش همچنان برای به دست آوردن محبوبیت در سال ۲۰۱۹ به تلاش ادامه خواهند داد.
    بسیاری از این رنگ های روشن از دیگر روندهای طراحی تکامل یافته اند. درخشندگی رنگ اولین بار با طراحی تخت شروع به محبوبیت نمود، رنگ های پر جنب و جوش با طراحی متریال نمایان تر شدند.
     
    نکته خوب در مورد این روند طراحی این است که رنگ - هنگامی که شما دارای یک پالت - بسیار ساده هستید.لازم نیست که وب سایت خود را به طور کامل طراحی مجدد کنید.
     

    طراحی احساسی

    6.jpg7.jpg
    در سال 2019 وب سایت ها و برنامه هایی که ارتباط عاطفی را ایجاد نمی کنند، جایی ندارند. با توجه به طراحی، ارتباطات عاطفی به چهار دسته اساسی تقسیم می شوند: شادی و غم، اعتماد و انزجار، ترس و خشم، و تعجب و پیش بینی. 
     
    هر عنصر بصری در طراحی نشانه ای برای کاربران در مورد چگونگی واکنش آنها می باشد. حرکت در برنامه bike، به عنوان مثال، نشان می دهد که  کاربر می خواهد سوار دوچرخه شود. همانطور که از در مثال Sprout نیز صادق است، یک چهره خندان ایجاد تعامل مثبت با کاربران است. 


    عمق و عناصر  با طراحی" واقعی "

    8.jpg9.jpg10.jpg
     
     

    انیمیشن هدفمند

    11.jpg12.jpg
     

    طراحی سورئال و   انتزاعی

    13.gif 14.gif 15.png16.jpg17.jpg
     

     

    صدای بیشتر

    18.gif 19.gif
     

     

    طراحی تک صفحه ای

    21.jpg22.jpg
     

     

    طراحی تخت با المان های 3D

    23.gif 24.gif

     

    تایپوگرافی مطلق

    25.jpg26.jpg27.jpg

     

     

    گرادیان بیشتر

    28.jpg29.jpg30.jpg

     

     

    تایپوگرافی چاپی / سرفس بیشتر

    31.jpg32.jpg33.jpg
     

     

    تمرکز بر تجسم داده ها

    34.jpg35.jpg36.jpg

     

    نوشتن برای UX

    37.jpg38.jpg39.jpg

     

    تقسیم صفحه نمایش

    40.jpg41.jpg

     

    انیمیشن متحرک

    43.jpg44.jpg

     

    متن بیشتر ( جدی!)

    46.jpg47.jpg48.jpg
     
  9.  شاخص های عملکرد کلیدی، که به عنوان KPI شناخته می شود،پارمترهای قابل اندازه گیری که به سازمان کمک می کند تا پیشرفت را در راستای اهداف خود تعریف و پیگیری کند.

    با وجودی که تلاشهای زیادی  برای بهبود تجربه کاربر و کیفیت تعاملات کاربر و افزایش رضایت کلی انجام می شود نتیجه ها کیفی است، اما نیاز به اندازه گیری این تلاش ها و اندازه گیری پیشرفت داریم. KPI های UX این اندازه گیری ها را میسر می شوند .

     

     

    3.png

     

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

    KPI هایی که نشان دهنده پیشرفت در رابطه با اهداف مربوط به تجربه کاربر هستند به عنوان KPI UX شناخته میشوند.

     

     

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

    کمی دشوار است ، اما از سوی دیگر KPI UX بینش بزرگ را در مسائل مربوط به قابلیت استفاده است.

     

    تیم طراحی UX می توانند از دو نوع KPI UX استفاده کنند: کمی و کیفی.

    KPI  های کمی UX

     

    • میزان موفقیت وظیفه
    • زمان بر روی وظیفه
    • استفاده از جستجو در مقابل ناوبری
    • نرخ خطای کاربر
    • مقیاس قابلیت استفاده سیستم (SUS)

    KPI کیفی UX

     

    • انتظارات و عملکرد گزارش شده است
    • رضایت کلی

     

     

     

    1. نرخ موفقیت وظیفه

     

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

     

     

    4.png

     

     

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

     

    2. زمان انجام وظیفه

     

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

     

     

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

     

     

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

    3. استفاده از جستجو در مقابل منو ناوبری

     

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

     

     

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

     

     

    5.png

    4. نرخ خطای کاربر

     

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

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

     

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

     

     

     

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

    نرخ وقوع یک خطا :

     

     

    6.png

     

     

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

    نرخ خطا :

     

     

    7.png

     

     

    مثال: پنج کاربر پرداخت آنلاین کارت اعتباری انجام داده اند. این وظیفه دارای هفت موقعیت خطا است. هر یک از این کاربران بر این اساس اشتباهات زیادی را انجام داده است: 2، 4، 1، 2 و 3.

     

     

    میانگین خطای رخداد خطای کار پرداخت آنلاین کارت اعتباری

     

    (2+4+1+2+3)/7×5= 0.34 
      0.34
    * 100 = 34%

    5. مقیاس پذیری سیستم (SUS)

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

     


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

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

     

    شروع با کاربر

    در شروع هر  پروژه  شما باید کاربر را در نظر بگیرید. بدون کاربر، هر چقدر سعی  کنید، حرکتی نمی کنید. احتمالا قبلا از Term User Experience (یا UX) شنیده اید، اما برای محصول شما چه معنایی دارد؟ کاملا بستگی دارد به کاربران شما. پیدا کردن آنچه که مخاطبان شما به  آن پاسخ مثبت دهند، یک موضوع پیچیده است که باید مقاله خاصی در این مورد مطالعه کنید؛ بنابراین، ما در مورد آنچه که در ذهن کاربران شما ست، بیش از حد غرق نخواهیم شد. با این حال، در هر کسب و کار ی، عدم سرمایه گذاری در تجربه کاربر همیشه سبب    شکست خواهد شد. 0.jpg
     

    طراحی واکنشگرا

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

     

    2.jpg

    طراحی تایپوگرافی پاسخگو

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

    هنر فضای منفی

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

    فرم تماس و عضویت کارا  طراحی کنید

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

     

    4.png

     

     

    از SVG بیشتر استفاده کنید

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


    5.jpg

  11. ایده های درآمد منفعل و نمونه هایی برای طراحان

     
    ایده های درآمد منفعل و نمونه هایی برای طراحان

    در این مقاله شما می توانید برخی از ایده های درآمد منفعل غیرقابل پیش بینی را بیابید که در کسب و کار شما امن تر می شود. 

     


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

    جعبه ابزار طراح وب شما 
    Unlimited Downloads: 500،000+ Web قالب ها، مجموعه آیکون ها، تم ها و طراحی های


    فهرست مطالب: 

     

     

    جعبه ابزار طراح Freelance 
    دانلود نامحدود: 500،000+ قالب وب، مجموعه آیکون، تم ها و طراحی دارایی


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

     


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

    7 طراح وب سایت که با موفقیت آنلاین را آنلاین می کند


    بسیاری از طراحان وب و توسعه دهندگان وب که قبلا از فرصت ها در مقابل آنها استفاده می کنند وجود دارد: 

     


    Jacob-Cass -Interview

     


    یعقوب کاس، طراح و هنرمند چند رشته ای است که همه نوع مشتریان را شامل می شود، از جمله افرادی مانند Disney، Jerry Seinfeld، Red Bull، Nike و VitaminWater. او در حال حاضر به عنوان یک مدیر هنری/طراح تعاملی در یک سازمان نیویورک Ammirati کار می کند، در حالی که آزادانه تحت کسب و کار و وبلاگ Just Creative نیز فعالیت می کند. او همچنین Logo of the Day، یک وبگاه آرم گالری اختصاص داده شده برای نشان دادن بهترین طرح های آرم در سراسر جهان، و Logo Designer Blog، وبلاگ اختصاصی به نام تجاری و طراحی هویت طراحی می کند. 

     


    Jacob Cass در این مصاحبه به سوالات زیر پاسخ می دهد: 

     


    شما می توانید مصاحبه را بخوانید اینجا . 
    sacha-greif -interview

     


    ساشا گریف طراح وب است که متخصص در رابط کاربری برای برنامه های وب و تلفن همراه است. او با مشتریان مانند Hipmunk، Le Monde، MileWise و یونسکو کار کرده است. ساچا شروع به فعالیت می کند، Folyo و کتاب الکترونیکی خود را منتشر کرده است که بسیار خوب دریافت می شود. او همچنین وبلاگ شخصی خود را طراحی می کند. 

     


    در این مصاحبه، ساچا موارد زیر را توضیح می دهد: 

     


    شما می توانید مصاحبه را بخوانید اینجا . 
    chris-spooner-design-blogs 

     


    کریس اسپونر گرافیست و طراح وب از انگلیس است که دو وبلاگ طراحی محبوب Blog.SpoonGraphics و Line25 را اجرا می کند. 

     


    در این مصاحبه:

     


    شما می توانید مصاحبه را بخوانید اینجا .

     


    Ruben Gamez بنیانگذار انفرادی Bidsketch، یک وب سایت نرم افزاری برای طراحان وب است. 

     


    در این مصاحبه:

     


    شما میتوانید مصاحبه را اینجا بخوانید. 

     


    jarrod-drysdale-interview 

     


    Jarrod Drysdale یک طراح وب است که وبلاگ خود را در Studio Fellow اجرا می کند. جارود طی دوران حرفه ای خود به عنوان طراح، با استادان فنی، استودیوهای فیلم، شرکت های مالی و مارک های مصرفی کار کرده است. او همچنین یک کتاب الکترونیکی برای بنیانگذاران راه اندازی "Bootstrapping Design" نوشت. 

     


    در این مصاحبه:

     


    شما می توانید مصاحبه را بخوانید اینجا . 

     


    Jacob-Gube-Interview-Founder-Tips

     


    Jacob Gube بنیانگذار Six Revisions است که یکی از محبوبترین و سریعترین وب سایتهای طراحی وب در اینترنت است. او همچنین یک طراح وب و توسعه دهنده وب است که متخصص توسعه و توسعه PHP است. 
    در این مصاحبه:

     


    شما می توانید مصاحبه را بخوانید اینجا . 

     


    Stelian_Subotin

     


    Stelian Subotin یک طراح وب و نویسنده است. 

     


    در این مقاله:

     


    شما می توانید مقاله اینجا را بخوانید.

    سوالات متداول درباره درآمد منفعل


    من یک طراح وب وب 20 نفره رایگان وب سایت هستم. من "هفته کاری چهار ساعته" را خوانده ام. این همه به نظر بسیار جذاب است: من دوست دارم که بتوانم دنیا را بدون نیاز به پول زیاد نگران کنم. آیا برای کسی مانند من امکان ایجاد جریان هایی از درآمد غیرفعال است که این رویا را تحقق می بخشد؟ 
    بله. 

     


    شما پول زیادی برای برداشتن آن ندارید. با 2000 تا 3000 دلار در ماه میتوانید به راحتی از طریق بسیاری از مکانهای اروپای شرقی، آسیا، آمریکای جنوبی و آفریقا سفر کنید. مطمئنا فرض کنید شما با مسافرت در بودجه پایین تر (بدون هتل 5 ستاره) خوب هستید. 

     


    من می خواهم بگویم که بهترین شرط بندی شما احتمالا SaaS است زیرا درآمد تکراری است (در مقایسه با خرید یک بار مانند کتاب های الکترونیک و یا دوره های ویدئویی). 
    اگر چه ممکن است طولانی تر از آنچه شما فکر می کنید برای رسیدن به سطح 2000 تا 3000 دلار در ماه داشته باشید.
    من یک کار تمام وقت، خانواده و وام مسکن دارم. من نمی خواهم از کار و کوله پشتی خودم از آسیای جنوب شرقی خارج شوم. من به درآمد اضافی برای ایجاد زندگی بهتر برای خانواده ام می خواهم. آیا پول آنلاین برای گزینه مناسبی است؟ 

     


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

     


    شما نمی خواهید معیشت خانواده تان بستگی به یک منبع درآمد داشته باشد: کار شما. همه ما متوجه شدیم که در سال 2008 هزاران نفر کار می کرد؟ ما نمی توانستیم؟ 

     


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

     


    بستگی دارد. 

     


    شما می توانید با ایجاد پلاگین WP و فروش قالب های PSD شروع به ساخت یک مقدار کمی پول کنید. 

     


    اگر میخواهید با کتابهای الکترونیکی، برنامهها، دورههای ویدیویی، SaaS، و غیره درآمد کسب کنید، زمان و دانش بیشتری خواهید داشت.

     


    من می گویم احتمالا طول می کشد که فکر می کنید. هنوز شغل خود را ترک نکنید. 

     


    چقدر زمان برای حفظ منبع درآمد غیر فعال است؟ 

     


    این بستگی به نوع سیستم درآمد غیرفعال شما دارد. 

     


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

     


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

     


    شماره

     


    شما باید درد واقعی را پیدا کنید که مردم در حال حاضر تجربه می کنند و راه حل هایی را پیشنهاد می کنند که مایلند آن را پرداخت کنند. 

     


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

     


    خوب، پس من دوست ندارم که مردم عینک های رنگی رو به افزایش بگذارند، و سپس تماشای آنها را شکست می دهند، بنابراین من با شما خسته می شوید: 

     


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

     


    دلیل این است که من لیستی از منابع بازاریابی آنلاین مورد علاقه من را گردآوری کرده ام: 

     


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

     


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

     


    به نظر میرسد catch-22 ، شما نمیتوانید نمونه کارهای بزرگ و متنوع را بدون کار انجام دهید، و شما می توانید بدون یک نمونه کارهای بزرگ و متنوع پرداخت کنید. شما ممکن است مایل به پذیرفتن چند پیشنهاد رایگان برای کار کنید. 

     


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

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


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

     


    Dustin Curtis، طراح مشهور دنیا در پشت شبکه Svbtle ، یک بار یک برنامه وب ایجاد کرد که یک جدول زمانی بصری از زندگی شما را ایجاد کرد، به نام Lifepath.me (که متاسفانه دیگر وجود ندارد). این طرح زیبا، پیچیده و هوشمندانه طراحی شده بود که به وضوح کار زیادی به آن وارد شده بود و چیزی بود که باعث شد تا او حتی معروف تر از او هم باشد. چند ماه پس از آن، او را به فروش بیش از 10،000 دلار رسید (علاوه بر 3880 دلار ساخته شده از ثبت نام). 

     


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

     


    هر دو Lifepath و Threewords باور نکردنی در portfolios Dustin و مارک - موفق، زیبا طراحی شده و قابل توجه است. آنها هر دو همچنین نیاز به کد را دارند، اما لازم به ذکر است که برنامه نویسی مورد نیاز نسبتا پایه است و چارچوب هایی مانند Ruby on Rails برای سایت هایی مانند این مناسب هستند. شما می توانید در مورد چگونگی شروع به یادگیری Ruby در اینجا پیدا کنید. 

     


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

     


    26.jpg 

     


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

     


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

     


    شما حتی می توانید موضوعی را که افتخار می کنید ایجاد کنید و آن را در یک سرویس مانند Themeforest به فروش برسانید، اگر نگران باشید که شما قادر نخواهید بود که به اندازه کافی افراد خود را مشاهده کنید. Orman Clark از Premium Pixels اخیرا رکورد ThemeForest را با فروش بیش از 47،000 دلار در یک ماه از فروش تم های وردپرس خود شکست داد. در حالی که شاید شما نباید انتظار داشته باشید که این نوع از پول در هر زمان به زودی، نشان می دهد که شما می توانید چیزهایی را که می خواهید طراحی کنید بدون نیاز به پرداخت هزینه طراحی کنید. 
    27.jpg%20alt%20=

     


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

     


    اگر بیشتر علاقه مند به طراحی و فروش فونت ها هستید، سایت های زیادی وجود دارد که به شما کمک می کند این کار را انجام دهید. MyFonts.com مدتها بوده است و شناخته شده است برای نمایش و فروش فونت های بسیار زیبایی طراحی شده است، در حالی که Riley Cran و Tyler Galphin که جدیدا از نوع Lost Type Co-Op نام گرفته است، یک فونت جالب Pay-What-You-Want است این اجازه می دهد تا شما، طراح، 100٪ از وجوه را از هر فروش دریافت کنید. 

     


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

     


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

     


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

     


    33.jpg

     


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

    مزایای چیست؟


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

     


    هنوز ایده ای وجود دارد؟ خوب ما بیشتر داریم. 

     


    39.jpg%20alt%20=

     


    جوزف لیفریری 

     


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

     


    45.jpg

     


    Ignaty Nikulin 

     


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

     


    51.jpg%20alt%20=

     


    جوناس لیکوویچوس 

     


    این استخوان های لخت، فضای کاری مدرن به طراح اجازه می دهد راحتی و راحتی تمرکز صرفا بر روی کار خود را با این زمینه مینیمالیستی. 
    57.jpg%20alt%20=

     


    Matt Regan 

     


    ایستگاه کاری Matt Regan با استفاده از نورپردازی کار و مواد مورد نیاز طراح برای به دست آوردن کار خود را انجام می دهند. 

     


    63.jpg%20alt%20=

     


    Brendon Grobler 

     


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

     


    69.jpg%20alt%20=

     


    جاناتان پترسون 

     


    این ایستگاه کاری جالب و جالب برای طراح جاناتان پترسون نمونه دیگری از یک طرح ساده با نقطه کانونی است - Mac. 

     


    75.jpg%20alt%20=

     


    دین اوکلی 

     


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

    منابع اضافی


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

    Conclusion


    در اینجا، نکاتی برای حذف این مقاله (و بیشتر در نظر بگیرید) در طراحی فضای جدید شما وجود دارد: 

     


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

     


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

     


    should-web-designers-learn-code-02src%20=

     


    عکس از وب سایت تیلور 

     


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

     


    should-web-designers-learn-code-03src%20=

     


    عکس از businessinsider.com 

     


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

     


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

     


    should-web-designers-learn-code-04

     


    عکس از Andysowards 

     


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

     


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

     


    همچنین، با داشتن برخی از تجربه برنامه نویسی باعث می شود شما رئیس خود را از طراحی خود را. به عنوان مثال، شما در حال طراحی قالب وب سایت هستید. البته، اگر شما از ژنراتورهای قالب خارج استفاده می کنید، شما مزیتی برای استفاده از عناصر مطلقا ندارید. شما فقط دنبال چه الگو می باشید و شما در جعبه و طراحان وب به عنوان هنرمندان به حق خود به کار گرفته اید - هرگز نباید در جعبه ها گیر بیفتد. اما اگر شما بعضی از برنامه های اساسی را می شناسید، می توانید کنترل کنید که divs نسبتا یا غیره قرار گرفته اند. 
    علاوه بر این، از بعضی از فایل های بزرگ که هارد های شما را اشغال می کنند، فراموش نخواهند شد. بیشتر ویراستاران WYSIWYG کدهای طولانیتری تولید می کنند که می تواند سرعت بارگذاری صفحه وب شما را تحت تاثیر قرار دهد. 
    should-web-designers-learn-code-05

     


    عکس از BAVC 

     


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

     


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

     


    should-web-designers-learn-code-06

     


    عکس از Web Designer Depot 

     


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

     


    should-web-designers-learn-code-07

     


    عکس از 1BP 

     


    بیایید با آن روبرو شویم، از طریق یک موضوع به ظاهر بی انتها از کد ها می تواند یک لالایی خفیف و بصری برای بسیاری باشد، به ویژه کسانی که برنامه نویسی را به عنوان هیجان انگیز پیدا نمی کنند. حالا اگر واقعا میخواهید یاد بگیرید، باید از درد در آنچه که شما می دانید و دوره های خسته کننده یادگیری را می گیرید، ضربات بزنید. شما مانند یک زبان جدید تدریس می شوید. شما باید صبور باشید، باز و حداقل، کنجکاو شوید تا بهتر شوید. 
    should-web-designers-learn-code-08

     


    عکس از اخبار آمازون 

    نتیجه گیری


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

     


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

     

    src = "130.jpg
  12. طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه

     
    طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه

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

     


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

     


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

     


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

     


    fixed-scroll-01-480x267src%20=

     


    اکنون اجازه می دهد نگاهی به نحوه قرار دادن ظروف در مثال بالا بگذارید. 

     


    موقعیت کانتینر تصویر

     


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

     


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

    صفحه محصولات طراحی


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

     


    حالا شما می توانید صفحه پایین را پیمایش کنید و شما می توانید اثر پیمایش را همانطور که در زیر نشان داده شده مشاهده کنید. 
    div%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class=
    مقالات مرتبط
  13.  

    به نظر می رسید سخت و شاید حتی غیر ممکن است باشد. آیا می توانم این کار را انجام دهم؟ اما چقدر سخت است؟ من   قبلا اینها را تجربه کرده ام ...

     

     

     

    4.jpg

     

     

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

     

     

    چرا ما شروع به طراحی وب سایت ها در فتوشاپ کردیم؟

     

     

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

     

     

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

     

     

    هنگامی که من شروع به کار کردم و طراح وب شدم، همه چیزی که داشتیم Notepad بود تا با آن کار کنیم. ما اصول اولیه HTML و 

    طراحی

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

     

     

     

     

     

     وب سایت ها شروع به تکامل کردند. بیشتر و بیشتر، ما شروع به استفاده از گرافیک برای بهبود وب سایت و زیبایی آن شدیم. سرعت پهنای باند بالا باعث می شود که این مهم امکان پذیر باشد.  PHP، ASP، SQL، CMS، SEO، JavaScript و انیمیشن های فلش همه بخشی از طراحی وب است که امروز می دانیم. برای طراح وب  زیاد است که تمام دانش لازم برای ساخت یک وب سایت را از ابتدا داشته باشد. بنابراین ما نقش را اینگونه تقسیم کردیم:

     

     

    5.jpg

     

     

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

    وب سایت طراحی پاسخگو 

     

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

     

     

     

     

     

     

    6.jpg

     

     

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

     

     

     

    لازم نیست کامل باشد اولین وبسایت که من ساختم، شامل متن، پیوندها و تصاویر (عمدتا انیمیشن های متحرک) در پس زمینه تاریک بود.

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

     

     

    7.jpg

     

    Wireframing

     

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

     

    نسخه اولیه

     

    گام بعدی، که از دیدگاه UX مهم است، ایجاد یک نمونه اولیه است. و از آنجایی که تصمیم گرفتم برای اولین بار به تلفن همراه بروم، یک نمونه اولیه برای آیفون ساختم. من از wireframes با کیفیت بالا استفاده کردم که در فتوشاپ ساخته شده و آنها را به  Marvel یک ابزار عالی است که به شما امکان می دهد تا به سرعت نمونه های اولیه را از تصاویر یا فایل های PSD ایجاد کنید.)

     

     

    8.jpg

     

     

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

     

     

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

    Coding

     

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

     

     

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

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

     

     CMS یکپارچه سازی

     

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

     

     

     

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

     

    مهارت های کد نویسی را بهبود بخشم

     

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

     

    9.gif 

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

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

     

    ایجاد تغییر در کد و  وب سایت در مرورگر می تواند کند و آزار دهنده باشد. برخی از ابزارهایی که می توانند بهینه سازی روند را برای شما داشته باشند. من از Brackets   استفاده کردم زیرا هر بار که یک تغییر در کد ایجاد می شود، وبسایت را به طور خودکار بازخوانی می کند.

     

     

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

     

     

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


  14. روش شگفت انگیز که می توانید با طراحی وب مدرن امروز   کمک کند یک اثر بازتاب تصویر   است.

     


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

     

     
     یک ابزار جاوا اسکریپت جدید به نام Reflection.js برای  جی کوئری  و MooTools  موجود است. باعث می شود ایجاد انعکاسی برای سایت شما بسیار ساده تر و سریعتر باشد.

     


    خوب شروع کنید. 

     

    نسخه CSS3


    برای HTML ما، ما به سادگی یک تصویر اضافه می کنیم و آن را بر روی یک عنصر HTML5 قرار می دهیم. 
    
     
    rocket

     


    برای CSS ما قصد داریم به موارد زیر عمل کنیم: 

    1. با استفاده از مقدار خودکار، حاشیه 60px را در بالای صفحه قرار دهید و آن را روی صفحه قرار دهید. 


    2. بعد، از منوی -webkit-box-reflect CSS برای نشان دادن تصویر به پایین استفاده کنید. 
    3. سپس تصویر را با استفاده از -webkit-gradient ماسک می کنیم تا تصویر را در پایین پایین بیاوریم و فقط یک قسمت یا کمتر از تصویر را نمایش می دهیم.

     


    با استفاده از کدهای بالا، شما یک تصویر بازتابی شبیه تصویر زیر دارید. 

     


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

    بر اساس یک مطالعه انجام شده توسط Adobe در سال 2015، کاربرانی که 15 دقیقه برای خواندن یک محتوا یا اشتراک اطلاعات یک وبسایت وقت می گذارند، دو سوم از آنها با وبسایتی زیبا برخورد کرده اند.  به طور مشابه، 59٪ کاربرانی که تصمیم به شرکت در یک وبسایت می کنند زیبایی وب سایت را دوست دارند. این و آمار بیشتر اهمیت دادن زمان و توجه به طراحی وب سایت شما را برجسته می کند. در این مقاله، ما  12 راه ساده است که می تواند به شما در ایجاد وب سایت جذاب تر کمک کند معرفی می کنیم. 

    با یک صفحه به زودی با شمارش معکوس به کنجکاوی کاربران اضافه کنید


    0.jpg

     

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


    1.jpg
     
     

    صفحه ورود به سایت سفارشی


    2.jpg
     
     

    سعی کنید از منو مختلف استفاده کنید


    3.jpg


     

    در تصاویر یا عکس های محصول، جلوه های ویژه بکار ببرید


    4.jpg
     

    نمایش فونت ها و اطلاعات بصورت شناور و مدرن


    5.jpg
      

    تماشاچیان را با انیمیشن تسخیر کنید


    6.gif

     

    یک جدول قیمت گذاری منحصر به فرد طراحی کنید


    7.jpg
     

     


     

  16. ۹ قانون طراحی رابط کاربری که در سال ۲۰۱9 هر طراح سایت باید آن ها را بداند و به کار ببرد. با ما همراه باشید تا با قواعد و اصول اولیهطراحی رابط کاربری سایت و اپلیکیشن UI/UX آشنا شوید.

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

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

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

    نه قانون طراحی رابط کاربری در سال ۲۰۱9

    ۱. طراحی رابط کاربری جدا از UX نمی باشد و باید دارای ارتباط باشند

    ارتباط بین طراحی رابط کاربری و طراحی تجربه کاربری

     

    understand-ui.jpg

     

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

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

    ۲. کاربران سایت خود را بشناسید

    فیدبک مناسب از کاربران خود دریافت کنید

     

    consider-feedback-message.jpg

     

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

     

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

     

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

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

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

    ۳. المان ها را ساده و باثبات نگه دارید

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

    ۴. اجرای سلسله مراتب بصری

    در اجرای کار همیشه اولویت بندی کنید و وقت را صرف کاری کنید که می دانید بیشترین تاثیر را در روند انجام و پیاده سازی کار دارد.

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

    این نکته را بدانید که امکان جابجایی یا تغییر موارد مهم محدود است و همچنین باید از نظر گرافیکی طرح کل سایت همخوانی داشته باشد.

    ۵. از تایپوگرافی مناسب استفاده کنید

    از تایپوگرافی مناسب استفاده کنید گاهی استفاده از فونت های مناسب با سایز بهینه و وزن های متفاوت تاثیر بسیار زیادی در بهینه سازی رابط کاربری و بهترین تجربه کاربر دارد.

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

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

    ۶. از تضاد رنگی مناسبی استفاده کنید

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

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

    ۷. فرم ها را ساده کنید

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

     

    simplify-your-forms-in-webdesign.jpg

     

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

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

    ۸. برای موفقیت در طراحی رابط کاربری(UI)، همکاری کنید

    اشتراک تجربیات و ایده های تیم تاثیر به سزایی در موفقیت یک پروژه دارد.

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

    ۹. همه موارد را باهم در نظر بگیرید

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

  17.  

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

     

     

    برای برنامه اپل  سه بخش وجود دارد: WatchKit App ، صفحه Glance و اعلانها . هر یک از اهداف مختلف چالش های طراحی خود را دارند.

     

    WatchKit App

     

    4.jpg

     

     

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

     

     

    مهم است که درک کنید که دو نوع ناوبری برای برنامه WatchKit وجود دارد  سلسله مراتبی و مبتنی بر صفحه . در حالیکه ناوبری سفارشی می تواند برای برنامه های iOS برنامه ریزی شود، اما در Apps WatchKit محدودیت بسیار است و از  سفارشی سازی پشتیبانی نمی کند.

     

     

    5.jpg

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

     

     

     

    6.jpg

     

     

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

     

     

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

    Glance

     

    7.jpg

     

     

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

     

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

     

     

     

    8.jpg

     

     

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

     

    Notifications

     

    9.jpg

     

     

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

     

     

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

     

     

    10.jpg

     

     

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

     

     

    11.jpg

     

     

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

     

     

     

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

    تاج دیجیتال

     

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

    Force Touch

     

    13.jpg

     

     

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

     

     

     

     

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

     

     

     

    14.jpg

     

     

    ساعت اپل در دو اندازه - 38mm و 42mm می آید. صفحه نمایش کوچکتر 340 در 272 پیکسل و بزرگتر 390 در   312 است. برای بزرگ تر دیدن شما می توانید تصاویر را با رزولوشن دو برابر ببینید.

     

     

     

    15.jpg

     

     

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

     

     

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

     

     

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

     

     

     

    16.jpg

     

     

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

     

     

     

    17.gif

     

     

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

     

     

    هنگام ایجاد انیمیشن در ساعت اپل، نمیتوانید GIF خود را به توسعه دهنده خود بفرستید و به او بگویم که به صورت پویا آن را ایجاد کنید. شما نیاز به ارائه تصاویر جداگانه استاتیک از هر فریم برای ایجاد انیمیشن های کنترلی هستید که سریع تر و صاف تر ظاهر می شوند. بهترین راه این کار است که فایل انیمیشن خود را در After Effects یا فتوشاپ وارد کنید و فریم های جداگانه را استخراج کنید.

     

     

    18.jpg

     

     

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

     

     

    19.jpg

     

     

    در مورد آیکون های منوی زمینه، شما باید دو اندازه تصویر را برای هر آیکون ارائه دهید. وزن خط به طور کلی باید بیشتر از 1 پیکسل در قالب 42  میلی متری باشد تا نسخه 38 میلی متری.

     

     

    20.jpg

     

     

     

     فونت سیستمی سیستم پیش فرض به صورت خودکار متن خواهد بود. با افزایش اندازه فونت، ردیابی فونت کاهش می یابد. اگر تصميم بگيريد اندازه فونت را مشخص کنيد فونت متن سانفرانسيسکو براي متني که 19 نقطه يا کوچکتر است توصيه مي شود و فونت ويندوز سانفرانسيسکو بايد براي متن که 20 نقطه يا بزرگتر باشد استفاده شود.

     

    21.jpg

     

     

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

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

     

     

     

    22.jpg

     

     

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

     

     

    شما می توانید این قالب آیکون ساعت اپل دستی را دانلود کنید. برای تولید آیکون

     

     

     

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

     

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

     

     

     

     


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

    Example #1 – Siren

     

     


    interaction-mobile-design-01.gif
     
     
     

    Example #2 – B&O Play

     
     

    interaction-mobile-design-02.gif
     
     

    Example #3 – Bthere


    interaction-mobile-design-03.gif
     

    Example #4 – Housing


    interaction-mobile-design-04.gif
     

    Example #5 – Neighborhood


    interaction-mobile-design-05.gif
  19.  

    3.jpg

     

     

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

     

     

     

    قهرمان تمام صفحه (Hero. Full-screen)

     

     

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

     

     

    4.jpg

     

     

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

     

     

    5.jpg

     

     

     

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

     

     

    6.jpg

     

     

     

    در اینجا پنج راه برای استفاده از یک تصویر HD به بهترین شیوه مطرح شده است:

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

    ۲- چندین عکس را در نظر بگیرید - از چارچوب اسلایدی یا سبک کارتی استفاده کنید.

    ۳- استفاده از یک افکت بر روی تصویر - ماسک های رنگی می تواند تأکید بر یک تصویر را اضافه یا تغییر دهد ( برای مثال یک  ماسک قرمز  انرژی بیشتری دارد،).

    ۴- در نظر بگیرید که تصویر بر روی اندازه های مختلف صفحه نمایش چگونه نمایش داده می شود.

    ۵- فراتر از فریم فکر کنید - عکس پس زمینه نیازی با نسبت تصویر 1 تا 1.5 استاندارد دوربین ها مطابقت داشته باشد.

     

     

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

    Videos

     

    پس زمینه های ویدئویی HD  یکی از محبوب ترین تکنیک های سال می باشد -  از غول هایی مانند AirBnB  تا سایتهای کوچکتر  ، جریان ویدئو سریعا در حال تبدیل شدن به یک بخش حیاتی از چشم انداز طراحی وب شده است.

     

     

    7.jpg

     

     

    برخی از اولین وب سایت هایی که از ویدیو پس زمینه استفاده می کردند، واقعا سایت رسمی یک فیلم بودند. به عنوان مثال، سایت "Life of Pi" از یک پیش نمایش واقعی از فیلم به عنوان پس زمینه (در فرمت های قابل دانلود) استفاده می کرد.

     

     

    8.jpg

     

     

     

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

     

     

    9.jpg

     

     

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

     

     

    مجددا، پنج دستورالعمل برای استفاده از ویدیو HD در چارچوب طراحی شما ارائه می دهیم:

     

    ۱- توجه به طول ویدیو و مدت زمان - ویدئو پس زمینه باید یک داستان بصری داشته باشد که بتواند احساس را    در عرض چند ثانیه به کاربران انتقال دهد.  بین 10 تا 30 ثانیه یک اندازه خوب برای زمان حلقه است.
    ۲- صدا  را خاموش کنید - صدا برای عده زیادی از کاربران هنوز یک عنصر پخش اتوماتیک نامطلوب است. اگر قصد استفاده از صدا دارید، به طور پیش فرض به حالت خاموش تنظیم شده باشد.
    ۳- تمرکز بر زمان بارگذاری - در حالی که ویدئو HD سرگرم کننده است،اما نباید وب سایت خود را فدای زمان بارگذاری آن کنید. مهم نیست که چقدر ویدئو شما شگفت انگیز است   زمان بارگیری آهسته=  ترک سایت توسط کاربر
    ۴- جایگزین ها را در نظر بگیرید - بعضی دستگاه ها نمی توانند HD را پشتیانی کنند.  یک تصویر پس زمینه به عنوان یک گزینه پشتیبان داشته باشید.
    ۵- کیفیت ویدیو چندگانه باشد - چند نسخه از ویدیوی برای اجرا داشته باشید که با توجه به چهارچوب کاربر اجرا گردد.

     

     

    انیمیشن

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

     

     

    10.jpg

     

     

     

    کلید انیمیشن HD موفق زمان بندی است. انیمیشن ها باید صاف و بدون پرش باشند.  ابتدا و انتهای حلقه تکرار باید صاف و نامحسوس باشد.

     

     

     

    11.jpg

     

     

     

     

     

  20.  

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

    توجه: شما باید از لینک ها برای هر نمونه از این پست دیدن کنید تا بتوانید درک کنید که چگونه این سایت ها کار می کنند و چه احساس تعاملی  ایجاد می کنند.

     

     

    3.jpg

     

     

     

    4.jpg

     

     

     

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

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

     

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

    عناصر رایج

     

    5.jpg

     

     

     

    6.jpg

     

     

     

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

     

     

    ۱- تایپوگرافی پررنگ:  علامت بزرگ با انتخاب متن های جالب یک عامل رایج است.
    ۲- طراحی تک صفحه ای: برای به حداکثر رساندن تاثیر این تکنیک، این وب سایت ها اغلب در یک صفحه طراحی می شوند.
    ۳- رنگ روشن: رنگ الهام گرفته از طراحی مسطح و طرحی متریال یک عامل رایج است. رنگ روشن و جسورانه رایج هستند.
    ۴- تغییر انواع محتوا: محتوا در صفحه اغلب با اسکرول تغییر می کند، به طوری که کاربر ابتدا یک ابر متن، سپس یک «صفحه» متن، سپس تصاویر بیشتر و سپس یک فرم تماس دریافت می کند.
    ۵- داستان مداوم: در حالی که محتوا ممکن است در طول طراحی تغییر کند، یک داستان واحد عنصری است که همه آنها را با هم مرتبط می کند.
    ۶- تصاویر بزرگ: طراحان از  تصاویر استفاده می کنند، تصاویر - به ویژه در صفحه اصلی - بسیار تاثیر گذار هستند. اکثر این وب سایت ها با یک  ابر تصویر و یک نشانه برای حرکت آغاز می شود
    ۷- زبان ساده: از آنجا که چارچوب پشت این پس زمینه متحرک پیچیده است، همه چیز در اطراف آن تمایل به سادگی دارد، از جمله زبان سایت. این کنتراست پیچیدگی و سادگی  سایت را آسان می کند تا کاربر به اندازه کافی آن را درک کند و به اندازه کافی جالب باشد تا به ادامه تعامل تشویق شود.

     

    طراحی نوع جنبش

     

    7.jpg

     

     

     

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

     

     

     ترفند: تنها در یک زمان خاص، باید یک چیز حرکت کند. به نظر می رسد بسیار ساده است، درست؟

     

     

     

    8.jpg

     

     

     

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

     

    چرا کار می کند

     

    9.jpg

     

     

    10.jpg

     

     

     

    چرا اختلاف منظر با پیچیدگی آغاز می شود؟

     

     

     

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

    به همین دلیل است که ما احتمالا وب سایت های بیشتری را با استفاده از اختلاف منظر  و زمینه های متحرک در آینده می بینیم. روندهای بی نظیر و تکنیک هایی که شما می توانید برای پروژ های مختلف استفاده کنید.

     

     

  21.  

    تاثیر و نقش هاست در طراحی سایت را میدانید؟

     

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

    ارتباط DNS و هاست در طراحی سایت 

     

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

    مفهوم دیتا سنتر در طراحی سایت

     

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

    ارتباط محتوا و ترافیک در طراحی سایت بخش دوم 

     

    ایجاد لینک داخلی در طراحی سایت

     

    لینک های داخلی در طراحی سایت همواره یکی از مواردی بوده که موتورهای جستجو و به طور خاص گوگل نظر مثبتی بر روی آنها دارند. لینک های داخلی که به اینترنال لینک شهرت دارند در بهینه سازی سایت و سئو سایت نیز از مؤلفه های اصلی محسوب شده و تأثیر خوبی بر رنکینگ سایت دارند. در ادامه مقاله قبلی که در بخش آموزش طراحی سایت قرار دادیم و اشاره کردیم که چگونه باید صفحه اصلی و هدف خود را بسازید، حال نیاز است که اقدام به ایجاد لینک های داخلی در محتوای سایت خود کنید. بر ای ایجاد لینک های داخلی باید از صفحات ایندکس شده سایت که موتورهای جستجو آنها را به کلمات کلیدی خاصی شناسایی کرده اند و آن کلمات اکنون در محتوای شما وجود دارد استفاده کنید. برای شناخت صفحات ایندکس شده مهم طراحی سایت شما می توانید از جستجوی گوگل کمک بگیرید. به این صورت که عبارت (site: sitecup.ir) را سرچ کنید. اما نکته ای که اهمیت دارد این است که صرفاً از لینک های فوتر استفاده نکنید و از لینک های داخل محتوا که ارزش بسیار بیشتری دارند کمک بگیرید. در میان لینک های داخلی شما بهتر است در تمامی صفحات به صفحه اصلی سایت نیز لینک ارسال شود.

    محتوای صفحات اصلی در طراحی سایت 

     

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

  22.  

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

     

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

    امروزه با توجه به ارتقاء مرورگرهای وب و افزایش دستگاه های هوشمند ، طراحی سایت با تغییرات بسیاری رو به رو شده است.

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

    طراحی سایت های دو بعدی :

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

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

    طراحی سایت رسپانسیو :

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

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

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

    ارائه دهنده خدمات طراحی اپلیکیشن موبایل و کلاسهای آموزش طراحی سایت و طراحی سایتهای خرید هاست و تور تایلند را نیز انجام میدهد

  23.  

    طراحی سایت همایش ها و کنفرانس ها

     

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

    تحریر و تنظیم شده در واحد توسعه شرکت طراحی سایت کاپ

    ارائه دهنده خدمات طراحی اپلیکیشن موبایل و کلاسهای آموزش طراحی سایت و طراحی سایتهای هاست لینوکس و تور تایلند را نیز انجام میدهد

  24. راه های انتخاب یک هاستینگ خوب را بدانید

     

     

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

     

    در مورد شرکت های ارائه دهنده هاستینگ تحقیق کنید:

     

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

     

    1.       سرور ارائه دهنده شما از کدام کشور است؟

    2.       نام دیتا سنتر خود را بگویید؟

    3.       از چه محدودیت هایی روی سرورها استفاده می کنید؟

    4.       آیا هاستینگ تان وارز است؟

     

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

    از هاستینگ نا محدود استفاده نکنید:

     

    سرویس های نا محدود فضای هاست را خریداری نکنید. البته پهنای باند نامحدود ارائه می شود و مشکلی ندارد ولی دیتا سنتر هایی که پهنای باند نامحدود ارائه می دهند با عنوان unmetered فعالیت میکنند که توانایی ارائه پهنای باند نا محدود را دارند.

    سرویس های یک ساله نخرید:

     

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

    محل دیتا سنتر مهم است:

     

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

     

  25.  

    طراحی سایت استارت آپ ها چیست

     

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

    تحریر و تنظیم شده در واحد توسعه شرکت طراحی سایت کاپ

    ارائه دهنده خدمات طراحی اپلیکیشن موبایل و کلاسهای آموزش طراحی سایت و طراحی سایتهای هاست لینوکس و تور تایلند را نیز انجام میدهد

     

×
×
  • اضافه کردن...