منتديات نورة الحربي



العودة   منتديات نورة الحربي > مواضيع منقولة من مواقع اخرى2

The Typography and Layout behind the new Signal vs. **ise redesign

إضافة رد
أدوات الموضوع انواع عرض الموضوع
قديم 10-20-2012, 02:32 AM
المشاركات: n/a
افتراضي The Typography and Layout behind the new Signal vs. **ise redesign

We’ve been sharing our process and company values on Signal vs. **ise since 1999. It’s where we’ve planted the seeds for Getting Real and REWORK. And for many readers, it’s their first taste of 37signals. Yet, we haven’t given the look and feel any serious attention since 2005.

Typography Layout behind Signal **ise So I decided to tackle a much-needed redesign. In planning the overhaul, I wanted to focus on creating a beautiful, clear, focused reading experience.

Designing Outward

“Blog” has such a temporary, read-and-forget tone to it. On SvN, we take our time writing and editing every article. So rather than treating this like a “blog,” I shifted the mindset to that of a tenured publication. So, the entire redesign process started with typesetting the post, and designing outward.

Instead of poring over other blogs, I spent a week studying books, magazines, and of course, Bringhurst. Capturing the right feel for body text was step one—it sets the tone from here on out.

Perhaps it’s me, but there’s something about 13px sans-serif faces on the web that feels like “my Rails app just spit this out of a database.” I want you to read articles, **t text rendered on a screen. Kepler, set at a comfortable size, wound up being a beautiful serif that added the touch of humanity I was looking for. Setting the headlines in Acta added to the look I was going for, and Freight Sans wound up being a great sans-serif pairing.

I’d like you to actually read this

More often than **t, company blogs are littered with pitches for their product. I don’t want to throw new job opportunities at you right away. I don’t want to ask you to subscribe to our RSS feed when you haven’t even read anything yet. These rules informed the layout: content first, everything else second.

Typography Layout behind Signal **iseCrude Sharpie sketches I often hear that mobile experiences tend to feel more focused than the desktop counterpart. I agree, mostly. But there’s a stark similarity that mobile devices share with physical books that desktop browsers don’t: a consistent canvas size.

Designers, especially those transitioning from print to web, yearn for that controlled page size. We’re lucky to have it on phones, but the varying sizes of desktop browsers throw us in a loop. Despite that, I was bullish on keeping the width of the desktop text at a comfortable 65-70 characters per line ** matter how long your browser becomes. I was steadfast in keeping the content on top—**t hugged by filters, settings, search bars and ads. More space in your window doesn’t mean you have to fill it.

Responsive as I go

Signal vs. **ise is a Rails app. I got my hands dirty digging through every view, restructuring the markup as I went along. (And **ah fixed all the things I broke. Thanks **ah!) During the design of each page, I styled mobile views at the same time as the desktop. Writing custom Sass @mixins for responsive views sped this process up immensely.

section.comments { border-top: 2px solid #CCC; border-bottom: 2px solid #CCC; margin: 1.5em auto 0; padding: 1em 0; width: 100%; @include respond-to(768) { width: 660px; h2 { font-size: 1.35em; } } } Like JZ mentioned, while the multiple @media query instances aren’t ideal, it’s a better trade off with clarity in code.

Designing in the open

There’s plenty more I’ll share, including the concepts behind the waveforms, the language, the new writers page, and our new post editor. This may be just a blog, but it’s our blog. Our ideas. They matter to us, and we want you to feel like they matter to you. We’ll continue to make this—and the rest of our public facing sites—better. And we’ll continue to design in the open.

Typography Layout behind Signal **ise Typography Layout behind Signal **ise
Typography Layout behind Signal **ise


The Typography and Layout behind the new Signal vs> **ise redesign

رد مع اقتباس
إضافة رد

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

Bookmark and Share


الساعة الآن 03:53 PM

converter url html by fahad


أقسام المنتدى

الشريعة و الحياة | المنتدى العام | مـنـتـدى الـعـرب الـمـسافـرون | أزياء - فساتين - عبايات - ملابس نسائية - موضة | مكياج - ميك اب - عطورات - تسريحات شعر - العناية بالبشرة | װ.. أطآيبُ ״ شّهية ]●ะ | اعشاب طبية - الطب البديل - تغذية - رجيم - العناية بالجسم | ديكور - اثاث - غرف نوم - اكسسوارات منزلية | صور - غرائب - كاريكاتير | {.. YouTube..} | منتدى الاسئله والاستفسارات والطلبات | مواضيع منقولة من مواقع اخرى | اخبار التقنية | مواضيع منقولة من مواقع اخرى2 | منتدى تغذيات | منتدى تغذيات الكلي | قِصصْ الأنْبِيَاء | قِسمْ الرَّسُول الكَرِيمْ والصَّحَابة الكِرامْ | القِسمْ الإِسْلاَمِي العَامْ | قِسمْ المَواضِيْع العَامَّة | قِسمْ الشِعرْ والشُعَرَاء | قِسمْ الخَوَاطِر المَنقُولَة | قِسمْ الصُوَرْ | قِسمْ القِصصْ والرِوَايَات | قِسمْ حَوَّاءْ | قِسمْ الطِب والصِحَّة | قِسمْ الصَوتِيَّات والمَرئيَّات الإسْلاميَّة | قِسمْ مَطبَخ صَمْت الوَدَاعْ | قِسمْ الدِيكورْ | قِسمْ كٌرَة القََدَمْ العَرَبِيَّة والعَالمِيَّة | قِسمْ المكْياجْ والإكْسسْوارَات | قِسمْ المَاسِنجرْ | قِسمْ الِسِياحَة والسَفرْ | قِسمْ أَفْلاَمْ الكَرتُونْ | قِسمْ الفِيدْيو المُتَنَوعْ | منتديات الرياضة | اخبار | مواضيع منقولة من مواقع اخرى3 | موقع اجنبي | كوكو فرنسا | كوكو هندية | كوكو روسي | كوكو دنمارك | كوكو ياباني | اخر اخبار العولمة | عالم الحياة الزوجية | عرض أحدث عمليات البحث الشائعة |

Powered by vBulletin® Version 3.8.8 Beta 1
Copyright ©2000 - 2019, KingFromEgypt Ltd Elassal
Adsense Management by Losha