7 UX rules to improve WordPress website

A bad web design and layout will turn users away. Nobody will appreciate your ideas, products, or services if users rated the content as not relevant. They will bounce and fast. In this blog, I present to you 7 UX rules that affect your website user experience.

1. Useful

If your content on a website is not useful for users, they will leave your website in seconds. Non-useful sites won’t be beneficial for the users. Your website will be competitive only if your content will be competitive. This first of 7 UX rules will help you.
How to achieve it?
Content is a story at the center of the experience you’re delivering. Just as good design is good business, good content is good UX. Content is a more specific part of the user experience. The ideal is to have a target for your customers with your relevant content.
relevant content 1
Who can help you with this?
A UX (user experience) designer needs to understand business requirements and the technical limitations of the project. They are responsible for the experience of using your product. UX designers are user-centered, they put the user in the center of everything they do and practice various design methodologies, frameworks, and processes such as jobs-to-be-done, design thinking, and human-centered design.

2. Usable

The usability of your website depends on the ability of users to navigate it without any problems. You need to create large enough click areas, intuitive spaces where users know they can click.

Your WordPress website must be user friendly for the users with an easy way to accomplish their goal.

Have a call to action

What can your visitors expect on your website? Buy your service or product? Subscribe to the mailing list? Call to action (CTA) buttons must be clear for users. The best practice is to put text in the button, that is what users can expect. If you offer more options as CTA, the best practice is to add into your style guide obvious primary and secondary styles of the website's button. Below is an example of one of the 7 UX rules.

call to action 7 ux rules
7 UX rules to improve WordPress website 5

Another best practice is when there is in the e-shop the main call to action button with a highlight color and label ‘Add to Cart’. The button is placed in almost the center of the front view to make it more noticeable and appealing.

Make it clear to your users what you expect as their next move. Direct them to their goals and don't make it complicated. A big part of UX is the functionality of a CTA. The fewer the steps you will create, the better. A simple sign-up form is enough, it will make you and the user happy. 

Have a clean and simple design

Content is important for most customers because they are looking for useful products or services. If they are bombarded with garish web design and find nothing valuable, they probably run away.

95% of the information on the web is written language. UI designers should be good enough in the typography. Your typography on the website needs to be responsive which means to have good readability on any device. A style guide helps you to navigate the hierarchy of typography in your WordPress website.

style guide 7 ux rules
7 UX rules to improve WordPress website 6
Who can help you with this?

UI (user interface) designers are responsible for creating a cohesive style guide and ensuring that a consistent design language is applied across the website/product/service. Maintaining consistency between visual elements, such as typography and color scheme.

3. Findable

This is an important rule of 7 UX rules. Your website, including your content, must be easy to find in search engines. If the users can’t find anything when they land on your page, how do you expect them to keep reading your content or buy something? You need to improve SEO (Search Engine Optimization).

Rank Math is one of the best SEO plugins for WordPress. It can teach you how to improve your long-tail keywords, description, etc.

impro seo 7 ux rules
Include easy-to-find contact info

Users mostly want to know who you are and how to contact you. Start by making yourself and your company transparent and easy to contact. Do not make the information hard to find, do not make users scroll to the bottom searching for a 'Contact Us' link. Put this on your primary navigation menu and make it easy to find.

Make social sharing easy-peasy

Users love to use social media to follow, like, Tweet, share, etc. So, let them easily share content from your website.

The key to increased social sharing is to make the icons visible in a place, that they can expect. In the header space is a popular choice, near the navigation bar is great, in the sidebar is obvious, at the top or bottom of posts is expected.

Speed up your site

Sometimes you have only 2-3 seconds to engage the customer. Many users don’t have the patience for slow loading websites. To make your website faster, you will need to use:

  1. A good hosting service, 
  2. Install a caching plugin,
  3. Optimize your website's theme, images, coding, and framework,
  4. Delete plugins that you don’t use.
3 seconds to engage the customer 7 ux rules

