تدوین استراتژی محتوا و طراحی UI مجلۀ ادبی نون

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

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

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

تدوین استراتژی محتوا و طراحی UI مجلۀ ادبی نون
تدوین استراتژی محتوا و طراحی UI مجلۀ ادبی نون

جذابیت در نگاه نخست

سهم تصویر در محتوا و جذابیت بصری

بر اساسِ خواستۀ سفارش‌دهنده، محتوای تصویرمحور نقشِ مهمی در این وب‌سایت داشت. بنابراین طراحی بخشِ ابتدایی صفحۀ اول این وب‌سایت را بر اساسِ «سهم تصویر در محتوا» و «جذابیت بصری» طراحی کردیم.

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

جذابیت در نگاه نخست

حق انتخاب مخاطب

اولویت‌بندی محتوا، طراحی بخش‌ها و چیدمان

مجلۀ نون گسترۀ متنوعی از مطالب دارد. حجم تولید محتوا در این وب‌سایت چیزی شبیه به یک وبسایت خبری است. برای بهتر دیده شدنِ مطالب لازم بود دو کار اساسی انجام دهیم: اولویت‌بندی محتوا، طراحی بخش‌ها و چیدمان.

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

سطح بعدی محتوا

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

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

اسلایدر

طراحی بر اساس نیاز

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

دسته‌بندی‌های دقیق یکی دیگر از انتظارات سفارش‌دهنده بود. بر اساس این نیاز، بایگانی تفکیک‌شدۀ منعطفی طراحی کردیم تا هر کاربر در هر زمان بتواند هر محتوایی را پیدا کند.

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

تنوع قالب محتوا و حفظ استایل کلی

واکنش چشم، طول محتوا، لحن محتوا و قالب محتوا را در نظر گرفتیم

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

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

نون: تجربۀ هم‌افزایی استراتژی محتوا و طراحی

دقت در جزییات، تفاوت کارهای خوب و متوسط

تأمین امکانات فنی و طراحی گرافیکی یک وب‌سایت مسئلۀ اول نیست. «ما» پیش از هر چیز مخاطبِ هدف و مقصودِ محتوایی سفارش‌دهنده را بررسی می‌کنیم تا کُتی به اندازۀ تنش بدوزیم. 
در طراحی مجلۀ ادبی نون قبل از طراحی هر بخش، به دنبال استراتژی درست گشتیم، انتظارات سفارش‌دهنده را در نظر گرفتیم و تلاش کردیم واکنش مخاطبِ هدفِ او را پیش‌بینی کنیم. تحلیلِ محتوا و بازخورد محتوا پایه‌های اصلی طراحی مجلۀ ادبی نون است.

تفاوتِ کارهای خوب و متوسط از همین «دقت در جزئیات» است.

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

ساده، زیبا و منحصربه‌فرد

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

طراحی واکنشگرا یا Responsive
پروژه قبلی

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

فروشگاه اینترنتی لوازم خانه و آشپزخانه

طراحی فروشگاه اینترنتی کاسه کوزه
پروژه بعدی

بازطراحی سایت مبل رز

تولیدکننده انواع مبلمان و مصنوعات چوبی

بازطراحی سایت مبل رز

تماس با ما

از ۱۰ الی ۱۶ روزهای شنبه تا چهارشنبه پاسخگوی شما هستیم

آدرس:
خیابان قائم مقام، کوچه دهم، پلاک ۱۱، واحد ۱۱
به ما در شبکه‌های اجتماعی نزدیک‌تر باشید

فرم سفارش پروژه

از ۱۰ الی ۱۶ روزهای شنبه تا چهارشنبه پاسخگوی شما هستیم

طراحی UI/UX وب و موبایل

طراحی UI/UX وب و موبایل

برندسازی دیجیتال

برندسازی دیجیتال

کمپین تبلیغات دیجیتال

کمپین تبلیغات دیجیتال

توسعه Front-end و CMS

توسعه Front-end و CMS

لطفا خودتان را معرفی کنید:

کمی در مورد پروژه برای‌مان بگویید:

چقدر بودجه برای پروژه در نظر گرفته‌اید؟

تا ۵۰ میلیون تومان

از ۵۰ تا ۱۰۰ میلیون تومان

بیشتر از ۱۰۰ میلیون تومان

چقدر زمان در اختیار داریم؟

کمتر از یک ماه

بین یک تا سه ماه

بیشتر از سه ماه