Web Design

Getting Started with Graphics Design for the Web

Monday, June 30, 2014

Graphic design is such an engrossing topic because it requires an enormous amount of time and practice to learn. This is similar with web development, but coding is often seen as more logical and straightforward. Design has structured guidelines, but it is much more of an art than a science. You should learn these basic guidelines and understand why certain graphics or colors work together before starting to breaking those rules.

If you have passion and perseverance then nothing can truly stop you from becoming a great designer. The first step is to recognize how the process works and where your energy needs to be focused. I want to share my thoughts about graphic design for website layouts and offer a few bits of advice for anyone interested in the field.

Practice your Weaknesses

A lot of people hate to hear this advice, myself included, but it’s the absolute truth. Objectively speaking it’s the best and quickest method I’ve found to see rapid improvement. You need to understand what you can already do and what you can’t do. Focusing on a weakness will be awkward at first, but eventually you’ll hit a stride and the task becomes much more comfortable.

If you stay caged in a single process then you never really advance beyond that skillset. So you may know how to use a small segment of Photoshop/Illustrator but you can’t really create any type of graphic for the web. You should try to understand the shape tools and layer effects – and yeah the pen tool is a huge plus. Most designers are not comfortable with the pen tool so that’s a great place to start.

When you’re brand new almost everything could be considered a weakness, so any time spent designing is time spent practicing. I’ll go out on a limb and guess that nobody is paying you to practice so it’s okay to screw up. Once you accept this fact your hours of toil will seem less stressful. There is a final goal to achieve and it’s not perfection. You should work to become more enlightened about any subject that will help you create better graphics.

Keep this in mind when you start each practice session. Any subject that you consider a weakness will stay a weakness unless you can tackle it head-on. Better to learn while you’re still new rather than once you’ve landed a job or started doing freelance work.

Study Great Websites

If you have a lot of weaknesses and don’t know exactly where to start I’d recommended keeping a list of brilliant website graphics. Save bookmarks to anything that catches your eye from a menu bar to a footer or anything in-between. This will give you a nice visual library of design ideas that could be practiced.

Often times you’ll stumble onto a beautiful graphic or effect that you wish to recreate, but have no idea how to do so. Hit Google first with some keywords and see what comes up. You may be surprised at how many similar tutorials can help you recreate the effect. Otherwise I’d recommend the Graphic Design Stack Exchange forum where you can post up detailed questions and typically get some helpful responses.

This graphic design Q&A forum will be more helpful as you learn the basics and keep practicing. The designers on Stack Exchange are quite knowledgeable but prefer to answer more specific questions rather than vague “help me design this” requests.

Retina Displays

Keep in mind that modern web graphics have changed a lot over the past 5 or 10 years. Retina displays were never a thing before Apple created the iPhone 4. Then some Android devices started following with HiDPI resolutions and now even MacBooks are using this display. Retina screens fit double the amount of pixels into the same physical space.

This means your icons and graphics will look the same size, but require more pixels to appear “crisp” on retina screens. So if you’re creating a 50×50 icon it will always be 50×50 pixels on the website. But retina screens need 100×100 pixels to make that same 50×50 icon, otherwise it looks blurry and stretched out.

As you continue practicing get into the habit of designing @2x sizes whenever possible. It’s usually easier to scale down rather than scale up with pixel graphics. But even if you don’t create 2 sets of graphics it might be better to use a double-sized icon fitted into a 50×50 square rather than a smaller icon forced to appear larger.

You can find many blog posts discussing this trend and how you might design for retina screens. It’s obviously possible to design @1x first and scale up if you have the ability to use vector shapes. Scaling down requires elements that use even-numbered dimensions because odd numbers will get split in half on a subpixel. Try both and see what you like best. Just keep in mind that retina is likely here to stay so it’s worth creating both sets of graphics.

SVG Icon Design

Another modern trend worth mentioning is the popularity of SVG icons. These are Scalable Vector Graphics which behave much like a vector in Photoshop or Illustrator. Except now you can embed these into a website and have them respond to the layout size. Pretty neat huh?

Older browsers still do not fully support SVGs and unfortunately not everyone is running an updated browser. But since you can also animate SVGs they bring a lot to the table. It’s not something that you need to learn in order to design website graphics. Just keep in mind it is an option and it’s a fun graphic style to learn whenever you have some extra time.

Starter Tutorials

The quickest way to improve your skillset is to start with a few online tutorials. Designers frequently publish free tutorials which relate to web design, icons, banners, logos, and many similar topics. If you already have access to Adobe Photoshop or Illustrator then you’ve got everything you need.