4. Credible

The importance of credibility is similar to the importance of first impressions. If a user doesn’t trust your product, he will not stay on your website and don't buy your product. Failure will write into the user’s memory and don’t give your product a second chance, especially if a market has many alternatives.

Credibility relates to the ability of the user to trust the product that you’ve provided. It is nearly impossible to deliver a user experience if the user thinks the product creator lies.

On the other hand, if a user sees your product or brand as credible and trustworthy, the user experience will be pleasant even if the product is not perfect.

If your users trust you and your product, then they will remain loyal to your business. Loyal customers are incredibly useful for business growth, helping increase profits through word of mouth and referrals. This rule of 7 UX rules will help you with your business.

How can the users trust you in a few seconds?

The best practice is to use real testimonials, images of your team certificates, or logos of your clients in the header section. 

5. Desirable

Apple makes special smartphones. They are usable, findable, and trusted products. Everyone in the world wants an iPhone, nevertheless, that price is so high.

Apple is convinced that they offer the best phone in the world, and they know how to brand that on their website.

Make sure that you nail the copywriting. If you know you got what your customers need, don’t sell the specifications and stats. Sell the feeling and attract the users. 

The desirability of your brand should be conveyed in your design, logo, images, elements, and overall aesthetics. The more appealing your website is, the higher your user retention will be.

6. Accessible

Web accessibility is all about allowing any users to navigate your website. Your website should be easy to use for everyone. Accessible web design is mandatory.

Be mobile-friendly

Making your website mobile-friendly by using a responsive code makes users on the go happy. They won't have to twist their phones around to see your site, scroll right and left and up and down. They need to navigate from page to page with the ease of a desktop experience. It just makes sense. Think about this rule, one of the 7 UX rules.

Create easy navigation

There is nothing worse than visiting a website and have no idea how to find anything that can navigate me. The goal of your website is to never make your visitors work for the information.

Give your visitors a reason to stay and see what your website has to offer. The easier it is to navigate, the longer they will stay.

7. Valuable

The product must have a delivery value. Without value will not be product successful. Ask yourself, what value can bring my product/service to my customers?

Designers should have in mind, that value is one of the key influences on purchasing decisions. A 50 € product that solves a 5 000 € problem is one that is likely to succeed.

Do you need help to apply 7 UX rules to your website?


Image and Video sizes for Social Media

Are you still looking for Image and Video sizes for social media? There is a great solution for you 😉

Updated 18. March, 2020

Top 10 Blogs about UX in 2015

Many times you've heard about important rule of UX - User Experience. But where you can find source of high quality information to study UX? You're at right place. These are (not only my) top 10 high quality blogs about UX in 2015.



They believe that people are more important than technology. That’s why they started this business in the first place—to rid the world of confusing, hard-to-use interactions and interfaces through quality design education. We write articles, ebooksnewsletters, host podcasts, and teach in-person workshops that are fun, practical, and highly regarded by industry. Stay up to date by following Twitter or Facebook, or by subscribing to regular email newsletter.



This site is dedicated to exposing the most engaging topics surrounding user experience, usability, user interface, and web design; it is a place where those, who are passionate about the burning issues surrounding the UX niche, may express their opinions, share their knowledge, or simply absorb valuable content in a laid-back and comfortable manner. They are offer free e-book or stay up to date by following FacebookTwitter or Google +.



UX Magazine is a free community resource exploring all facets of experience design. We work closely with practitioners and industry leaders versed in all areas of UX to provide a steady stream of engaging and useful content.

As they field continues to grow in size, implementation, and scope, we’re putting a premium on resources that explain at how UX fits into technological endeavors, customer experience strategies, project planning, and organizations of every stripe. In partnership with our Design for Experience initiative, we’re also working to broaden and deepen the conversations and thinking surrounding user-centered research and design.

Stay up to date by following FacebookTwitterGoogle + or try Newsletter. They also have UX job portal and organize regularly events for UX specialists.



