25 Examples of Subtle Textures and Patterns in Web Design

25 Examples of Subtle Textures and Patterns in Web Design: Hence, there are many reasons of using the subtle textures and patterns in web design. It may be used to create some extra visual effect or may be used to make the theme more real.

Adobe Illustrator Tutorial: Be My Valentine

Adobe Illustrator Tutorial: Be My Valentine:

Valentine’s Day, the most romantic holiday of the year is upon us. So why not take the opportunity to learn how to create a romantic gift box in AI. In this Adobe Illustrator tutorial we will be learning how to create a heart shaped gift box by using a few basic tools such as the Ellipse Tool (L) and Pen Tool (P).

3D effect Extrude & Bevel will help us with the Perspective (which is a very important aspect of this tutorial). Beside that we will create a nice pattern that we will use as wrapping paper and fancy ribbon to complete our illustration.

So, let’s move from words to deeds. This is what we will be creating.

Creating the Heart

In this tutorial we will do everything from scratch. First thing we have to do is to create a nice heart. Grab the Ellipse Tool (L) from the Tool Panel and create a perfect circle (hold the Shift key on the keyboard for the even shape).

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the circle and nudge it to the right, as shown in the picture below.

Select both circles and under the Pathfinder Panel hit the Unite button. It will turn both circles into one object.

Now grab the Direct Selection Tool (A) from the Tool Panel and select the lower middle anchor point. Hold the Shift key on the keyboard and drag that anchor point downwards.

With the Convert Anchor Point Tool (Shift + C) click on that anchor point in order to create a sharp corner.

With Delete Anchor Point Tool (-) we will now remove two anchor points.

You should end up with something like this.

As you can see, this isn’t a perfect heart. It seems a little bit edgy. Let fix that. Grab the Direct Selection Tool (A) from the Tool Panel. Click on the anchor point on the left side of the heart. Make sure to pull the end of the handle downwards (don’t forget to hold the Shift key on your keyboard while you’re doing this, for straight dragging).

You can see the difference between the left and right sides of the heart.

Repeat that step for the right side of the heart as well. You should end up with the perfect shape of the heart.

Feel free to adjust the position and the number of anchor points until you reach desirable look of the heart.

Creating the Wrapping Paper

In this part of the tutorial we will create a nice and simple pattern for our gift box. Select the Rectangle Tool (M) from the Tool Panel and create a large rectangle. We will use it to create a symbol for the wrapping paper. The rectangle has to be large enough to cover all the parts of the gift box. Set the Fill color to any color you like, we will change the color in the final step anyway.

Now grab the Ellipse Tool (L) from the Tool Panel and create a small circle.

Duplicate the circle and move it to the right side of the rectangle. To do that hold the Alt / Opt key on your keyboard, click on the circle and drag it to the right side of the rectangle. Don’t forget to hold the Shift key on your keyboard for straight dragging. If this is too complicated for you, just duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the circle and move it to the right.

Select both circles and under Object select Blend > Make. It will create more circles in the middle.

To set the exact number of the circles select Object > Blend > Blend Options.

Set the Spacing to Specified Steps and the value to 15.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the row of circles and place the copy as is pictured below. Make sure to expand both rows (to turn them into an editable object). Just select Object > Expand.

Select both rows and under the Object select Blend > Make. It will create a few rows with circles in the middle. To set the exact number of the rows again select Object > Blend > Blend Options. Set the Spacing to Specified Steps and the value to 6.

Expand the circles again (Object > Expand). Select all the circles and duplicate them (Ctrl / Cmd + C, Ctrl / Cmd + F). Place the copy as it is in the picture. Group (Ctrl / Cmd + G) the circles. Select all the elements and under the Align Panel hit the Vertical and Horizontal Align Center.

Group (Ctrl / Cmd + G) all the elements and drag them to the Symbol Panel. Set the name to Pattern and Type to Graphic. Then hit the OK button.

Now we have the wrapping paper for our gift box completed. So, let’s create the gift box now.

Creating the Shape of the Gift Box

First we will create the cover for the box.

Select the shape of the heart we created in the beginning of this tutorial. Under Effect select 3D > Extrude & Bevel. Make sure to check the Preview box to be able to monitor the changes.

Feel free to play around with the rotation of the box until you find the right angle and the position of the cover. Perspective is very important to the tutorial, so don’t forget to include it. For our purpose we will set the Perspective to 100. Feel free to adjust to your liking.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the heart and nudge it downwards, using the arrow key on your keyboard. We need to make sure to bring the upper heart to the front (Shift + Ctrl / Cmd + ]).

