Web Design

What are Breadcrumbs in Web Design?

Union Square Design Design, E-Commerce, Web Design

What are breadcrumbs in web design? Well it’s not tiny pieces of bread, but it’s based off of that idea. Using breadcrumbs in web design is a way of navigating through a website. Much like the Hansel and Gretel tale, “breadcrumbs” allow users to make their way back to where they started on a web page without getting lost. This form of navigation can improve a website’s usability — it also reduces confusion for visitors.

What is a breadcrumb?

A breadcrumb is a type of navigation that leaves a trail. That way, users can easily get back to where they started from. For example, one might look like:

Homepage>About>Contact

That tells you that you started at the homepage, clicked about, and then wound up at the contact page. These would be clickable links, that would take you back to the homepage if you wanted. Generally, they look just like the example above: a horizontal line, where pages are separated by the greater than symbol (>).

Why should I use breadcrumbs in web design?

You should use breadcrumbs in web design if you have a particularly large website. If you’re an e-commerce website, you should definitely use breadcrumbs in web design. This is because on e-commerce sites, products are grouped together in a hierarchical fashion. For example, you go from women’s fashion, to accessories, to jewelry, to necklaces. Breadcrumbs shouldn’t replace traditional navigation (such as headers), but they should be a secondary navigational feature, for extra support. Breadcrumbs in web design are also very convenient for the user. Instead of pressing the back button, or returning to the home page, users use the breadcrumb trail to get where they want to go.

Overall, breadcrumbs in web design is a useful feature for e-commerce web sites. They help with site usability, and they encourage people to stay on the site longer (as it’s easier for people to browse).

3 UI Tips for Website Design

Union Square Design Design, Web Design

Here are some UI tips for website design. UI, or User Interface, is how the website is presented, and used by visitors. Basically, designing for UI means designing a website that can be easily navigated by visitors. Links will look like links, it should be easy to navigate, and so on. If you’re having trouble with UI, here are some tips to improve your website.

1. Design in a F-shaped Pattern

Research has found that users read computer screens in an f-shaped pattern. This means that they generally read the top of a page, and with each line after that, they tend to scan only the first few words before moving on. Knowing this, you can design your website in that pattern, to get across all your important information immediately.

2. Make the website self-evident

This means that everything on the site — links, headers, pictures, etc. shouldn’t need an explanation. To do this, you should:

make links a different color than the text
use different sized fonts for headers
keep most text the same font

There are more tips we could include, but these are basic ways to keep visitors on your site. If they are confused about how to navigate the web page, we can guarantee they won’t visit your site again.

3. Include interactive elements

Making your website interactive could be as easy as adding a hover animation. That means, when a mouse hovers over a word, or a header, it will animate. This is often seen in drop down menus, for example. Our eyes naturally follow movement and keep us engaged, so including a background animation would be another good idea for your site.

With these UI tips for website design in mind, you can begin improving your website. The better your User Interface design is, the better your site will be overall.

UX Tips for Website Design

Union Square Design Design, Web Design

Here are some UX tips for web design. If you’re redesigning a website, something you need to think about is UX. UX stands for User Experience. This is very important to draw users to your site as well as keep them there. UX is a very broad category — ranging from how users interacted with a site all the way to how they felt while on your site. While it’s hard to measure, research has been done about how users interact with websites. Here are the UX tips we’ve gathered to make a great website.

1. Make sure you site loads quickly

Site loading time is important for a user’s site experience. If your website takes longer than 3-5 seconds to load, 40% of Internet users won’t visit it. That seems excessive, but it’s true. Thankfully, there are tools you can use to lessen your site’s loading time. Two tips are to optimize your images, and clear you website’s cache.

2. Don’t use harsh colors

Using soft colors that won’t strain a reader’s eyes is important. For example, you wouldn’t want your entire site to be blue and orange — those colors are contrasting (and vibrant) colors. While they can look good together, don’t be too heavy-handed with them.