The UX Booth is a publication by and for the user experience community. Our readership consists mostly of beginning-to-intermediate user experience and interaction designers, but anyone interested in making the web a better place to be is welcome. If you’re interested, join us and discuss best practices and trending topics, or share your experiences.Stay up to date by following Twitter or RSS Feed.



They've created UX Myths to serve as a reference for site owners and designers. They goal is to provide evidence in user experience design that can help stakeholders move away from design decisions that are based merely on beliefs and personal opinions. But you should still do your own research, check how your design performs. They've collected a lot of research data, as well as facts, quotes and articles from well-known designers and web experts in order to debunk the common web design misconception. Stay up to date by following Twitter or you can and download & print poster to share creator's ideas.

Usability Geek


Justin Mifsud, founder of UsabilityGeek started this blog way back in June 2011 as a personal hobby so as to evangelize about the importance of website usability. The whole concept revolved around the idea that although poor usability has commercial and legal implications, I had noted that very few web designers and developers are aware of this. Thus I had created UsabilityGeek as a means to bridge theory and academic research with practical and personal recommendations on how one can improve website usability.

Since then, UsabilityGeek has evolved to cover a wider array of topics that extend beyond usability, such as User Experience (UX), conversion, Human Computer Interaction (HCI) and Information Architecture (IA). Another important development was converting the blog into a platform that accepts guest posts from people who share a common love – that of creating a great user experience. Stay up to date by following Twitter or Newsletter.

Studio by UX PIN

Screen Shot 2015 11 13 at 13.18.297 2

UXPin is a design platform that makes it easy to go from static design to fully animated prototypes - without any code. Everyone can comment directly on designs. These guys have really good blog about UX. Stay up to date by following Facebook or Twitter.

Smashing magazine

Screen Shot 2015 11 13 at 13.18.298 2

Smashing Magazine delivers useful and innovative information to Web designers and developers. They aim is to inform our readers about the latest trends and techniques in Web development. They try to persuade you not with the quantity, but with the quality of the information they present. Smashing Magazine is, and always has been, independent. Stay up to date by following TwitterFacebook or RSS Feed.

Invision app blog

Screen Shot 2015 11 13 at 13.18.299 2

They help companies of all sizes unlock the power of design-driven product development. InVision gives teams the freedom to design, review, and user test products—all without a single line of code. With intuitive tools for prototyping, task management, and version control, it's your entire design process, all in one place. Stay up to date by following Google +Twitter and RSS Feed.

Boxes and Arrows

Screen Shot 2015 11 13 at 13.18.2911 2

Boxes and Arrows is devoted to the practice, innovation, and discussion of design; including graphic design, interaction design, information architecture and the design of business. Since 2001, it’s been a peer-written journal promoting contributors who want to provoke thinking, push limits, and teach a few things along the way.Stay up to date by following RSS Feed.

Photoshop Etiquette: QA & Exporting

The final part of Photoshop ethical rules. Follow them and you will have well organized workflow.


Ever hear of the term “being too close to a design”? While knee-deep in pixels, it’s easy to miss some glaring mistakes. Employ some quality assurance.


Get someone else’s eyes on your comp before it goes out to eyes who will undoubtedly find your grammatical mistakes. It’s easy for a designer to overlook things like misspelled headlines when you're focused on individual pixels.

Screen Shot 2015-10-05 at 19.52.45

Compare against Wireframes:

Client: “Where'd my logo go?” You: “Oh, so you wanted that to stay?” = compromised expectations = no-no. It’s easy to go in to auto-pilot when you’re in Photoshop. Just make sure you’re not forgetting anything that was originally agreed upon in the wireframes.

Screen Shot 2015-10-05 at 21.22.53

Account for all Images:

A website using watermarked stock photos is like leaving the tag on a shirt you just bought.

Screen Shot 2015-10-05 at 21.25.50

Be Familiar w/ Browser Compatibility:

Knowing browser limitations should come standard with the “Web Design 101” package. Browsers each render content differently, but more importantly, there are some that don’t take advantage of CSS3, or basic PNG transparency (ahem, IE6).

Screen Shot 2015-10-05 at 21.58.53

Be Consistent:

Are you unintentionally using 3 slightly different blues? Is your red the same one as their logo? Unless intentional, it’s painstaking to have to eyedrop 10 different blues all trying to be the same value, but aren’t.

Screen Shot 2015-10-05 at 22.07.16


One thing’s for certain: if your job is to export images from your PSD, it’s something you only want to have to do once. Don’t overlook this step in the process.

Save for Web:

Simply choosing ’Save As > JPEG’ will get you bigger files, color issues and a world of hurt from your dev. Save for Web (& Devices) is geared towards properly compressing your image to be used on the web. “Save As” is not.

Screen Shot 2015-10-05 at 22.15.29

Conserve File Size:

Go old school: negotiate quality/colors used to make smaller files. Yep, it's still relevant. With your images being delivered over all kinds of networks to all kinds of devices, proper compression and small file sizes are incredibly important.

Screen Shot 2015-10-05 at 22.19.04

Name Files for Function:

“blue_square3.jpg” doesn't give the developer much indication where it should go. Except the trash. This goes along with “Name Files Appropriately”, since the goal is to be as clear as possible with what the file is, as simply as possible.

Screen Shot 2015-10-05 at 22.23.34

No Unnecessary Space:

No need to build in extra margin or padding for layout purposes. That's what CSS is for. CSS excels at being easy to adjust positioning. Photoshop's workflow (Open --> Nudge --> Save for Web)? Not so much.

Screen Shot 2015-10-05 at 22.25.52

Make a Retina Version:

When possible, make sure you've got those fancy hi-dpi screens covered. iOS devices are almost exclusively “Retina”. More devices are sure to follow.

Screen Shot 2015-10-05 at 22.29.40



8 Reasons for WordPress

People often make the mistake of classifying WordPress as just a blogging platform. Although that used to be true in the past, WordPress has evolved through out the years into a versatile content management system (CMS). While you can still use WordPress to create a simple blog, now it also allows you to create fully functional websites and mobile applications.

The best part about WordPress is that it’s easy to use and flexible enough for just about anything. That’s the main reason why WordPress has grown so much in popularity. Recent survey shows power of WordPress is 22.5% of all websites on the internet.

Due to it’s robust features, many of the top brands use WordPress to power their websites including but not limited to: Time Magazine, Google, Facebook, Sony, Disney, LinkedIn, The New York Times, CNN, eBay, and more.

Let’s take a look at why you should use WordPress.

1. Wordpress is free

WordPress is a free software, this means you are free to download, install, use and modify it. You can use it to create any kind of website. It is also open source which means the source code of the software is available for any one to study, modify and play with.

There are currently 2600+ WordPress themes and 31,000+ plugins available for free. You can download, install and use them on any website.

2. User friendly

WordPress is used by millions of people and almost every day new people are joining the WordPress community by creating their first WordPress powered websites. The reason why people quickly adapt to WordPress is because it is fairly easy to use.

For any WordPress related issue, you can search on Google or WordPress community websites like a wpbeginner and you will definitely find help.

3. Ways to use WordPress

WordPress can be used in many different ways. It is open to possibilities. You can use WordPress as the following:

4. Easy to customise

Most people using WordPress are neither web designers nor programmers. As a matter of fact most folks start using WordPress without any prior knowledge of designing websites.

The reason why WordPress is such an ideal candidate is because there are thousands of free templates (themes) to choose from, so you can give your website any look you want.

WordPress themes are easy to customise because a lot of them come with their own options panel allowing you to change colors, upload logo, change background, create beautiful sliders, and do other cool things with your website without ever writing any code at all.