As you can see, we are not expanding the hearts yet. We have to be able to adjust all 3D parameters if needed. Within the Appearance Panel (Window > Appearance) we can see which effects have been applied to our objects.

If you select one of the hearts and click on the 3D Extrude & Bevel link under the Appearance Panel you will open the Extrude & Bevel Options window and you will be able to adjust the look of the object.

So, let’s edit a little bit of our illustration.

Select the lower heart and open Extrude & Bevel Options window. We will have to increase the Extrude Depth in order to create the lower part of the gift box. Set the value for Extrude Depth to 80.

Make sure to upscale the upper heart (cover of the gift box) a little bit. You may have to adjust other settings as well, in order to achieve the right look for your gift box. You should end up with something like this.

Applying the Symbol of the Wrapping Paper to the Gift Box

If you are satisfied with the basic look of the gift box we can move on. Basically, we have two hearts with applied 3D effects. Now we will apply the symbol of the wrapping paper to each heart.

To apply the symbol to the 3D shape simply hit the Map Art button inside the Extrude & Bevel Options window. A new window will pop up. Switch between the surfaces to apply the pattern we created earlier.

When we are done with the cover it should look like this.

Repeat the previous step for the lower part of the gift box. You should end up with something like this.

More on Page Two

We are nearly halfway through the tutorial, but there are still some vital details to come. To complete the design, simply head on over to page two for the rest.

Fact vs. Fiction: What Usability is Not

Fact vs. Fiction: What Usability is Not:

A close friend asked me a few days ago – “You’ve covered decent ground on the science, dimensions, characteristics, design aspects, process and pervasiveness of usability considerations. How about doing a reverse bit? What usability is not about? Or the myths of usability?” I jumped at the chance.

In choosing to write this, I am simply reinforcing the simple concept that it is also necessary to talk about the “NOT” part in a subject as complex as usability. This shall (I hope!) help in resolving ugly assumptions about the subject and expose more dimensions for discussion. Let’s take a journey of both – popular and unpopular myths of usability. The following are prevailing misconceptions (fast becoming legends!) of usability, in no particular order.

Usability is expensive

It is known that Stanford University, Microsoft, IBM, and many others spend tons of resources (money and human) on usability research, which is quite expensive. But regular and daily usability need not be expensive – thanks to a much evolved ecosystem that allows the science to be applied without having to spend a lot.

I agree that it’s not a commodity – that there’s a price to pay. But from a cost-benefit standpoint, more often than not, usability is not as expensive as it is perceived to be. The major contributor to this misconception is that usability is non-measurable in nature, hence it allows the argument and myth in question.

Usability is free

At the opposite end of the first misconception, a large number of people believe that usability can be free. I’ve seen many people ask suggestions on improving the usability of their site or product – on LinkedIn. There is a regular crowd that asks me personally about giving usability suggestions on their site. Well, for a matter as subjective as usability, the lack of real engagement in this kind of flat question-advice round, makes it even more subjective. Free advice and usability tips are available everywhere, but they’re more like the generic horoscope guidelines and predictions, in my opinion.

Usability is minimalism

The concept of minimalism is usually a nice and welcome change in today’s noisy world. Minimalism is about reducing clutter from your presence, by playing with content, number of pages, element sizes, images, white spaces and navigation. What we need to be aware of is that while usability will almost always get in some minimalism, the reverse is not necessarily true.

Going minimal is not alone going to get you usability. There are many areas of compromise if the distinction between the two is not well understood. Like, having graphic icons/buttons that consume less space instead of textual menus that consume more space. Or trying to fit all content on one screen by adjusting to a very difficult-to-read font size. Different solutions are appropriate at different times.

Usability is user experience

The fundamental difference is “Can easily use” vs. “Want to use”. Let’s take the best possible example here – the usability guru: Jakob Nielsen’s website. Usability guru that he is, his site is very functional and easy to use. But how do you think it scores on user experience? Would visitors love to browse the site for better experience? The answer is NO.

Again, there are some practitioners who believe building a good user experience is all that’s needed for making the site usable. That had led to the myth in question. Superior user experiences have failed miserably in usability, as it’s just one of the dimensions of usability. It is still important to have the right balance.

Usability is all art

Image by MitchellZappa

