BlogmyQuery – BMQ

We live in a global world that has an overflow of information. The Internet has given us access to very different cultures and allowed us to share much more information than ever before. But do different regions have their own specific Web design trends?

Design usually has to do with creating a product or service that targets a specific, local audience. However, thanks to the Internet, some design characteristics that are specific to local regions have become global, while other characteristics remain regional. Moreover, the laws of usability, at least for the Web, are universal, or at least based on common principles. This makes the process of learning about and designing for the Web quite similar throughout the world.

In this article, we’ll showcase a bit of what we’ve been doing here in South America, identifying trends within the region, if any exist.

Web Design In South America

Brazil is the biggest country in South America. It’s known for Carnival, soccer and beautiful beaches. So it’s unfortunate that a country that produces such creative and happy people also has so many barriers to becoming a great Web designer (the main ones being a lack of design culture, slow Internet connections and almost no good courses or schools). The ones who succeed in the profession have a remarkable skill at solving problems in innovative ways, as Vitor Lourenco points out in our interview below.

The profession of Web Designer is very new here in Brazil and still a bit unknown to some people and business professionals. Some very interesting progress has been made with regard to regulation of the industry, most notably the establishment of regional associations and the recent creation of the ABRADI, the Brazilian Association of Digital Agencies, which focuses on education and public awareness about what makes for good and bad Web design and development.

Even though professionals are getting more organized and agencies are taking shape, there’s still a lack of good schools, books and events about Web design and about design in general.

All of these problems force us to look for references, books and information from other parts of the world. But because Brazil is very big and the only Portuguese-speaking country in South America, we face a big language barrier. This scarcity of information forces designers to rely more on their creativity and intelligence, which in turn opens them up to points of views that are different than what is shown in books, magazines and on the Internet. Again, as Vitor Lourenco points out, the ones who succeed have a remarkable skill at solving problems in innovative ways.

Another big problem that designers face here is the lack of understanding among entrepreneurs of the importance of having a well-designed and well-developed website. A lot of kids working from home offer Web design services for prices much lower than what should be the industry standard, thus creating serious problems when it comes to businesses allocating budgets for Web design projects.

You could say we operate in a somewhat hostile environment, then. But incredibly, the market is very promising, and some really talented designers and studios are doing incredible work, from totally Flash-based websites to big portals of information. And the industry will only evolve from here, and we look forward to that.

Stats

• 128,652,435 Internet users as of December 2008. 33.0% penetration rate;
• 3.3% penetration, according to Internet World Stats;
• A resolution of 1024×768 and fixed layout are most common;
• CSS vs. Flash: it used to be very Flash-focused, but we notice that SEO concerns have changed the game in favor of CSS/XHTML-compatible websites.

Web Design Trends

In order to see whether specific Web design trends exist in South America, nothing could be better than showcasing a ton of websites! One noticeable trend that does seem to be emerging is a shift towards simplicity and SEO. So, take a look at some popular websites from our region in the showcase below.

News Websites

Social Websites

Associations and Conferences

Design Studios

Type Foundries

Popular Designers and Their Porfolios

Blogs and Learning Websites

Web Apps and Online Services

Flash Websites

Online Stores

Podcasts

• Webinsider
• BraincastTV
• Hora do Mac
• FalaFreela
• Nerdcast
• Podcast da Info
• Eupodo.com.br
• PodBrasil
• Argentina Podcasts
• Chile Podcasts
• Podcasts from Peru
• Jumpcast
• Interactivia – Colombia

Video

As you can see, identifying very specific Web design trends in South America is difficult. You could say the same about the rest of the world. Design will always be focused on delivering the best solution to a targeted audience, regardless of trends or technologies. One thing is pretty clear, though: Web design is moving towards simplicity, and if we could put our finger on a Web design trend, that would be it.

Because of this, we conducted a short interview with the designer behind Twitter, the Brazilian Vitor Lourenco, one of the proponents of the law of simplicity within the Brazilian Web design community and now within Twitter.

Interview With Vitor Lourenco

Vitor Lourenco is a 21-year-old user interface designer. Despite his young age, Vitor has already reached millions of people worldwide with his designs. He has worked on Twitter (the free social-messaging utility that is changing the way people communicate), Yahoo! (one of the most visited websites in the world) and Globo (the largest media company in Latin America).

Question: Do you think that Brazil has its own specific Web design style and trends?

Vitor: I don’t think there’s such thing as “Brazilian” design. The Brazilian culture isn’t attached to a single influence. It’s all about mixture and diversity. Moreover, design isn’t about style or visual references. It’s about solving problems and finding what works best, in terms of aesthetics and functionality, for what you’re trying to build. Even if we did consider areas related more to visuals or art direction, it would still be hard to define what’s Brazilian. However, I can assert that there’s a lot of creativity around here. Because of all the constraints against someone becoming a great Web designer in Brazil (lack of design culture, slow Internet connections, almost no good courses or schools), the ones who succeed have a remarkable skill at solving problems in innovative ways.