WordPress is super flexible and can be extended by using plugins. Just like themes, there are thousands of free and premium plugins available for you to use. Not only these plugins can add extra functionality to WordPress, there are lots of plugins which can add a whole new platform to your WordPress site.

5. WordPress is Search Engine Friendly

WordPress is written using standard compliance high quality code and produces semantic mark up which makes your site very attractive to search engines.

By design WordPress is very SEO friendly, and you can make it even more SEO friendly by using WordPress SEO plugin.

6. WordPress is Easy To Manage

WordPress comes with built-in updater that allows you to update your plugins and themes from within your WordPress admin dashboard. It also notifies you when there is a new version of WordPress is available, so you can update it by just clicking a button.

7. WordPress is Safe and Secure

WordPress is developed with security in mind, so it is considered quite safe and secure to run any website. However, just like the real world, the internet can be an uncertain place.

There are intruders out there who want to get their hands on as many sites as they could. Sucuri is one of best security monitor and I recommend it.

8. WordPress Can Handle Different Media Types

Using WordPress you are not just limited to writing text. It comes with built-in support to handle images, audio, and video content. You can also use for document or file management.

WordPress supports oEmbed enabled websites which means you can embed YouTube videos, Instagram photos, Tweets, and Soundcloud audio by just pasting the URL in your post. You can even allow your visitors to embed videos in comments.



Adobe Illustrator: Basics of drawing

We will look at how to use the shape tools to draw basic shapes in illustrator. But first is good to know how to how to select a basic shape so that you have no problems in selecting and editing shapes in Illustrator.

Selection Tools

Selection Tool: Used for selecting and moving a shape. It can also be used to resize a shape.

Direct Selection Tool: Selects a single anchor point instead of the whole shape. Used for editing anchor point of a shape. Click once on a point to select and hold Shift to select multiple anchor points.



Now we will move on to the Shape Tools. Go to the Tool Palette and hold the Rectangle Tool. Will expand a list of shape tools to pick. Choose Rectangle Tool.

Screen Shot 2015-06-09 at 17.44.53

Fill & Stroke

Click and drag out a Rectangle as shown. By default, it has a white fill and black stroke. (Stroke is the border of the shape)


Changing Fill Color

Click the Fill from the Tool Palette. It will pop up the Color Picker. Drag the slider to blue and select a deep blue color. Click Ok after that.

Screen Shot 2015-06-09 at 17.59.42

Removing Stroke

Click the Stroke in the Tool Palette once to swap it above Fill. Click the None icon boxed up in red to set the Stroke to None. The black stroke will disappear.


Constrain Proportions

To draw a perfect square, we will select the Rectangle Tool. Hold Shift and drag to draw a square. Same for the circle, we will select the Ellipse Tool and hold Shift to drag out a circle.

Screen Shot 2015-06-09 at 18.18.48

Resizing Shapes

To resize shapes, select the shape using the Selection Tool and a bounding box will appear. Drag the corner anchor point to resize it. To constrain to proportion while resizing, hold Shift as you resize. Also hold Alt/Option if your want to resize from the same position.

Screen Shot 2015-06-09 at 18.19.14

Rotating Shapes

Select the shape with the Selection Tool and a bounding box will appear. Move your cursor near the anchor corner and a rotation icon will icon, click and turn it to rotate the square. To snap at 45 degrees increment, hold Shift and turn.


More Options for Shape Tools

Select the Star Tool. Click once on the artboard and an option will pop up. Enter the same values below and click Ok. It will draw a star burst shape. This method can be used to bring out more options for shape tools.Screen-Shot-2015-06-09-at-18.21.21

Pencil tool

We can quickly draw shapes and lines quickly using the Pencil Tool. I will show you some of the tricks in drawing smooth and fluid lines.

Drawing a Line

Select the pencil tool and click and drag to draw a free hand line drawing.

 Screen Shot 2015-06-10 at 10.39.45

Closing Paths with Pencil Tool