Although there are hundreds of amazing tutorials out there, I’ve put together this brief collection which is perfect for new designers who want to build graphics for the web. All you need to do is follow along and really try to retain the information. If you keep up with lots of tutorials then you’ll eventually find yourself getting more comfortable designing graphics from scratch.

Address Book Icon

Banner, Label & Badge Templates

Green Web Badge

Animated Banner Ad

Simple Notebook Icon

Gearbox Settings Icon

Dark Web Button

Manipulating SVG Icons

“Almost Flat” Icons

Creating Buttons for the Web

Advertise here with BSA

Source: http://ift.tt/1qa7eyE

Design your way

Visual design entails taking several different aspects of design and combining them in order to create a site that it both easy to use and enjoyable for the visitor.

The World Wide Web is comprised of several million websites all competing for the attention of their viewers. Because of this, many website designers want their websites to be unique in order to stand apart from the rest.

The problem with this is that designers give in to their creative sides and often design sites that are too complex for visitors to navigate quickly and efficiently.

When designing for website usability it is important to stick to the fundamentals and create a website that is easy for anyone to use. In this article, we will talk about what clean website design is and how to achieve it.

What makes a design clean

Everyone wants a website that will attract lots of visitors. What makes a website attract a lot of traffic is how easy the site is to use. If you look at some of the more successful sites, they all seem to have certain elements in common.

All of these sites are clean and professional. When designing a website it is important to remember that designing a clean website is a process of constant refinement.

No matter how much content you may have, the purpose is to streamline that content into a manageable format that the visitor can access quickly and efficiently.

All of the individual components of design: graphics, word spacing, color and so on must come together seamlessly in order to create a site that flows smoothly and is simple to navigate. This can be done by giving your site a professional look and feel.

Combining powerful content with a micromanaged layout will help your visitors to trust your site as they navigate it to get the information they need. Your visual elements have to be organized in a way that will make sense to the visitor. This applies to both the larger visual elements and the smaller ones as well.

Do not be afraid to scrutinize over the smaller details like shadows and borders. Doing so will help to refine your site and could shed some light on flaws that would be missed otherwise.

Making sites usable

The site should be usable and the content engaging and easy to find. Modern day web surfers do not like to spend large amounts of time figuring out how to use a website.

They want to complete tasks quickly and easily, so make sure that it is easy for visitors to find what they want on your site quickly. The fewer steps that visitors have to take to get to what they want the better.

In an ideal world, we would have real visitors test out the site. Since that is not practical, here are some important things to consider when designing a website.

Site navigation and links

Your site should be easy to navigate. Visitors should not have to guess how to get around. Keeping with the established conventions for website design will help create an easier user experience. There is a reason that most sites have a navigation bar at the top or a list of links on the left side of the page.

Give your links clear and meaningful names so that your visitors do not click the wrong link by mistake. Make sure that any descriptive text is limited to the link itself.

Use the same style and format for links. Combining color and underlining is the common convention for indicating linked content. If the link changes colors once it is selected, then make sure that all your links do the same thing. Follow this same rule with groups of links as well.

Make sure your links have different states when you are designing them. Visitors should know whether a link has been selected or not by its color and style. The same applies to when visitors are hovering over a link.

Don’t forget about the search form

The search form can be the quickest way of finding content on a site, so make sure you have one that is clear and visible. Often people who visit a site already know what they want, and including a search form will make it easier for them to find it.

A search field is invaluable for any website. Whether it is e-commerce or blog, the search field is how you look for content, so never design a website that does not have one.

Make content easy to scan

A clean website design does not just have good visual design. It also has good copy. Copy is the text that accompanies the visual aspects of your site. Make sure the copy on your site is clear and easy for the visitor to read and understand.

Spelling and grammar are very important. Nobody thinks highly of a website where all the text is misspelled. Keep your words simple so your visitors won’t have to grab a dictionary to navigate your site.

It is also a good idea to understand how visitors are going to read that copy. Some may read from top to bottom while others may just scan the titles in bold to decide if they would like to continue.

There is a lot of information out there and most people want to get as much as they can as quickly as they can. Be sure to keep this in mind when writing copy for your site.

Whitespace

Whitespace is the space between copy and visual elements on your site. When used properly, whitespace can be a very effective way to promote website usability.

Whitespace can be used to separate groups of items and provide a sense of visual hierarchy to your site. Visual hierarchy will make your site easier to perceive, so you may want to consider grouping related items together for the same purpose.

Whitespace also manages space on your site. By grouping items on a page, you can provide the appearance of space when you have a lot of information that you need to display.

Sign up forms should be simple

Nobody likes completing forms and the less time people have to spend doing, the more popular you will be. Filling out forms on your site should be simple and intuitive. People should not have to search for information to fill out your form.