Question: Twitter is the latest Web sensation, and you were the designer behind its interface. Could you tell us a bit about your experience in working for Twitter. What were your goals?

Vitor: I consulted for Twitter for about six months last year. I was the only designer involved in its latest major interface overhaul, which got rave reviews from users and the press. We simplified the UI by removing a lot of noise and unnecessary elements. Most of my ideas for that redesign were based on John Maeda’s law of simplicity: shrink; hide non-essential functions; and embody quality to compensate for what’s been lost. I also did a lot of work with the interface/visual design and front-end implementation, creating a range of different prototypes until we achieved the most compelling version, which then went through a lot of iteration and user testing.

After consulting for Twitter, I spent six months at Yahoo!, where I was the User Experience Lead behind a cool new product they’re launching soon. And now I’m back at Twitter, joining as a full-time employee on Monday, April 13th, to work with our amazing Creative Director, Douglas Bowman, on a mission to take Twitter’s UI to a whole new level.

Question: Could you share with us some Brazilian designers who you admire?

Vitor:

• Work for Food
• Gui Borchert
• Felipe Memoria
• Guilherme Neumann
• Thadeu Morgado

Contributors

This article wouldn’t have been possible without the help of the following designers from South America who contributed links and valuable information. I’d like to thank you:

• Paulo Antunes
• Vitor Lourenco
• Cristhian Serur
• Nicolas Gonik
• Cleuza Eleutério
• Ariel Fuggini
• Kitty Florido
• Gabriel
• Adrian Quevedo
• Ohmar Tacla

About the author

Fabio Sasso is a graphic and web designer from Porto Alegre, Brazil. Also he runs a design blog Abduzeedo where he shares tutorials and inspiration articles. You can follow Fabio on twitter @abduzeedo.

(al)(rb)

A visitor comes to your website all giddy to learn more about your product, when suddenly a snazzy slideshow loads with some snap. Impressed, they go to register and are greeted by a most elegant modal window. At this point they are finally overjoyed by the velociraptor that suddenly charges across their screen. They don’t know why but they like it.

Crafting a polished and unique experience for your users is becoming ever more critical as the Web gets more overloaded. Standing out is hard. To the rescue come frameworks such as jQuery, which offer a modular, highly customizable experience for your visitors.

Today, we are thrilled to introduce two new jQuery plug-ins that were developed exclusively for Smashing Magazine readers to liven up your developer tool belts: Orbit, a new slider; Reveal, a modal plug-in; and Raptorize, an effect plug-in that will literally bring your page to life.

Why Create Our Own?

Quickly, before diving into the details, some background would be helpful. There are hundreds of jQuery image and content sliders and probably thousands of modal plug-ins. So, why create our own? We wrote these for a number of reasons, the most important ones being:

• Flexibility
  We use these plug-ins for clients, internal projects, our apps and a number of other places. We can easily tweak and re-use the code for specific and special implementations.
• Experience
  There is no better way to learn how to create better plug-ins and code than to do it yourself and release it publicly. Orbit has undergone a number of iterations and rewrites, which we learned from. Reveal has undergone only a few. We got Raptorize right the first time and haven’t had to update it.
• Better interactions and development
  Perhaps the biggest driver was that, across our team, we used a number of plug-ins that have different quirks and features, but none of them nailed the features and interactions that we wanted. Developing plug-ins allowed us to work from a uniform codebase, iterate and optimize our work.

Have a look at a couple of our previous articles:

• Spicing Up Your Website with jQuery Goodness
  Demonstrates several creative techniques for increasing usability with jQuery.
• Stronger, Better, Faster Design with CSS3
  Introduces some powerful uses of the upcoming CSS3 standard.

Orbit: jQuery Image Slider

First up is our new jQuery slider, Orbit. At a mere 4 KB, Orbit can handle images, linked images and straight-up content blocks. Setting it up takes just a few minutes, and it has some styles out of the box. We started working on Orbit because of all the many jQuery image sliders, none seemed straightforward to implement or had nice default styles. After several iterations and releases, the addition and removal of a number of features and some serious learning, we had a plug-in that perfectly fit our needs.

Let’s dive into the code, shall we?

The Code

To get started, you’ll need jQuery and the Orbit plug-in (make sure jQuery is attached first).

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>

Now we can quickly hook up the CSS that we need:

<link rel="stylesheet" href="css/orbit.css">

Finally, let’s dig into the mark-up.

<div id="featured">
   <img src="overflow.jpg" alt="Overflow: Hidden No More" />
   <img src="captions.jpg"  alt="HTML Captions" />
   <img src="features.jpg" alt="and more features" />
</div>

Just a couple of notes before moving on:

1. Orbit will dynamically determine the height and width of your set of images and scale accordingly, but make sure that all of your images are the same size or else the larger ones will peek out at the sides.
2. You’ll notice that the id of the parent div is featured, but it doesn’t have to be. When you call the Orbit plug-in, you can set your own selector, and then the magical orbit class will be applied.

