RssA1: 1stwebdesigner

luni, 26 martie 2012

1stwebdesigner

1stwebdesigner

How to Create a Sexy Small Download Icon

Posted: 26 Mar 2012 02:00 PM PDT

Hi there folks, I’m back with another tutorial on how to create a sexy small download graphic. It doesn’t even have to end up as a download graphic, it can be anything. Think of a loading bar, a upload thing or even a cool button.

In this tutorial you will learn simple but elegant techniques that you can apply on your designs!

Resources for this tutorial

The only thing you need for this tutorial is the Open Sans font. Download here. Original shot on dribbble.

Step 1: Setting up the Document

  • Start by creating a document in Photoshop, something like 600 x 400 px.
  • Fill the background with the bucket tool (G). My colour was: #f0e9dd. 

Step 2: Working on the base shape

Here we go. When I first started this graphic, it had a basic circle shape. Not really original, that’s why decided to use the anchor points to modify the shape.

First, grab the Ellipse tool. Pull out a nice circle with the size you like. Next, grab the pen tool (P). Ctrl + click on the circle you just made. This should make the anchor points of the object show. Again ctrl + click, but now only on the lower anchor point. You should see this now:

With that anchor point selected, hold shift and press your down arrow twice. This should drop the point 20px down. There it is, the sort of upside down egg shape.

Let’s style that thing up!
All there is on there is:

  • Gradient Overlay
  • Inner shadow
  • Stroke

Settings below:

Next is the little lip at the bottom of the main shape.

I made this with the pen tool. I created one side first, duplicated this layer, flipped it horizontally and moved it to the right position. With these 2 layers merged you can go ahead and give it some styling.

  • Drop Shadow
  • Inner Shadow
  • Color overlay


If you look at my finished image, you see there’s another highlight at the bottom. We’ll get to that in the end.

Step 3: Let’s bring in some colour

For the workflow it’s easiest to first create the inside of the coloured circle. Like this:

This is also made with the Ellipse tool (U). Layer styles below:

  • Drop Shadow
  • Inner Shadow
  • Inner Glow
  • Gradient Overlay



We’ll be adding text to this later.

Now it’s time for the orange loading bar. I guess there are more ways to make this. But I took the easiest approach. First, create an Ellipse again. about 10px larger than the one above. Make sure the layer is set beneath the dark ellipse and above the main shape.

Now we’re gonna modify this shape a bit with the pen tool by adding some anchor points and curving some lines. Try to make it like this:

This shape has 5 added layer styles, and next to that some lighting layers above which we will get to after this.

Layer styles:

  • Drop Shadow
  • Inner Shadow
  • Inner Glow
  • Color Overlay
  • Stroke (with gradient)

Now, make a new layer, (ctrl-shift+N) and ctrl click on the orange shape layer thumbnail. This should bring up a selection.

Put the new layer selected on Blending mode Soft light, grab the brush tool with about a 40px radius and white colour and start playing around to make some highlights on the orange circle.

Than, again a new layer. Still with the selection of the orange circle. Again on soft light, pull down the opacity to about 60-70% and pull a standard black-white gradient from top to bottom.

Now you should have something like this:

Starting to look pretty sexy ha!

Let’s make the shape in which the orange is sitting. Above the orange layer, and beneath the inner circle layer create a new layer and grab the Ellipse tool again. Create a new circle the same size as the orange circle.

To make things clear, we’re making this now:

Load the selection of the orange layer again (ctrl+click on the layer thumbnail). Rasterize the new shape we made and hit delete. This should delete all of the overlapping on the orange. Doe the same thing again, but now load the selection of the inner dark circle. So you only have the visible of the circle left. (The one-quarter piece). Let’s give it some styling.

  • Drop Shadow
  • Inner Shadow
  • Gradient Overlay

What a bummer guys, we’re almost done already!

Few things left to do.

  • Add the numbers in the middle.
  • Highlights on all the shapes.
  • Simple background shadow

Grab the text tool, with the Open Sans font, typ 75% in the middle on everything (16px, bold #ddd3c3). Give the text a drop shadow, deselect the Global lighting option and set the direction to -90 degrees. distance: 1, spread: 0, size: 0. Colour: #000.

Another text layer beneath the percentage. This will show the file size, or download speed. Whatever you like. Same styling same options, only not bold and 10px big now.

All set, now we have this:

Now we have to add some highlights to make this thing shine.

This is after my added highlights:

Try to do something similar, most of it is done the pen tool, or just by loading the layers selection and stroking it with white on a new layer, a little erasing some parts an blending options should do the trick. Just play around ;). If u have questions feel free to ask.

My shadow is a gaussian blurred triangular shape on 5% opacity. Transform it a bit to get the right shape of the shadow. It also depends on when your light is coming from.

You can spice up the background a bit more with patterns/textures/lights/shadows, etc.

Here’s my final outcome once more:

I hope you likes this tutorial. If you still have any questions, feel free to ask!