Art is something that mostly makes sense to the creator alone! Using that as an analogy, I’ve experienced my usability suggestions and advice being alienated to art and abstraction. This myth is more about a mind-block and prejudice than anything else. People think that you need to be an artist or a designer to create usability. Usability does not need artists, it requires fundamentalists and practical observers.

Being an artist can definitely provide an edge of translating the usability practice into a visual design. But otherwise, so much has been institutionalized as a science in the field of usability that companies can do without engaging an artist. However, one point in favor of the myth: There’s no denying that the best usability cases around us did have an art element and that shall continue to be the case. But…

Usability is simplicity

Simplicity is subjective. Even usability is subjective, but simplicity is consciously and directly subjective. Typical end-users are ignorant of technology/design, but they are not dumb. Making it simple is often understood and implemented, sadly, by treating users as dumb consumers.

So, most commonly, you will find people having giant task buttons, heavy label texts, prominent hints on screen, basically, all-important-functions-in-your-face attitude. Your concept of simple may not be so for your audience. This blind simplicity approach does not yield usability mostly, let alone always. Usability will drive simplicity laterally, not literally. Hence the myth is risky.

Usability kills creativity

This is one of the most common misconceptions (also nicely explained on Jakob Nielsen’s website). People think that following formal and scientific process in usability compromises the creative aspects, and leads to a compromised output. We need to appreciate here that the formal techniques, scientific processes are all a framework to guide and engage into usability practice. They are guidelines, not strict rules. Following them as such, you’ll undoubtedly fall prey to losing out on creativity. Following them as guidelines, you’ll get your out-of-the-box element inside your design.

Usability is common sense

The point of argument here is that common sense has a risk of being singular in nature, only with the assumption that it’ll be common to all. Like the famous quote: Common sense is not so common! In the perspective, common sense is merely an opinion at large with weak justifications from a random collection of users or concepts. So, it’s difficult to theorize based on the common sense equation. Very few things can command usability as common to all as a Google’s search. It’s more about amalgamation of varied wisdom and practicing that into your usability design. Naturally, this myth complements myth #2; since usability is perceived as common sense, it can be free.

Usability is good design

Good design (leaving apart the subjective angle) is only an element or output of usability – in practical sense. Otherwise, it’s more like a philosophy. Usability done with a philosophy of good design, would make it effective, error-tolerant, engaging, etc. This part I echo. My argument is towards the literal aspect about the myth, that a good design brings usability. In a way, this has a resemblance to myth #4: usability is User Experience. A good user interface design is not going to save a product if it is not useful or low on performance or erroneous. The usability and acceptance of such products have no connection with the presence or absence of good design.

Usability is about following some rules

Allow me to paint a wider picture here. Millions of books are available, being published and read all the time, that are self-help, how-to-guides, step-by-step. Thousands of blogs and articles teach and preach (including mine, I’m afraid!) about things you assume you’ll be able to learn and apply. That’s a fair assumption, albeit if all the literature is not taken literally. You need to constantly remind yourselves that there are no rules, only guidelines. You need to treat these reference materials as unbiased guidelines that you will taken into account – devising your own framework, your own rule-set, allowing enough flexibility too – if you want to apply consistently. Complex subjects are never mastered with step-by-step-wizard like software installations. Usability is no exception to this.

Usability is a luxury

The myth and the related corollaries that “usability can be done at the end”, “we don’t need usability to survive” can be near fatal, if given into. In today’s competitive times, where switching cost is so low, consumers will not hesitate switching to a more usable product with less features. Consider how DropBox scores over Minus and other similar products – only because they have done a fantastic usability job. DropBox does not even offer maximum storage space for free as others; still it commands the loyalty leading to a market valuation of 5 Billion Dollars!

Usability is fast becoming the key to survival; just that many are not aware of this. If you ignore or take it up as a low priority, the perceived quicker time to market is only going to cause harm. We cannot afford any myths. We need to be embracing reality and changing business and user needs; we need to be more agile to these demands, and from a product/website perspective, we need a more conscious effort on usability. It will enable marketing and empower sales. You will find this element common to all the successes in the world, and also find this element missing from all the failures in the world. And that’s not a myth!

Related Resources

• Interview with Dr. Morgan of User Insight by Andrew Maier | UX Booth


• What is the difference between Usability and User Experience? | Quora


• 10 Most Common Misconceptions About User Experience Design by Whitney Hess | Mashable


• Why most UX is shite by Leisa Reichelt | Disambiguity