All we need to do now is activate the Orbit plug-in.

<script type="text/javascript">
   $(window).load(function() {
      $('#featured').orbit();
   });
</script>

There you have it: Orbit, implemented and ready to be used with all of the default settings. To see more options, clean up the slider and do more advanced customization, please continue reading.

Neato Options

Of course, you’ll want some other features like HTML captions, bullet navigation (with thumbnails), and using content instead of images. Here’s the low-down on how to get these going.

Here are all of the plug-in parameters and their default states. The options are commented out to the right. Go nuts!

$('#featured').orbit({
  animation: 'fade',               // fade, horizontal-slide, vertical-slide, horizontal-push
  animationSpeed: 800,             // how fast animations are
  timer: true,                     // true or false to have the timer
  advanceSpeed: 4000,              // if timer is enabled, time between transitions
  pauseOnHover: false,             // if you hover pauses the slider
  startClockOnMouseOut: false,     // if clock should start on MouseOut
  startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
  directionalNav: true,            // manual advancing directional navs
  captions: true,                  // do you want captions?
  captionAnimation: 'fade',        // fade, slideOpen, none
  captionAnimationSpeed: 800,      // if so how quickly should they animate in
  bullets: false,                  // true or false to activate the bullet navigation
  bulletThumbs: false,             // thumbnails for the bullets
  bulletThumbLocation: '',         // location from this file where thumbs will be
  afterSlideChange: function(){}   // empty function
});

Full HTML Captions

Orbit has full HTML captions, so you can add styles, links, lists or whatever else your coding heart desires.

1. Add a span with the class orbit-caption and an ID of your choosing after the slider div. Put whatever HTML you’d like to appear in the caption inside. They’re block level, so anything goes.
2. Add the span ID you chose to the data-caption attribute of the corresponding image tag.

Check it out:

<div id="featured">
   <img src="overflow.jpg" alt="Overflow: Hidden No More" />
   <img src="captions.jpg"  alt="HTML Captions" data-caption="#htmlCaption" />
   <img src="features.jpg" alt="and more features" />
</div>
<!-- Captions for Orbit -->
<span class="orbit-caption" id="htmlCaption">I'm a badass caption</span>

Want to animate those captions? Just change the captionAnimation parameter (fade, slideOpen, none).

Bullet Navigation

Getting a new bullet navigation is as easy as passing a parameter when you call the Orbit function. The bullet navigation is natively an unordered list, but in the example and in the kit we’ve replaced them with nice little round bullets. (Changing this is a just a matter of changing the CSS to whatever you’d like.)

<script type="text/javascript">
   $(window).load(function() {
      $('#featured').orbit({
         bullets: true
      });
   });
</script>

Orbit can now pull thumbnails for your bullet navigation! First, create your thumbnail and save it somewhere in your file directory. Below is the HTML, CSS and JavaScript to make it work:

<!-- THE MARKUP -->

<div id="featured">
   <img src="overflow.jpg" alt="Overflow: Hidden No More" />
   <img src="captions.jpg"  alt="HTML Captions" data-thumb="captions-thumb.jpg"/>
   <img src="features.jpg" alt="and more features" />
</div>

// The JS
<script type="text/javascript">
$(window).load(function() {
   $('#featured').orbit({
      'bullets' : true,
      'bulletThumbs': true,
      'bulletThumbLocation': 'orbit/'
   });
});
</script>

/* The CSS: Just provide a width and height for the thumb.
All bullet navigation thumbs will have a class added "has-thumb"
*/

.orbit-bullets li.has-thumb {
   width: 100px;
   height: 75px; }

Using Text

Orbit is text-compatible, too. It can be mixed with images, but just make sure your text is in a div tag and has a background of some type (otherwise the images behind it will be visible). To make the text look nice, give it a background (so that other images in Orbit don’t bleed behind it). Just drop it right into the mark-up, this way:

<div id="featured">
   <div class="content" style="">
      <h1>Orbit does content now.</h1>
      <h3>Highlight me: I'm text.</h3>
   </div>
   <img src="overflow.jpg" alt="Overflow: Hidden No More" />
   <img src="captions.jpg"  alt="HTML Captions" />
   <img src="features.jpg" alt="and more features" />
</div>

Using only text? Orbit relies on image sizes to get its dimensions. However, you can just go into the Orbit CSS and find the .orbit div declaration and set it to the exact pixel width and height you want.

Making Orbit Shine

Orbit looks fairly reasonable out of the box (so to speak), but getting a real polish requires a couple more bits of work: in particular, getting a load before images pop in, and adding fixes for some less fortunate browsers (i.e. IE).

Glorious, Seamless Loading State