Follow me on Twitter to stay tuned for more!

The Power of Stories for Enhanced User Experience

Posted: 26 Mar 2012 09:00 AM PDT

What ticks Twitter? It is not only the best possible news feed being generated by various Twitter users but also the stories that say it all in 144 characters. Although Internet has helped humans evolve the way they communicate yet the purpose remains the same – to stay in touch, to communicate and to share each other’s stories. How we do it hardly matters nowadays. Today I will discuss how stories have been used over and over in order to attract the attention of consumers and how it can be used to build a brand.

The Emotional Touch

Most of you must have seen this video but for those who haven’t must see it once. It won’t take more than 7 minutes of your precious time and it is worth it. A young girl could silence the delegates of the so-called “legendary” United Nations just by touching their hearts. It was all about connecting emotionally with her listeners and she did just that.

We must understand that most of the times the style in which one describes products on websites is almost mechanical. We have our own set patterns and we foolishly use those patterns to write down various descriptions. It is all about the amount of time one has spent doing the same work over and over. Correct me if I am wrong?

The importance of emotional touch in write-ups (and other forms of media) cannot be understood until and unless one actually gives them a shot. Humanization of communication between a company and the end customer goes far behind user experience. Make it real and involve humans in your stories or otherwise – lose!

In the early days of the personal computer, all the display screens were black and white. When color screens were first introduced, I did not understand their popularity. In those days, color was primarily used either to highlight text or to add superfluous screen decoration. From a cognitive point of view, color added no value that could not be provided with the appropriate use of shading. But despite the fact that the interface community could find no scientific benefit, businesses insisted on buying color monitors. Obviously, color was fulfilling some need, but one we could not measure. In order to understand this phenomenon, I borrowed a color display to use with my computer. After the allocated time, I was convinced that my assessment had been correct — color added no discernible value for everyday work. However, I refused to give up the color display. Although my reasoning told me that color was unimportant, my emotional reaction told me otherwise. ~ Norman, D. A. (2002). Emotion and design: Atrractive things work better.

Quickly, What’s The Connection Between Emotion And Design?

Emotion triggers a surprise response which helps the end consumer connect with the product. We might not understand the importance of emotion as it is almost invisible but emotion does trigger thought and behavior. Underplaying the role of emotion in design (or any other product for that matter) will simply result into a design without a soul.

The emotional touch in a design helps the user understand the credibility of design and the amount of hard work that has gone into the making of that design. Also, it generates a bond of trust between the two entities. On the whole, the emotional touch will instantiate the ease of use for the end-user.

Ethnography and Stories for User Experience

Ethnography has recently started to make its way into the minds of User Experience teams and experts. Dictionary definition of ethnography is “The scientific description of the customs of people and cultures.” Lately, Ethnography made its way into corporate and consumer culture. It is being used to understand the potential buyers for a particular product. It helps one to understand the values, behavior, and motivations that drive a potential end-user. This is where the connectivity of UX with Ethnography erupted.

I am planning to do a completely different article on Ethnography and User Experience but because we are discussing stories and their effect on UX so let me take some space out to co-relate importance of stories in case of Ethnography.

Image via Stockfresh

Stories help companies connect with the end-user and nurture a bond between them. On the other hand Ethnography helps the same companies understand end-user’s daily life style and their thinking pattern. So, the science of Ethnography can use stories and their emotional power in order to connect with end users. This will help the end-user to open up with the target company and strengthen the understanding between the two.

The Importance of Water Cooler Moments

Yeah! They matter. Remember the times (which might have been yesterday for you) when you end up spending more than just a minute around the water cooler at your workplace? Stories discussed around the water cooler at times have enough importance to make or break a business deal. The amount of emotional investment that we do in such stories and their characters helps us connect with such stories.

Image via stock.xchng

What I want you to understand is if your story telling is such that the end consumer is discussing them at the water cooler in his/her company then you have pretty much done your job. In short it is the lasting impression that will make or break your end game. Story telling should be such that users are emotionally able to connect with them. I agree that Water Cooler Moments might not connect with our topic here but it is an important pit stop for your stories and your end consumer.

Summarizing the Advantages of Storytelling

I am not done yet but I hope that I have been able to give you a glimpse of what all storytelling can do and how strong your pitch can be if it is backed by a story that connects with end user. Now, let me quickly go through some of the benefits of story telling that enhances UX:

  • Regenerates dead papers by pushing life in them.
  • Simplifies designer’s perspective and helps him understand the end-user better.
  • Increases understanding between the team which is into UX as it brings everyone on a common platform.
  • Brings out the thoughts of end-user.
  • Accelerates speed of the project.
  • Improves communication between various teams as it is able to connect all of them on one single platform.
  • Value for end-user and profits for company on the whole.

Conclusion

Stories have always played a vital role in our lives since childhood. When we were kids, it was the bed time story that gave our mind the much wanted peace and helped us sleep. We might have grown up physically but still its the stories that help us connect with each other. No wonder why Twitter is ticking and no wonder that User Experience will touch heights once it stands on the pillar of stories that connect people.