3. Use simple language

Don’t scare away visitors with too much technical jargon. Terms that you might use in your business, or with your employees, but that other people wouldn’t know, should be avoided. Or, if you do have to use them, make sure to give a thorough explanation of what they mean. This will help confused readers.

4. Get lots of feedback

Feedback from employees and friends can really help improve your site! The best way to redesign a site is to listen to suggestions and criticisms that people have toward the site. Therefore, you know what needs to be worked on.

If you follow these four UX tips for website design, you’ll improve your website’s usability. And website usability is extremely important for the overall success of your site.

Different Web Development Jobs

Union Square Design Web Design, Web Development

The term, “web developer” encompasses many different types of jobs. Web developers usually are a part of a team; each member of the team has a specific job to do. So while “web developer” can be a job title used by many, it cannot explain all web development jobs that are out there. Here is a list of different web development jobs.

1. Back-end developer

Back-end developers deal with the server, application, and database. They create code which sends and saves data for back-end processing. Servers interact with the browser’s to fill visitors requests. For example, each time you take a quiz or answer a poll, you’re interacting with a back-end language. Back-end languages include Python, PHP, and Ruby.

2. Front-end developer

Front-end developers create the part of the websites that users see and interact with. They write the code, usually HTML, CSS, and JavaScript (which are front-end languages) for web development. Most everything you see on websites are front-end languages — text, pictures, graphics, etc.

3. Database developer

A database developer is a part of the back-end. They create, plan, and work with databases. This job is important for e-commerce stores, as products are stored in a database. These developers work with SQL, the database language.

4. Graphic designer

Graphic designers are an integral part of a web development team. They don’t code, but they can create site mock-ups, as well visual designs for the site. They help cultivate the website’s brand, and help with marketing as well. For example, Twitter’s logo of the bird is a recognizable symbol for the company. A graphic designer probably created it.

While certain roles mix and match, most people have some sort of web development specialty. There are plenty of web development jobs out there; so if you find yourself preferring one type of code to another, you can figure out which job you’d like to have.

How UX and UI Work Together

Union Square Design Web Design

UX and UI are two important web design elements that are often confused, or used interchangeably. But really, they are totally different concepts. However, UX and UI work together to create the best websites possible. Here’s what they are and how they work.

What is UI?

UI, which stands for User Interface, includes all of the different elements you use to interact with a website. Pages, buttons, icons, and other visual elements are included in this. Because we have UI, that means we don’t need to write in code to interact with a computer. We have mouses, and keyboards, and things that can be clicked on the screen. Today, UI designers work on creating apps, websites, and other programs.

What is UX?

UX, which stands for User Experience, is the experience users have while on your site, as they interact with the User Interface. Designing UX websites means creating pages that are easy to interact with, so that users will have a good experience. This concept has many different dimensions. UX includes how people found your site, what they did on your site, how they interacted with your site, and what they took away from your site. UX designing is less straightforward than UI designing.

Together, UX and UI are used to create effective websites. Let’s compare them to a coffee shop. UI is the machines, cups, tables, and counter. UX is the ambiance — the taste of the coffee, the noise, and the lighting. So UI is in part used to create a great UX, and vice-versa. You can’t really have one without the other when it comes to website design.

Now that you know what UX and UI are, you can use them to effectively create a website. Taking in UX and UI, you can make a user-friendly website that will get more visitors.

3 Best SEO Tutorial Websites

Union Square Design Design, Web Design

Here are the best SEO tutorial websites. SEO, which stands for Search Engine Optimization, is incredibly important to get your website noticed and visited. SEO means employing different strategies and tools to get a good ranking in search engines like Google. The higher your website ranks in Google, the more visitors you’ll get. This is important because many people use search engines to find services, products, and businesses. So, if you’re unsure about how to use SEO, we’ve compiled some of the best SEO tutorials we’ve come across online.