For those in pursuit of the ultimate polish, we’ve made it easy to create a simple loading state for your slider. Add the following declaration anywhere in the CSS (just replace featured with your slider’s ID, and use your own images’ widths and heights):

   #featured {
      width: 940px;
      height: 450px;
      background: #000 url('orbit/loading.gif') no-repeat center center; overflow: hidden; }
   #featured img,
   #featured div { display: none; }

Apply the CSS to your unique slider ID, because the plug-in won’t know the ID until after it loads. Adding this CSS will prevent any unstyled content from flashing before the plug-in finishes loading. These styles are in the demo CSS in the kit.

Non-Relative Positioning

The way Orbit works is that your container gets wrapped by another container. This means that if you are positioning your slider absolute or want to center it with margin: 0 auto, applying these to your slider’s ID (#featured in this example) won’t work. The best way to solve this is to put all positioning pieces on your ID and div.orbit-wrapper.

#featured, div.orbit-wrapper {
   position: absolute;
   top: 50px;
   left: 50px;
}

Note: You could also just position the parent container of the Orbit slider if there is one.

As we all know, IE is not a designer or developer’s best friend, but we’ll try to make it easy on you. As of version 1.1, Orbit works in IE7+, but because CSS3 transforms and RGBa aren’t available, we have to perform some magic to fix the timer and caption default background. The easiest way to fix these issues is to hide the timer and to use Microsoft’s proprietary alpha solution. You can use the following conditional declaration in the header of your document.

<!--[if IE]>
   <style type="text/css">
      .timer { display: none !important; }
      div.caption { background:transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
      zoom: 1; }
   </style>
<![endif]-->

Reveal: jQuery Modals Made Easy

You can create beautiful modal windows on your page with our jQuery Reveal plug-in. Modal windows allow developers to make critical information stand out. Setting up Reveal modals takes only three easy steps. Attach the needed files, drop in the modal mark-up, then add an attribute to your button.

We created Reveal because we couldn’t find a simple solid solution. We often used and reused our own scripts to create modals because existing plug-ins were too heavy (they allowed for Flash integration and a hundred other things), and they didn’t use basic CSS to create flexible, reusable code. We think we’ve solved both of these issues with Reveal.

Reveal is useful because it’s easy to implement, compatible with modern browsers (with some graceful degradation, of course) and lightweight (coming in at only 1.75 KB). What this means for you is that it’s fast, sexy and just works.

Let’s see how you can get Reveal working!

Step 1: Attach the Required Files

/* Attach the Reveal CSS */
<link rel="stylesheet" href="reveal.css">

/* jQuery needs to be attached */
<script src="jquery.min.js" type="text/javascript"></script>

/* Then just attach the Reveal plug-in */
<script src="jquery.reveal.js" type="text/javascript"></script>

Clearly, you need the Reveal kit (.zip) to do this, so please download it first.

Step 2: The Modal Mark-Up

<div id="myModal" class="reveal-modal">
   <h1>Modal Title</h1>
   <p>Any content could go in here.</p>
   <a class="close-reveal-modal">&#215;</a>
</div>

Just give your modal div the class reveal-modal and a unique ID (we’ll use the ID to launch this modal). The anchor with the class close-reveal-modal provides a button to close the modal (although by default, clicking the faded black background will also close the modal). Placing the mark-up just before the closing body tag is usually best.

Step 3: Attach Your Handler

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

By putting the data-reveal-id attribute on the anchor, the plug-in, when clicked, matches the value of the data-reveal-id attribute (in this case, myModal) with an HTML element with that ID. Basically, put the data-reveal-id attribute on an object, and make its value the ID of your modal.

While the data-reveal-id is a great way to make firing a modal easy, it will often need to be fired programatically. That’s easy enough, too:

/* Programmatic Launching Of Reveal */

<script type="text/javascript">
$(document).ready(function() {
   $('#myButton').click(function(e) {
      e.preventDefault();
      $('#myModal').reveal();
   });
});
</script>

Options

Good plug-ins have options, and this one has just a few, but important ones:

$('#myModal').reveal({
   animation: 'fadeAndPop',                 // fade, fadeAndPop, none
   animationspeed: 300,                     // how fast animations are
   closeonbackgroundclick: true,            // if you click background will modal close?
   dismissmodalclass: 'close-reveal-modal'  // the class of a button or element that will close an open modal
});

If you are wondering how to use the options when you’re using the data-reveal-id implementation, it’s easy: just take the option and add the data- before it, and pass a valid value. Here it is with the default values:

<a href="#" data-reveal-id="myModal"
data-animation="fadeAndPop" data-animationspeed="300"
data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal"
>Click for a modal</a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"></script>')</script>
<script src="jquery.raptorize.1.0.js"></script>
<script type="text/javascript">
   $(window).load(function() {
      $('.myButton').raptorize();
   });
</script>

//The options for this plug-in
<script type="text/javascript">
   $(window).load(function() {
      $('.button').raptorize({
         'enterOn' : 'click', //timer, konami-code, click
         'delayTime' : 5000 //time before raptor attacks on timer mode
   });
});
</script>

