آفریننده‌های کدنویس

ساره موسوی

برای من که هیچ سر رشته‌ای در برنامه‌نویسی و طراحی وب ندارم، همیشه تصوری که از برنامه نویسی و برنامه نویس‌ها وجود داشت، حالت‌های فضایی و وهمناکی بود که توی فیلمهایی مثل Hackers, Swordfish, Matrix و ... می‌دیدیم! انگشت‌هایی که مثل برق و باد روی دکمه‌‌های کیبورد حرکت می‌کنند و کدهای سبز رنگی که تند و تند و تند، توی یک صفحه‌ی سیاه رنگ بالا می‌روند. نمودارها و اشکال عجیب و غریبی که با صداهایی فضایی و آدم آهنی‌طور روی همان صفحه ظاهر می‌شوند و ناگهان اتفاقی را رقم می‌زنند که دنیا را از این رو به آن رو می‌کند!

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

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

این شما و این کمپین 360 درجه!

ساره موسوی

نوبتی هم که باشد، نوبت کمپین 360 درجه است؛ پس با ما در این قسمت داستان پروژه‌ها همراه شوید.

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

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

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

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

در پایان باید بگوییم که خستگی ناپذیری و موازی کار کردن تمام اعضای تیم با یکدیگر، مخصوصا گروه Front-end باعث شد که ما بتوانیم کار را حتی زودتر از زمان تعیین شده تحویل داده و بازخوردهای خوبی هم از دوستان صباویژنی‌مان دریافت کنیم. 

بعد از این همه توضیح، دیگر وقت، وقت دیدن خود سایت است. به قول معروف: "شنیدن کی بود مانند دیدن!" پس پیشنهاد می‌کنیم که حتما از وب‌سایت کمپین 360 درجه، البته در لپ‌تاپ دیدن کنید.

منتظر نظرات شما هستیم.

یک سالگی‌ات مبارک نیما عمرانی

ساره موسوی

امروز، نیما عمرانی یک ساله شد، البته در استودیو گروسیان!

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

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

garousian-blog-omrani-birthday.jpg (61 KB)

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

روزهای جلسه‌ای

ساره موسوی

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

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

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

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

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

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

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

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

طراحی کمپین تبلیغاتی صباویژن، به مناسبت ماه رمضان

ساره موسوی

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


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


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


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


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


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

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

ساره موسوی

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

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

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

داستان بازطراحی گرافیک وب سایت sib.ir

ساره موسوی

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

استودیو گروسیان، بازطراحی و پیاده سازی Front-end  این وب سایت را بر عهده داشت. 

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

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

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

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

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

سال از نو، کار از نو

ساره موسوی

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

سال نو مبارک

استودیو گروسیان

آیکون‌های طبیعت دوست

ساره موسوی

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

اگر علاقه مند هستید، می‌توانید ست آیکون‌های درخت را به صورت وکتور، دانلود نمایید. 

طراحی وب‌سایت پارس نیکو

ساره موسوی

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