7 Creative Ways to Use HTML5 Canvas

Posted: 26 Mar 2012 03:00 AM PDT

One of the most exciting features of HTML5 is the <canvas> element that can be used to draw vector graphics, create amazing effects, or produce interactive games and animations. Canvas is supported in all modern browsers, including the upcoming Internet Explorer 10, but a little help from JavaScript allows older versions to adapt. It was originally designed by Apple for creating lightweight dashboard widgets on its mobile devices, but is now an openly developed W3C spec which grants it enormous flexibility and application.

HTML5 Canvas works with JavaScript libraries and CSS3 to help you create interactive websites, charts and graphs, web-based games and animations. Integrating Canvas into your webpages is as simple as adding any other markup, but some programming knowledge and mathematical perseverence is required to create the effects, graphs, animations, games and functions that make Canvas interactive.

Each of the below examples of HTML5 Canvas are primed for integration into your web designs, and can be taken beyond the basic concepts presented here through the power of your creativity.

Interactive Typography Effects

Canvas can be used to create stunning typographic effects that add a unique flair to any design. This tutorial from codrops gets you started with interactive type manipulation through the HTML5 canvas, covering development of dynamic type effects. Choose a font and color and with one <canvas> tag and a few snippets of JavaScript, you’ll have your own interactive logo.

This canvas effect has a wide variety of applications. Use it for animating your logo, adding flair to a coming soon or 404 error page, or add your own version of the effect to intro typography in your website designs.

Learn More or See it in action.

3D Slideshow

Hakim el-Hattab is an early HTML5 experimentalist known for his amazing application of JavaScript and HTML5 Canvas to produce a wide array of original effects. His 3D slideshow concept can be implemented to produce a traditional image slider for a portfolio page, incorporate photos for a stunning gallery showcase, or use text for a unique approach to content presentation.

Of course, slideshows aren’t just for visual presentation. This effect can be used for presenting content, introductory text or to provide an interactive learning experience.

Learn More or See it in action.

Social Audio Visualization

In this amazing canvas demo by 9elements, Canvas particle effects are combined with audio and the Twitter API to produce an interactive social status feed. Particles are affected by the movement of your mouse, and clicking will cycle through past updates. View the page source to see how it was done.

Combining HTML5 and social media like this or in other ways is a useful exercise in creativity and adds a little fun to any website. It can be applied to promotional websites and used in marketing campaigns, too. Imagine the impact on a Facebook page!

See it in action.

Animated 404 Not Found Page

Error pages are the most overlooked aspect of web design, but are just as important as any other page. They help retain traffic by redirecting it to the right place and show visitors that you’re not only innovative, but thoughtful. This tutorial combines HTML5 and CSS3 to create a unique animated 404 Error page with very few extras needed.

The concepts, styles and code can be easily adapted to your own ideas. Add some links and a search box for an even more amazing result.

Learn more or See it in action

Interactive Book Layout

20ThingsLearned is a demo from Google that features an interactive book layout to deliver information about browsers and web technologies. It is not only impressive from a coding standpoint, but a useful resource as well.

Book formats and interatcitvity in design can greatly enhance anything from practical applications such as magazines and learning resources to promotional sites, personal journals and portfolios.

Build your own or See it in action

Drag and Drop

HTML5 Canvas includes native support for interacting with images, thanks to the draggable attribute, but when combined with kinetic.js, you can turn this event into anything from a visual categorization app to an interactive pinboard for arranging and displaying images. View the example source to see how the image board was done.

Drag and drop events are useful for more than image collages. Consider using them for arranging content, creating agile project management tools, or a fun way for customers to drop products into a shopping cart.

Build your own or See it in action

Image Effects

One of the most powerful features of HTML5 canvas is its interpretation of pixels and how it grants us power over them. As a result, any image filter or effect can be recreated and applied to apps, themes or anything else you can imagine. Google’s Ilmari Heikkinen takes you through several examples to learn this trick.

Learn more and See it in action

Conclusion

Hopefully this overview was useful in introducing the powerful relationship between JavaScript, CSS3 and the HTML5 canvas tag, and that it inspires you to implement your own HTML5 tricks into future or existing web projects.

If you are more of a designer than a developer, but wish you could take advantage of the awesome effects and behaviors of HTML5, you’ll be thrilled to learn that Wix will be launching the very first HTML5 website builder on the 26th of March. This tool can significantly change how you design, giving you a visual editor for creating and styling elements, using drag and drop for arranging layouts and adding widgets. You will also get access to a library of interactive canvas elements and animations, CSS3 effects and add-ins such as HTML5 audio, video, slideshows, forms and more. Visit the Wix website to learn more and sign up to be the first to explore this new technology.
Publicat de la 17:09

Niciun comentariu:

Trimiteți un comentariu

Abonați-vă la: Postare comentarii (Atom)