© ZURB for Smashing Magazine, 2011.

Today we will will go through creation process of a Medieval Knight Shield in Adobe Illustrator. We will try to create nice, shiny Shield that can be used as the website icon or a company  logo. Creation process is quite simple. All we have to do is to use simple shape as ellipse, to distort it a little bit and to combine it with other shapes. Beside that we will get the chance to play with nice metal gradients, trying to create an impression of the light reflection on the shiny metal.

In the end, our shield should look something like this:

Now let’s get down to work!

Combining Elements in Order to Create the Shape of the Shield

Set the new illustrator document in 500 x 500 pixels in size.

Grab the Ellipse Tool (L) from the Tool Panel and create the ellipse.

To distort the ellipse grab the Direct Selection Tool (A) from the Tool Panel and click on the lower anchor point. Hit the down arrow key on the keyboard to nudge the anchor points downwards for the few pixels.

Select the Convert Anchor Point Tool ( Shift + C ) from the Tool Panel and click on the nudged anchor point. It will make a sharp corner.

Use the Add Anchor Point Tool (+) to add the anchor point as it shown on the picture below.

With the Direct Selection Tool (A) remove few anchor points. Set the Fill color to none and for the Stroke color chose any color you like.

Under the Object select Transform > Reflect. Set the Axis to Vertical and hit the Copy button. This way we will reflect the path we have just created.

Holding the Shift key on the keyboard move the reflected path to the right. With the Direct Selection Tool (A) select lower endpoints and under the right click hit Join.

Grab the Pen Tool ( P ) from the Tool Panel and close the path.

Grab the Ellipse Tool (L) from the Tool Panel and create the ellipse. Place it as it shown on the picture below.

Select both objects and under the Pathfinder Panel hit the Minus Front button.

We have to do the same thing to the right side. But instead to trying to do exact the same thing and to create symmetrical shield we will simple divide our object to half, remove the right side and reflect the left side.

Grab the Line Tool (/) from the Tool Panel and create the vertical line (hold the Shit key on the keyboard for straight dragging). Select both objects and align them under the Align Panel by hitting Horizontal Align Center. After that hit a Divide button under the Pathfinder Panel. It will divide the Shield exactly to half. Remove the right side of the Shield.

Under Object select Transform > Reflect. Set the Axis to Vertical and hit the Copy button. Move the reflected part to the right until the middle parts meet. Under the Pathfinder Panel hit the Unite button. It will create the final shape of our Shield.

Applying Gradients

Select the Shield and under the Object select Path > Offset Path. Set the value for Offset to -10. It will create the scaled copy of the Shield.

Let’s apply a nice metal linear gradient to our Shield. Under the Swatch Panel open the Swatch Library. You can find amazing source of the metal gradients. Chose one of them and apply it to our Shield. In case you don’t like them feel free to adjust some of those gradients or to create your own metal linear gradient.

Select the red shape and under the Object select Path > Offset Path. Set the value for Offset to 2.

Apply linear gradient to the new shape as well. It will represent the inner part of the metal frame,

and the red radial gradient for the color of the Shield.

Select the Ellipse Tool (L) from the Tool Panel and create a small circle for the screw.

Scale it down and place it on the metal Part of the Shield. Duplicate the circle ( Ctrl / Cmd + C, Ctrl / Cmd + F ), set the Fill color to #58595B, nudge it downwards for 1 pixel and send it backward ( Ctrl / Cmd + [ ). It will be a tiny shadows from the screw. Group the circles.

Duplicate ( Ctrl / Cmd + C, Ctrl / Cmd + F ) the screw six more times in order to create enough of them for the entire Shield.

Creating Details

Roughly speaking, our Shield is done. At this point we have to try our best to improve the illustration as much as possible. First, we will create the reflection for the metal part of the Shield.

Select the largest part of the Shield and under Object select Path > Offset Path. Set the value for Offset to -1.

Select the Ellipse Tool (L) from the Tool Panel and create a big ellipse. Place it as it shown on the picture below. Select the blue ellipse and the scaled shape of the Shield we’ve made in previous step and under the Pathfinder Panel hit the Intersect button.

You should end up with something like this.

Select the inner part of the Shield, as it show on the picture below, and under the Object select Path > Offset Path. Set the value for Offset to 1.

Select the shape we have just created and the blue shape and under the Pathfinder Panel hit the Exclude button.

Ungroup ( Shift / Ctrl + Cmd + G ) the new shape and remove the lower part. Apply the same gradient we have used for the larger part of the Shield. You should end up with something like this.

Now we will change the gradient a little bit. Make sure to set the lower part of the reflection to light gray color. It will create a nice illusion of light reflection.

Let’s do create a similar reflection for the red part of the Shield.

Grab the Ellipse Tool (L) from the Tool Panel, create the ellipse and place it as it shown on the picture below.