1. Moz’s Beginners Guide to SEO

This SEO tutorial is great for beginners. First of all, Moz’s website is very easy to understand, as well as navigate. They’ve successfully incorporated graphics and pictures to complement the writing content. The SEO tutorial is broken down to 10 different chapters. It may seem like a lot, but it’s worth the read. They also have a PDF version available to download and print — this way you can save the tutorial for the future.

2. Tutorials Point’s SEO Tutorial

Tutorials Point is a straightforward tutorial website. The tutorial is broken into 17 small parts. This way, you can pick and choose what to read, depending on your website’s needs as well as your own knowledge. There is also a SEO Resource Guide for further reading.

3. Hobo Internet Marketing’s Google SEO Tutorial

This tutorial is very long, and covers a lot of topics. There are 58 parts to it, and at the end you can download a free SEO e-book created by the author. Hobo Internet Marketing has spent a lot of time researching Google and SEO — so this doesn’t take into account the way Bing ranks websites. However, if you want to be an SEO expert, this guide will certainly help you out.

So know that you know which SEO tutorial sites to visit, you can begin learning about SEO, This way you can begin optimizing your website to be the best it can be.

Tips for E-Commerce Site Success

Union Square Design E-Commerce, Web Design

Creating an online store for your business is a great way to get your products, and brand, noticed. But it takes more than just putting your goods online to sell them. Visitors look for certain qualities in websites to determine whether or not they want to make a purchase. Here are some tips for e-commerce site success.

1. Create a responsive site

Having a responsive and easy to use website is key. Website responsiveness means that it can be accessed on all screens — mobile, tablet, and computer. In order to design a website so it still looks good on all these screens can be difficult. Minimalist designs are encouraged — too much clutter on a mobile site will drive users away.

2. Make sure the site is secure

Site security should be a priority for e-commerce businesses. You should have a SSL certificate as to not worry customers. Not only will customers feel better about purchasing from your site, but you’ll feel better as well. SSL certificates can prevent fraudulent purchases.

3. Use your own product photos

Tacky stock photos can be off-putting, as they are easily recognizable. Instead, take your own product photos! This is an opportunity to get creative, and show off your business’s style. Your product descriptions should also be your own writing as well. Be sure to make them helpful (and fun, if possible).

4. Feature customer reviews

First things first: make it easy for people to leave reviews. Once they start coming in (and hopefully they are positive) the more products you’ll sell. Consumers are much more apt to believe the word of a fellow consumer than the business that is trying to sell them something. If product reviews are good, the more of that product you’ll sell.

With these tips for e-commerce site success, you’ll be own your way to creating a great website. Bad websites drive visitors away frequently — and you don’t want to be one of them.

Designing Websites for Mobile Devices

Union Square Design Web Design

Designing websites for mobile devices and tablets is just as important as designing websites for computer screens. More people than ever are using mobile devices to browse the Internet. Therefore, you need a responsive website for every screen possible. Here are some tips for designing websites for mobile devices.

1. Minimalism is Key

When people browse the Internet on their phone, it’s usually because they’re not near a computer. Often, it’s because they’re in a rush and need to quickly find out some information. Because of this, it’s important to design very minimalist websites. In fact, we recommend designing minimalist websites for every device, as it’s become very popular to do so.

2. Design within Thumb Boundaries

When using a mobile device, people often type and browse with their thumbs. Knowing this, you need to design your site with thumb boundaries in mind. Putting important information in a header isn’t the best idea, as thumbs have a harder time reaching the top of a phone. Instead, use a footer for easy thumb access.

3. Use Less Images

Images increase a website’s loading time. On a full-sized browser, it’s absolutely okay, and even encouraged, to use images. On a phone? Not as much. One is okay for a page, but a ton of images will slow your mobile site down. This can discourage users from staying on the site.

4. Include Mobile-Specific Features