To close a path, hold Alt/Option as your Pencil Tool reaches the start point. A circle icon will appear next to the Pencil Tool to indicate path closure.

Screen Shot 2015-06-10 at 10.41.55

Smoothing Jaggy Lines

Normally when you draw with the Pencil Tool, the path looks jaggy. To smoothen the parts that are jaggy, simply hold Alt/Option to turn the Pencil Tool to Smooth Tool. Then draw over the the area of the lines which you would like to smoothen.


Reshaping Path

To reshape a path, make sure your path is selected and use the Pencil Tool to redraw the parts you would like to reshape. Note that the start and end path must be close to the original path to make it work.


Pencil Tool Preferences

You can turn on the Pencil Tool Preferences by double clicking on the Pencil Tool. You can change the fidelity and smoothness to find a combination that works for you.

Fidelity: Determines how close the path is drawn to your mouse movement. Set it at a higher fidelity if your not good at drawing with your mouse.

Smoothness: The higher you set for smoothness, the less anchor point it produces. Thus, producing a smoother line.Screen Shot 2015-06-10 at 11.21.20

Pen tool

Drawing Straight Lines

Select the Pen Tool and click once to add the first anchor point. Move your mouse to the next position and click again to create the second point. The two anchor points will be connected together. Continue doing this to create a W shape as shown. To draw a new line, click the Selection Tool (The Black Arrow Icon) and click back the Pen Tool again.

Screen Shot 2015-06-10 at 11.51.06

Closing a Path

To close a path, click back the starting point to close the shape.


Drawing a Curved Line

Click and drag to put out the handles to create a smooth anchor point.


Changing Path Directions

Click and drag to create a smooth anchor point. Without releasing your mouse, hold Alt/Option and drag the handle up to change the path direction.


Drawing a Circular Path

Click and drag to create a smooth anchor point. Continue adding points and click back the starting point to close the path.


Adding Anchor Points

With the Pen Tool selected, go near the path where you want to add a new anchor point. A plus sign will appear next to the pen, click on the path to create a new anchor point.


Removing Anchor Points

To remove point, move your Pen Tool close to an anchor. A minus sign will appear next to the pen. Click on the anchor point to delete it.


Converting Anchor Points

To convert a smooth anchor point to a sharp anchor point, move your Pen Toolnear the anchor and hold Alt/Option and your Pen Tool will change to an arrow shape. Click on the smooth anchor to convert it to an anchor point. Click and drag on the anchor point again to change it back to a smooth anchor point.


Moving Anchor Points

Select the Direct Selection Tool and click and on anchor you want to move. Click and drag to change positions.


Changing Anchor Directions

With the Pen Tool, you can quickly change the anchor directions. Hold Ctrl/Command to quickly change the Pen Tool to Direction Selection Tool. Select the anchor point you want to edit. The anchor handle will appear. Now release Ctrl/Command and hold Alt/Option to change it to Convert Anchor Tool. Click and drag the handles to change the direction.

Screen Shot 2015-06-11 at 13.29.29

Photoshop Etiquette: Effects & Practices

Third part of Photoshop ethical rules. You should follow them if you want to have well organized workflow.


Please use effects and filters in moderation. PSD inheritors will have less to sort through, and in most cases, more filters ≠ better design.

Use Color Overlays Appropriately:

It’s much easier to navigate the layer panel with color thumbnails that represent the color of the elements on the canvas.

Screen Shot 2015 05 25 at 22.27.10 2

Nail Tile able Images:

A slightly-off repeating image is incredibly noticeable. It’s worth the time to get it right.

Screen Shot 2015-05-25 at 22.28.05

Easy Does It:

Without knowing how an image translates to CSS, you could be greatly limiting its use by loading it up with effects.

Screen Shot 2015-05-25 at 22.29.52


Gradients are meant to be smooth, and like everything else, it’s better to get it right the first time.

Screen Shot 2015-05-25 at 22.32.14

Know Your Strokes:

Using outside strokes when you really meant to use inside strokes could affect the overall width of a shape.

Screen Shot 2015-05-25 at 22.33.13


Not that any of the following guidelines will automagically make you a better designer, but they'll help your approach to working in Photoshop for certain. Just five of the many considerations you can be making.

Use a grid:

Grids help guide (pun intended). Establishing a system of heights, widths and alignment for your design is essential.

Screen Shot 2015-05-25 at 22.37.03

Use Drop Shadows Gracefully:

Drop shadows, like other effects, need to be altered from the Photoshop default settings in order to look realistic or sophisticated.

Screen Shot 2015-05-25 at 22.39.45

Use Web fonts:

Besides the amazing selection to choose from, webfonts are the norm. Not the norm? Text as images.

Screen Shot 2015-05-25 at 22.44.34

Consider Device Width:

It’s best to design with the mindset of how things will adapt to different widths, as opposed to hoping everything plays nice after the fact.

Screen Shot 2015-05-25 at 22.46.04

Use Licensed Icons/Photos:

Google Images is *NOT* a resource for stock photography. Examine use agreements before using icons and the like.

Screen Shot 2015-05-25 at 22.47.43



Photoshop Etiquette: Images & Type

Another part of Photoshop ethical rules. You should follow them if you want to have well organized workflow.


Working with images is all about being non-destructive. You certainly don’t want to limit the shelf life of a photo or button by recklessly adding irreparable filters or effects.

Don't stretch or flatten buttons:

Best case scenario: keep your shapes vector. Otherwise, keep a copy of the vector before rasterizing.

Screen Shot 2015 04 17 at 23.36.53 copy 2

Globalize masks:

It's always better to only have to edit one mask than multiple masks.

Screen Shot 2015-04-18 at 09.37.35


When you’re consistently off by a pixel, somebody has to go in and align things correctly. Shouldn’t it be you?

Screen Shot 2015-04-18 at 09.47.58

Use blending modes:

It’s difficult to figure out what the hex value of your mashed-up color is. Make it easy.

Screen Shot 2015-04-18 at 16.44.26

GO non-destructive:

Use Masks, Smart Objects & Adjustment Layers to avoid forever deleting precious pixels.

Screen Shot 2015-04-18 at 17.02.34


There’s no getting around using type in Photoshop, no matter how dissimilar the text rendering is to what happens in browser. What you can control, however, are the values and areas you use text.

Use whole pixel values:

Consistency in your typesetting is key. It rarely makes sense to use fractions and decimals in Photoshop.

Screen Shot 2015-04-18 at 17.18.44

Make licensed fonts available:

There's nothing worse than needing to edit type and not being able to because you don’t have the fonts.

Screen Shot 2015-04-18 at 17.21.11

Don't stretch type:

Beyond not being able to do it programmatically, I doubt the typographer intended for their type to be squished or stretched.

Screen Shot 2015-04-18 at 17.28.33

Control your text boxes:

Longer-than-necessary text boxes can prohibit selecting text that’s behind it and can be frustrating to work around.

Screen Shot 2015-04-18 at 17.33.17

Use separate text boxes:

It takes more clicks to find the font family and size of multiple types of text within one text box than it does to do so on an individualized, singular text box.

Screen Shot 2015-04-18 at 17.35.57



Photoshop Etiquette: Files & Layers

Why is it good to follow Photoshop Etiquette?  It's the way of improving clarity of your work. If you want to be a high quality designer, it's very important for you. You will be work with colleagues and they maybe will hate messy PSD's files (like me :D). It's important to have some rules to achieve better workflow. Yeah, I can use Command (or Control in Windows) to choose layer what I want to, but I have still feeling that it's like a "work on junkyard". It's stinking, It's annoying and it's wasting time when you are looking for layers which you need merge into group, but the layers are far apart.

If you will working with messy PSD, this is the fastest way how work with it. Use move tool (v) and click on layer what you need with this setting in auto-select:

Screen Shot 2015-03-14 at 08.06.11

But Photoshop Etiquette is not only about layers and groups. It's about all workflow with designing something. It's about to have clean and clear workflow.


Consolidate your PSD:

Keeping everything in one PSD reduces the confusion of which file to use.

Screen Shot 2015-03-14 at 07.49.30 copy

Name Files Appropriately:

Ironically, absolutes like “Newest” and “Latest” are bound to have edits later. It's best to just keep a general file name.

Screen Shot 2015-03-14 at 08.42.29 copy

Store Assets Relative to PSD:

PSD inheritors shouldn't have to go hunting to find original assets. Proximity is key to avoiding wasted time.

Screen Shot 2015-03-14 at 08.49.39 copy

Make a template for UI elements

It's better to have control over how the UI elements look than using browser defaults. You're most likely going to be asked to design them at some point anyways.


Files on Server/Share

Having to be asked where you put a file is common, but it shouldn't be necessary if you learn to put it on a file share before even being asked.



Name Layers & Be Accurate

The quintessential piece of etiquette: naming your layers instantly decreases confusion and improves acclimation to an otherwise unfamiliar document.

Screen Shot 2015-03-14 at 18.50.27

Use Folders

Happy layers have happy homes. Folders group like-items for easier navigation and editing.


Delete Unnecessary Layers

Having too many layers hanging around usually results in an unnecessary bloat of file size and can affect performance.

Screen Shot 2015-03-14 at 18.57.15

Globalize Common Elements

If you use an element (logo, photo, etc.) in multiple layouts within the PSD, only having to edit it in one place makes a lot of sense.

Screen Shot 2015-03-14 at 19.03.53

Use Layer Comps/Smart Objects

Layer Comps & Smart Objects offer a way of showing multiple states or layouts without needing to build (and maintain) another PSD.

Screen Shot 2015-03-14 at 19.05.05



Games for Graphic Designers: volume 2

It's Friday and you are probably tired from lot of work that you did this week. You need some fun for few minutes before you go home to enjoy weekend. You are on the right page. These are the games for graphic designers.

1. Pixel game

This is game will test you how well you know your pixels. Draw a box that matches the dimensions given and receive a score based on how close you are. Sounds easy, right? 🙂

Screen Shot 2015-02-10 at 09.46.47


2. Shape method

Your mission in this game is make right shape of every letter what to get. Game has 10 levels. After click compare button it will show similarity in percents. So you can compare your results with your colleagues.

Screen Shot 2015-02-09 at 12.57.35


3. Shot the serif

“I shot the serif, but I didn’t shoot the sans-serif.” Your goal is shoot only the serif fonts within the available time to move onto the next stage. Finish all five stages to get promoted. Complete all stages as “Director” level to beat the game. Try not to make too many mistakes!

Screen Shot 2015-02-10 at 17.37.05


4. Color Challenge

How well do you see color? Can you put together these color squares in solid gradient of two colors?  Take the online color challenge, based on the Farnsworth Munsell 100 Hue Test.

Screen Shot 2015-02-10 at 17.35.04


5. RagTime

But first, what is rag (in plural rags)?

Rags in page layout and typography are the uneven edges of text in a paragraph that is aligned on one side. When setting a block of text unjustified with a left or right alignment, be sure to keep the rag (the uneven side) balanced without any “holes”. The Rag Time game challenges you to fix a bad example of ragged text and make it perfect. Your enemy will be time, so make the best rags as you can.

Screen Shot 2015-02-10 at 10.04.31Screen Shot 2015-02-10 at 09.57.15


6. ExerSize Game

The ExerSize game trains visual intelligence. The game practices analyzing relationships between spaces. Visual intelligence is a key skill that helps in diverse areas of life: from sports to architecture. By turning this practice into a game, we can improve our ability and become more effective problem solvers, creators, and humans.


exersize 1
Games for Graphic Designers: volume 2 89