Duplicate the red part of the Shield ( Ctrl / Cmd + C, Ctrl / Cmd + F ) and holding the Shift key on the keyboard select the gray ellipse as well. Under the Pathfinder Panel hit the Intersect button.

Set the Fill color of the new shape to white (#FFFFFF) and lower the Opacity to 5%.

Duplicate ( Ctrl / Cmd + C, Ctrl / Cmd + F ) twice the red shape. Scale them up and rotate both of them. Select them and under the Pathfinder Panel hit the Minus Front button. Set the Fill color of the new shape to white (#FFFFFF). You should end up with something like this.

Create one more copy ( Ctrl / Cmd + C, Ctrl / Cmd + F ) of the red part of the Shield. Select it together with the white shape we’ve created in previous step and under the Pathfinder Panel hit the Intersect button.

Lower the Opacity of the new shape to 15%. Under the Object select Transform > Reflect. Set the Axis to Vertical and hit the Copy button. Move the reflected shape to the left and place it as it shown on the picture below.

There are many different shapes of the Medieval Shield you can create. Just feel free to be creative. Try out some other colors as well.

The Conclusion

There are many ways to create a nice shiny Medieval Shields. The great thing about creation process is that you can use different shapes and forms and to combine them in order to create nice Shields. Using the same technique try to create a Medieval Shield in perspective. Applying reflections, highlights and shadows will lead to professional look of the illustration. I hope you like this tutorial. If you have any questions or comments please post them in the comments section below. Thank you for following along!

(rb)

Back in April, Facebook rolled out the Send button, a function that provided a simple and direct way for users to privately share content through the platform. Though it has not garnered as much attention as the Like button, this feature can be viewed a huge success considering that the social network says it has already been installed on more than 100,000 sites. Nearly two months later, Facebook has followed up the Send button with a new feature called Send Dialog. In this article, we will discuss the feature in more detail and explain how a marketer can take advantage of the Send Dialog to engage their audience.

continue reading How Can a Marketer Take Advantage of Facebook’s New Send Dialog?

© FletcherT for Tutorial Blog | 6 comments | Add to del.icio.us

How Can a Marketer Take Advantage of Facebook’s New Send Dialog? is a post from: Tutorial Blog

Staying on top of the most recent developments in your craft takes time, especially when you have to scan websites daily for articles and news worthy of your attention. Quality newsletters do the job for you. Just check your email inbox every couple of days to find a condensed and readily accessible selection of tidbits from a given website. We have selected here newsletters that deserve your attention.

A quality newsletter is not overloaded with articles, but rather features valuable insight and information, in addition to what the given website has featured during the week. Readability, relevance and lightness are the most important qualities of a newsletter. The following examples not only make for an enjoyable read, but feature developments, insights and scoops worth following.

Art, Culture, Business, Design

Brain Pickings
Brain Pickings is a discovery engine for interestingness, “culling and curating cross-disciplinary curiosity quenchers and separating the signal from the noise to bring you things you didn’t know you were interested in until you are.� This is how the founder of the website, Maria Popova, describes her project. The newsletter comes out on Sundays and offers the week’s best articles. It comes in a nice layout with diverse content in numerous genres of music, video and books, ranging from documentary to children’s books to philosophy. Enjoy the artwork, too!

TED
TED stands for technology, entertainment, design and has been spreading ideas since 1984. It believes in the power of ideas to change attitudes, lives and, ultimately, the world. Be a part of it and receive some inspiring ideas every week via email. Five interesting talks are featured each week that will not disappoint, and you can join the conversation on the topics. You might also want to follow TED’s RSS feed.

Daily Good Morning
These guys try to make every day you have a blast. Daily Good Morning puts quality motivational advice in your inbox every day of the week. Good news just give everyone something to be happy about, puts a smile on your face or gives you new hope. If you think you could use some of that every morning and are willing to invest a couple of minutes of your time then this should become part of your “Daily Good Morning” routine.

Newfangled
A very inspirational newsletter on the various topics of Web design, development, business, culture and design. The newsletter is sent out monthly, every month with a focus on one specific area of design.

Springwise
Springwise scans the globe for the most promising business ventures, ideas and concepts that are ready for regional or international adaptation, expansion, partnering, investment and cooperation. It promises to inspire you instantly by getting the world’s most promising new business ideas and young ventures right in front of you. Choose between the daily newsletter, which features three exciting business ideas, or the weekly one, which rounds up the best of the week’s finds. If you need business inspiration, this is the place to find it.

Usability, UX Design

Userfocus
The Userfocus usability newsletter archive dates back to 2007, making its authors true professionals in the information mailing game. While the early editions featured individual articles, content is continually being added. The feature article section started out with basic titles such as “The A to Z of Usability,� well researched and suitable for newbies to the trade. The newsletter introduces the audience to interesting usability-related articles that got the consultant’s attention over the past month, covering persuasive design, examples and intriguing psychological research and insights.

Typography

H&FJ Typography
If you are constantly on the lookout for interesting new fonts and typographic novelties, then you might have heard of Hoefler & Frere-Jones. These guys are a big deal, and you can subscribe to their mailing list to stay posted on their latest news and suggestions. The classy styles and weights that are featured do catch the eye, and the layout of the newsletter itself is worth a glance.

FontShop
Now, here’s a newsletter to look forward to! FontShop knows what’s going on in the world of type design and is keen to let you in on it. Each newsletter showcases new fonts from foundries around the world and introduces handy little tools to advance Web font use and compatibility. Additionally, each week it highlights events and conferences all about typography that you should not miss. The newsletter is sent out every second week, so don’t worry about getting flooded with news. The archive dates back to 2004, which is definitely a sign of constant engagement and motivation!

Web Development, Coding, Programming

Hackernewsletter
Kale Davis is doing a great job on this one. The weekly HackerNewsletter brings you the best articles on startups, technology, programming and a lot more. All topics are cutting edge straight from the Hacker News site. Even if you pay them a visit daily, you will probably stillmiss out on some stuff you might really have needed.

JavaScript Weekly
Everyone should have some JavaScript in their lives. And that is exactly what JavaScript Weekly is about: a free weekly email roundup of JavaScript news and articles. The topics vary and include job postings, notices and messages from the team. Regular columns are “Headlines,� “Articles� and “Code and Libraries.� The “Special� section rounds up articles about that week’s focus topic. Each featured article is well summarized with basic facts, and none of the abstracts exceeds five to six sentences. The clear structure makes it easy to identify interesting articles.

wpMail.me
A concise, free weekly roundup of WordPress news and articles. Cristian Antohe groups articles clearly: “News & Articles� sums up new developments and releases; “Themes,� as you might expect, introduces new themes and hosts the occasional contest; “Plugins� is all about life support; while “Tutorials� provides helpful hints on speeding up your workflow. How does that sound for a weekly dose of WordPress?

Yoast
This newsletter contains all of the WordPress-related posts and useful tips and resources curated by Joost de Valk. You can choose whether to receive it daily or weekly. Check out some of the subscribers’ reviews and comments about the newsletter; it really earns some praise. Yoast keeps you in the loop on cool new WordPress plug-ins, provides loads of tips and tricks on speed, layout and SEO, and suggests ways to promote conversation on your blog.

DjangoWeek.ly
Django Weekly keeps anyone interested in the loop on the Python−based Django Framework. News and articles are on bug fixes, testing in Django, introducing Django (say, for media companies), etc. The code section serves small apps and frameworks. The author, Jon Atkinson, welcomes any constructive criticism and encourage anyone interested to share feedback, news and great code found on the Web.

developerWorks
The guys over at IBM over-engineer just about everything. Once you’ve signed up for their newsletter, you are asked to choose your topics of interest from a number of categories, such as AIX and UNIX, cloud computing, Java technology, Linux, XML and WebSphere. If you choose to receive all updates, be prepared to get a list of at least 30 articles. The layout is well organized and structured, with numerous links to resources and further reading. You’ll find study reports, tutorials, trial downloads, news, free eBooks and more. Is your interest aroused yet?

Ruby Weekly
Don’t be disappointed if Ruby is your thing. JavaScript Weekly has a sister newsletter for Ruby! It features headlines, articles, tutorials, screencasts, libraries, code and job postings. Like JavaScript Weekly, Ruby Weekly wins readers over with its clear, brief summaries. You won’t waste a minute (or miss an article) going through the weekly list of topics. Many subscribers attest to how Ruby Weekly saves them hours of research every month. Don’t scour through dozens of blogs and podcasts to stay up to date; just subscribe to Ruby Weekly.

Devops Weekly
Get your weekly slice of devops news delivered straight to your mailbox. This relatively young newsletter features tools and events that any developer might want to check out. Gareth Rushgrove keeps Devops alive and fresh with content. As devops-related topics around the Web flourish, the newsletter’s coverage keeps growing by the week. If this sounds appealing to you, go pay Devops Weekly a visit and sign up!

Web Design

Webdev
A true classic, the Webdev newsletter has been around since 2002, presenting weekly updates from Web Design Reference. The categories include accessibility, CSS, color, evaluation and testing, events, miscellaneous, navigation, PHP and more. Feature articles are constantly contributed by professionals and cover a variety of formats: opinion, tutorials, technical advice, compatibility testing. The newsletter’s format is simple and efficient. There are no images, only introductory sentences to the most recent articles and discussions, followed by links to the hosting website. The format is intimate and fosters a personal connection with the reader. Editor Laura Carlson’s commitment to the newsletter is widely appreciated.

MailChimp
These guys know what they’re talking about. If you are not using MailChimp yet to slap your newsletters together, definitely check it out. It helps you design email newsletters, share them on social networks, integrate them with services that you already use and track your results. And guess what? MailChimp has its own newsletter! To stay on top of the newest developments and hear interesting discussion and learn about resources from the MailChimp community, take out a subscription now.

Think Vitamin
Think Vitamin hit the Web in 2006 with the aim of being a valuable resource for Web professionals. You name it: Think Vitamin has covered it. Authors from around the globe have contributed to the newsletter. Just give the archive a quick browse to see how vital this asset could be to your intake of inspiration. And check out Think Vitamin Radio, the bi-weekly radio show that covers hot topics on the Web.

.net mag
.net magazine provides a rather short weekly email newsletter with tips to interesting recent articles on Web design as well as a weekly review of articles published in the magazine (online). An unobtrusive and helpful newsletter that doesn’t require too much time to read or scan and still provides pointers to great tips and resources.

Web Design Weekly
Web Design Weekly has just begun its life in the newsletter business. It launched on July 1st of this year, and Jake Bresnehan is doing a good job on selecting headlines and articles! The content will vary over time and include Photoshop tips, podcast links, CSS3 and jQuery tips, but mainly front-end Web development. Its aim is to keep everyone posted on recent developments in this fast-paced industry. Be one of the first to support the newsletter and skim its tools, jobs and regular inspiration section. It’ll do you good!

SitePoint
SitePoint offers various newsletters, each for a different craft. SitePoint Tribune is weekly and informs you about building, managing and marketing websites. SitePoint Tech Times is also weekly and covers all technical aspects of Web development, including the latest PHP techniques, advanced HTML, JavaScript, ASP and more. SitePoint Design View is a monthly newsletter covering subjects ranging from usability to page layout to graphic software techniques to accessibility issues to the biggest challenges confronting Web designers today.

Inspiration

New Thinking
You might need this newsletter by management consultant Gerry McGovern if you want to improve your website’s stats, especially your conversion rate. McGovern has been providing weekly task-management tips to over 16,000 subscribers since 1996. The articles are well written and focus on key advice that everyone should consider to improve productivity. Readers can extend their knowledge by following the related links or by joining the discussion about the article. “5% of your website delivers 25% of its value. Do you know which 5%?� To get a little closer to the answer, subscribe to the newsletter.

Now I Know
Do you have the feeling that you’ve stopped learning. Dan Lewis can help. Now I Know is a free daily newsletter of incredible things. You’ll learn something new every day. Ever wondered why hippos don’t get sunburned even though they spend most of their day in the water? Do you know which animal freezes itself to survive the winter? Did you hear the story about how Wonton Food, Inc. cost the US national lottery about $20 million dollars? No? Then consider subscribing to Now I Now. You might want to check the Art of Manliness newsletter as well as the ZenHabits email newsletter.

Email Inspiration*
The concept is simple: Email Inspiration sends you one email per day, every day. No big sales pitches or product launches. Just one image to inspire your designs and get your creative juices flowing. Look at the archive to decide whether signing up is worth it. There is undoubtedly some interesting art among the submissions featured in Email Inspiration*. Who would not be thankful for another undiscovered free source of inspiration?

Unmatchedstyle
Give yourself “a quick dose of inspiration� once a month. Unmatchedstyle carefully selects creative examples, shares favorites of the month in everything ranging from typefaces to websites, and hooks you up with an extensive and useful collection of links. You’ll see free icon sets, cool font-pairing apps, interviews and more. You’ll soon notice yourself awaiting the newsletter every month, and you won’t be disappointed.

eCommerce and Marketing

Mobile Commerce Daily
If you find yourself constantly designing for mobile devices and need to stay updated, this is the newsletter for you. Mobile Commerce Daily keeps you posted on the latest trends and gives you a peek at what’s behind the incredible sales increases of certain websites. The newsletter contains six to eight articles from industries around the Web. This newsletter might be the ultimate source of news and ideas on online marketing strategies and on new apps, advertising and analytics. The articles include resources such as case studies, event calendars, podcasts, videos and more, guaranteeing an engaging read.

Social-IT-e Media
Social-IT-e Newsletter educates readers on websites, Web design and Web management best practices. Social-IT-e’s core expertise is Web design and development, user experience and business information systems. Thought-provoking articles are served with engaging supplementary reading material, all well selected and balanced. The last newsletter we read discussed the importance of designing for content and not squeezing content into prefabricated solutions. Does that ring a bell? Then be prepared for a lot of similar interesting topics.

Get Data Driven
Get Data Driven is all about free Web analytics tools. If you’ve ever wondered how much more revenue you could gain with a 5% improvement in your conversion rate, then this is for you. Here you got the tools to make decisions based on actual data from your website? Don’t miss out on the latest issue.

Bonus: Smashing Magazine Email Newsletter

Every two weeks our editorial team works on short, entertaining and relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. Take a look at the recent Smashing Email Newsletter (60.952 readers). You can cancel your subscription at any time. The Smashing Newsletter will always be free of charge. We respect your privacy; we will never give your data to third parties, nor would we ever spam you.

Subscribe to the Smashing Newsletter Now!

© Stephan Poppe for Smashing Magazine, 2011.