In addition, some people may be using a mouse to click in the field so make sure it is large enough for them to select it. Avoid putting example text in the field unless it automatically disappears when they click on the field. Having to erase example text can be viewed as a waste of time.

Keep the amount of fields to a minimum.A single column for inputting information is better because two can be confusing. Make sure to add a visible call to action like a big sign up button. Use username, email, and password fields. With password fields make sure there are two so that the visitor can verify the password they type.

404 error pages are important

Many designers often overlook the 404 error page. If a visitor clicks on a site that is inaccessible, they are in danger of leaving. Use this page to get them back on track by adding a home button to it. You can also add links to other pages on your site

Do not ignore the user expectations

It is understandable to want a website that is unique, but it is often a better idea to stick to conventions because they reduce the learning curve. Remember most visitors do not like to take the time to figure out how to use a site.

Sticking to the established conventions will allow visitors to use your site with confidence. Visitors will come to trust your site as a reliable source of information. That kind of credibility can be worth its weight in gold. Always keep in mind that the site exists for the visitors and should be designed with them in mind.

Test your design

Now that you have gotten your site up and running, it is time to test it. Testing your site should be something you do constantly. Test it at first to see if it works, then find the bugs and fix them.

After you have fixed any bugs, test it again to see how the site performs. If they are fixed, have some friends or colleagues test the site and document their feedback.

Testing points out problems and flaws so always test and refine your site. A good way to think about it is to have others test the site until they tell you that it has great content and is easy to use.

Ending Thoughts

Many people want to design a site that is colorful and pretty, but it is a better idea to design a site that is practical and easy to use. Anyone who visits your site needs to see the benefits of it. It is a good idea to offer visitors an easy way to explore your site so they can see what it has to offer for themselves.

Making sure that visitors can navigate your site easily without thinking will reduce user frustration and make the experience more enjoyable for the user. Use presentation, feel and attention to detail to provide visitors with all of the benefits while doing none of the work. Doing all of these things will help to create a good experience that visitors will remember.

You will definitely like these articles

Cool New Website Designs For Inspiration – 35 Sites

Data Visualization Designs That Should Inspire You – 23 Infographics

Clean And Efficient Website Designs – 32 Examples

Show me some well designed logos! #29

Showcase Of 41 Colorful And Well Designed Websites

Source: http://ift.tt/V1VFOM

How to hyperlink in Photoshop

Monday, June 23, 2014

As we all know, hyperlink is that which links image/text to another place either in the same document or different document or address. It’s pretty useful when you want to show more information. Follow the steps provided in this tutorial to create hyperlinks in Photoshop.

Steps to hyperlink in Photoshop:

1. First of all, open Adobe Photoshop. We are using Adobe Photoshop CS5.5 but this also works on earlier or later versions.

2. Next, Open any image where we will place the hyperlink. To do that, click on the File >> Open and select the file you want to open. Then click on the Open.

3. Next, from the toolbox, select Slice Tool (Shortcut – C) beneath Crop Tool and then start making the slice selection by clicking and dragging around the portion of the image where you want to place hyperlinks.

4. Next, right-click on the slices you have just created and click Edit Slice Options.

5. Next, enter the website URL which will open when the user clicks on the sliced area. Next, click on OK. You can do this for all the individual slices. If you want to open different URL when clicking different part of the image, then specify a different URL for the slices.

6. Next, File > Save for Web & Devices from the menu bar. Then select JPEG or PNG-24 in Preset and click Save.

7. Next, specify the name for your image in File Name. Then select ‘HTML and Images’ in Format list and then click on the Save button.

step-7-HTML-and-Images-hyperlink

8. Finally, open the folder where you just saved sliced images and double click on the html file to open it. Here you will notice the hyperlink on the portion that you have sliced. Once you click on the slice, it will go to the destination you specified in the hyperlink.

This finishes our tutorial on how to hyperlink in Photoshop. If you’ve find our Photoshop hyperlink tutorial helpful, please leave a comment below.

The post How to hyperlink in Photoshop appeared first on Web Design Blog | Magazine for Designers.

via http://ift.tt/1pcnTUn

30 Web Designs that Fully Embrace the Hero Image

Sunday, June 22, 2014

The Hero image trend in the web design industry has developed so much over the past few years that the vast majority of new designs feature some kind of large introductory photograph. These huge background images have been dubbed hero images, a term that has been adopted from the print industry where page filling images are commonly seen in magazines. Hero images prominently fill the screen to wow the user, often only accompanied by a heading or a sentence and a single call to action such as a sign up form or button links. Today’s roundup showcases 30 sites that fully embrace the hero image, granting the maximum amount of space possible to this design feature and shifting all other content thousands of pixels down the page.