Introduction to Responsive Web Design

Buzz or Something Much More

Responsive design seemed like so many other buzz terms when it came on to the scene. But those who have been indoctrinated into the vastly changing mobile devise design and development world have seen this revolutionary invention as a ticket to freedom.

So with this said I figured I’d put together a little synopsis of what we see after a couple years in the making. A little about the resources available, the major players and how to get started responsively for your business, design firm or development team.

Responsive Web Design

Coined by Ethan Marcotte in a A List Apart in May of 2010 as RWD or Responsive Web Design rapidly became excepted as a new standard of web. Responsive design was recognized by .net magazine as the #2 Top Web Design Trends of 2012 stating “It’ll be like the standards movement all over again.”

responsive layouts

The Major Players

Who do you know that’s actually using responsive web design? Is this just something all those big framed glass wearing start-ups are using? NO would be the strong answer.

Let’s see! Last I knew from an article I read from the man himself, Ethan Marcotte, stating ginormous companies such as Microsoft, General Electric, Disney and Starbucks (who even published there style guide for all to see).

So smart companies with great business minds are seeing the effectiveness and longevity of these new standards why wouldn’t we want a piece of the action. Is it out of our reach? (See strong answer above). As we even saw with Starbucks tools are being freely handed out for us to use it’s only a matter of knowing where to go to get them and what to do with them once we find them.

Open Re-Sources

Now in 2013 we have seen the progression of two major contributors in the field of responsive design resources. These contributors in the responsive world are none other than Twitter with Bootstrap, which is well into it’s second version, and the new kid on the block, but definitely a contender, Foundation by Zurb with it’s fourth edition just released.
twitter

 

zurb

Both Bootstrap and Foundation are built on a 12 column grid system which acts as a wireframe holding all the dividers and elements in place. Changing the position in Foundation per device is as simple as using small and large classes in CSS. Bootstrap has a built in standard of the class span with a number 1-12 following which defines the columns used per element with a default of full width for smaller devises.

There are plenty of similarities and differences in using the two open source structures for your responsive site and both have provided incredibly detailed and easily understood documentation. I will be getting into both in more detail in the following posts.

Other Words to Know

Next I will be getting into the terms Adaptive and Fluid. Understanding these terms will be crucial in understanding why responsive really works. Coming Soon…

 

Alina Wheeler Raleigh Design Event – AIGA

On April 25, 2013 we had the chance to meet Alina Wheeler, author of the book Design Brand Identity.  This book is a comprehensive and invaluable guide to the process of designing and maintaining a brand, and it’s principles has guided innumerable brands around the world.

AIGA Raleigh invited Alina Wheeler to speak at the Burns Auditorium on the NCSU campus.  As an active member of AIGA Raleigh I volunteered to create the Facebook FanPage for the event.  As a result of the team efforts the event was sold out and it was a success.

Alina stated that ‘technology is so proactive that people are investing in big data over big ideas, everyone is branding themselves to gain an advantage in the marketplace. These are fiercely smart people who do not understand the powerful asset of design’.

Facebook Fan Page:  https://www.facebook.com/pages/AIGA-Raleigh-presents-Alina-Wheeler/106759176186326

More about the event:

Recap | Alina Wheeler: Designing Brand Identity – http://raleigh.aiga.org/recap-alina-wheeler-designing-brand-identity/

To get more interesting articles about the industry insights follow me on Facebook at https://www.facebook.com/SaraEloiseMartinez

Chalk Lettering Card Design Inpired by Dana Tanamachi

All Design Starts with Inspiration

This time it’s from Dana Tanamachi

I find fascinating the chalk typography technique. I am a big fan of Dana Tanamachi and her chalk style. So I created a tutorial for you to be able to make a chalk typography card!

1. Get the Canvas Ready.

Get a chalk font like “Chalk-hand-lettering-shadded”. Also a chalk background in istockphoto.com.

With Illustrator, get your brush as chalk scribble, 0.5 its or depending how thick you want your lines and draw a frame and a banner.

Open your chalk background in Photoshop. Set your canvas as 7×5 inches and 300 dpi. Drag your frame and banner from Illustrator to your canvas in Photoshop. It will import as a Vector.

2. Layout the Font

In Photoshop, after you typed your title you will use the tool “Wrap Text” for each word. Wrap your text with Flag, Fisheye and Arch styles. You want to make your letters work together.

3. Elements and Decor

In Illustrator, using your scribble brush, draw decorations that will go around your font, also you can draw a bottom banner as you see in the picture below. I also drew a dotted line for the year 2012. Drag the decorations to your canvas in Photoshop.

4. Shadding

Duplicate your frame layer and fill it with a off white color. I used # f6f2e7

You can wrap more wording at the bottom that will match your bottom banner. I used “Charlemange STD” and “Seaweed Script”.

5. Framing your text

Duplicate the largest frame layer. Select the smallest frame layer. Go back to your duplicated layer and crop the inside. It will create a border. Right click on your layer and click on Blending Options. Add a Pattern Overlay with the Artistic Surfaces Pattern. Opacity at 76.

6. Final Details

Ok we’re getting close to the end! We are going to add a striped border with Illustratoer, using the chalckscribble brush.

Dotted frame using the chalk scribble brush, set it up as

Gaussian blur the text

7. Add Photo

To make this a personalized card, pick your favorite family, couple, baby, or a christmas photo you like, add this photo to the right side of the canvas. Place it next to the beautiful art you just created and send it to print!!

If you liked this tutorial and would like to see more join my mailing list, I will be sending you a FREE Guide on “How to Blog” and many other tips!

Also follow me on Facebook at https://www.facebook.com/SaraEloiseMartinez

This card will be available at GreetingCardUniverse.com/EloiseStationary where you can select your photo and print it at any Target Store in the USA for a really great price!

Proyecto Perspectivas Application Design

Proyecto Perspectivas Publication Becomes an App for iPad

Revista Perspectivas is a publication dedicated to document and recognize outstanding design and works of architecture in the Central American region.

Published every three months, this publication, developed by Proyecto Perspectivas (PP) a Guatemalan based company, aimes to record selected projects in arquitectural, urban, industrial, interior, textile and jewelry design as well as landscaping.

Issue # 15 is the first edition to go digital. Pixelscut helped PP make that happen. In collaboration we created the Icon, Landing Page with a strategic QR Code announced in their magazine and developed the Perspectivas application with custom design for iPad. The APP is an interactive version of the magazine which contains music, images, voice overs, video and social media integration. This APP will be available May 17th of 2012 to download for FREE in the APPStore with the other editions to come soon.

perspectivas de arquitectura y diseño

PP hosted a party at Plaza El Globo with over 400 guests launching the new edition of the magazine and their new application.

Design and Branding De Barcelona

De Barcelona Shapes-up to Fit Into a New Branding

Pixelscut just launched the Summer Website for Boutique “De Barcelona”, a spanish clothing boutique for women based in Guatemala City with more than 16 years of service.

The goal was to give a fresh look to the store. The strategy: I designed a new logo trying to accomplish a reminder of Barcelona’s culture. Pixelscut also created new tags for their clothes, with a satin matte material, giving them a more sophisticated and elegant feel. The Website: A modern one page website utilizing the store’s new collection photos in a clean background with drastic fonts. The website was coded in HTML5 with crossbrowser and multiple device viewbility. You can check it out DeBarcelona Boutique We complemented the website with an email blast sent the day that the new collection was placed in their stores. Social Media: Pixeslcut integrated their facebook fanpage throughout different platforms of the campaign.

We have plans on increasing the social media in their strategy. We’ll keep you posted for more!