Have your mobile site offer up something that can’t be done on a computer. Something simple, such as “tap to call” makes contacting you or your business easier. Integrating Google maps for a GPS tracker is also a great idea for your site (if applicable).

Designing websites for mobile devices is important for the success of your site. The more accessible your website is to everyone, the more that people will use it.

Using Photoshop for Web Design

Union Square Design Web Design

Photoshop plays a big role in website design. This Adobe program is used to create website mockups, logos, and even wireframes. If you’re looking to get into web design, knowing Photoshop is a must. Here are some tips of ours for using Photoshop for web design.

1. Use a Grid

You should definitely use a grid system when designing anything in Photoshop. It gives your design structure. It also ensures that your proportions are correct throughout the design.

2. Consider the entire page

When designing, keep the entire page in mind — not just the part that you are working on. One good practice is to place all of your Photoshop elements on the canvas before you commit things to a certain spot. Getting a rough picture of the final project ensures that you’ll make smart decisions later on.

3. Use Text Wrap

Text Wrap, which is mostly used in InDesign, can actually be used in Photoshop as well. There is no direct tool for it, but with a few keyboard shortcuts it can be done. Here’s a quick tutorial on how to do it.

4. Stay Organized in your Layers

When you start building layers upon layers, things can sometimes get confusing. If you use Ctrl/Command+G, you can group layers together. Headers, footers, navigation, and other static components should be grouped together. This can save you time and trouble.

5. Be Consistent in Design

Consistency is key. Text should be the same color, but possibly in varying shades. Pages should be the same color as well. If each page you have is a new color, people will be thrown off or overwhelmed.

Now you know some useful tips for using Photoshop for web design. Some of these tips may be a bit obvious, but it’s good to remember nonetheless. Overall, Photoshop isn’t too hard to learn, but it can be hard to master. Hopefully your skills improve with these suggestions.

Best Parallax Scrolling Websites

Union Square Design Design, Web Design

We’ve compiled a list of the best parallax scrolling websites, for design inspiration. What is parallax scrolling? Well, it’s a cool way to animate your website. In a previous blog, we talked about parallax scrolling, and how it has become popular to use in web design. So without further ado, here’s the best of the best.

1. Anton & Irene — Designers and Artists

parallax scrolling websites anton & irene — Anton & Irene Homepage

Anton & Irene have created an incredibly interactive website. There is parallax scrolling, as well as hover animation. Visitors can play around and stay engaged, while still learning about their services.

2. Music.Agency — Branding & Communication Agency

parallax scrolling websites music.agency — Music.agency Homepage

The company Music.agency has a user-friendly and interesting website. The parallax scrolling isn’t too overwhelming. Also, the website loads very quickly. Sometimes having a parallax scrolling website can increase load time, but not on this one.

3. Petar Stojakovic — Brand Design and Art Direction

Petar Stojakovic parallax scrolling websites — Petar Stojakovic Homepage

Artist Petar Stojakovic has created an extremely creative personal website. There is hover animation as well as parallax scrolling. The hover animation is done best of all, but the parallax scrolling is a nice, yet subtle, touch.

4. Jess & Russ — A Wedding Invitation

Jess & Russ parallax scrolling websites — Jess & Russ Homepage

Jess & Russ tells an enchanting story of two creative individuals who fall in love. Both of them are designers, so there’s no wonder why this website is done so well. The parallax scrolling is a great way to tell an engaging story. It’s much more effective than, for example, a slideshow.

5. Seattle Space Needle — The Tourist Attraction

Seattle Space Needle parallax scrolling websites — Seattle Space Needle Homepage

Last but certainly not least on this list is the website for the Seattle Space Needle. This might be the coolest website for a tourist attraction. As you scroll upward, you travel up the space needle. The design is really quite amazing.

So, these are some of the best parallax scrolling websites that we’ve come across on the Internet. Hopefully these sites have given you some inspiration for your own website.