Are you still looking for Image and Video sizes for social media? There is a great solution for you 😉
Updated 18. March, 2020
Are you still looking for Image and Video sizes for social media? There is a great solution for you 😉
Updated 18. March, 2020
If you want to build simple WordPress web site, you need to get the user experience basics right. A bad web layout and design will turn any person away. No one will appreciate your ideas, awesome products, or high quality services because they will bounce, and fast.
Function over design will always win. How you present your website to your visitors will affect your website's success. When someone visits your website, they expect to get something useful out of that visit. If they are bombarded with garish web design and find nothing valuable to take away, you better believe they won't return.
Try using a simple WordPress theme, formatting with proper sub-headings, bullets, lists, and focusing on a neat typography.
There is nothing worse than visiting a website and have no idea how to find anything what can navigate me. The goal of your website is to never make your visitors work for information.
Include an obvious navigation bar, (create a categories list in the sidebar,) make sure you have a search box, and don't forget the breadcrumbs. Give your visitors a reason to stick around and see what your website has to offer. The easier it is to navigate, the longer they will stay.
We all know by now that mobile-friendly websites are a must these days. Making your website mobile-friendly by using a responsive theme 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, and they will be able to navigate from page to page with the ease of a desktop experience. It just makes sense.
If your website doesn't load within three seconds, say bye-bye to your visitors. People have no patience for slow loading websites. There are several ways to make your website faster than ever. Use a good hosting service or even a content delivery network (CDN), install a caching plugin, optimize your website's theme, images, coding, and framework, limit the use of plugins, and consider showing only excerpts of content so the pages load quickly.
Do your website visitors know what you expect of them once they are on your website? Should they buy something? Subscribe to a mailing list? Download a giveaway?
Make it immediately clear to your users what you expect their next move to be. Point directly to it and don't make it complicated! A large part of user experience is the functionality of a call to action. The fewer the steps involved, the better. A simple sign-up form will suffice and make both you and the user happy.
Website users love social media. They follow, like, Tweet, share, +1, and so much more every single day like their lives depend on it. So, it would make sense you would encourage them to do the same on your website.
The key to increased social sharing is to make the icons visible and place them in an expected place. 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, or even better make the icons floating and let them follow the user as they read your content.
You would be surprised at how many great companies leave the contact information at the bottom of their website, in print so small you need a magnifying glass to see it. I mean, seriously? Users want to know what your company is all about. They want to know who you are, what you stand for, 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, do not make them click through a bunch of pages to get to the contact form. Put these things on your primary navigation menu and make it easy.
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, ebooks, newsletters, 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 Facebook, Twitter 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.
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.
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.
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 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 Twitter, Facebook or RSS Feed.
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 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.
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.
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.
A website using watermarked stock photos is like leaving the tag on a shirt you just bought.
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).
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.
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.
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.
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.
“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.
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.
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.
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.
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.
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.
WordPress can be used in many different ways. It is open to possibilities. You can use WordPress as the following:
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.
WordPress is written using standard compliance high quality code and produces semantic mark up which makes your site very attractive to search engines.
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.
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.
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.
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 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.
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)
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.
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.
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.
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.
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.
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.
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.
Select the pencil tool and click and drag to draw a free hand line drawing.
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.
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.
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.
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.
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.
To close a path, click back the starting point to close the shape.
Click and drag to put out the handles to create a smooth anchor point.
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.
Click and drag to create a smooth anchor point. Continue adding points and click back the starting point to close the path.
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.
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.
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.
Select the Direct Selection Tool and click and on anchor you want to move. Click and drag to change positions.
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.
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.
It’s much easier to navigate the layer panel with color thumbnails that represent the color of the elements on the canvas.
A slightly-off repeating image is incredibly noticeable. It’s worth the time to get it right.
Without knowing how an image translates to CSS, you could be greatly limiting its use by loading it up with effects.
Gradients are meant to be smooth, and like everything else, it’s better to get it right the first time.
Using outside strokes when you really meant to use inside strokes could affect the overall width of a shape.
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.
Grids help guide (pun intended). Establishing a system of heights, widths and alignment for your design is essential.
Drop shadows, like other effects, need to be altered from the Photoshop default settings in order to look realistic or sophisticated.
Besides the amazing selection to choose from, webfonts are the norm. Not the norm? Text as images.
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.
Google Images is *NOT* a resource for stock photography. Examine use agreements before using icons and the like.
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.
Best case scenario: keep your shapes vector. Otherwise, keep a copy of the vector before rasterizing.
It's always better to only have to edit one mask than multiple masks.
When you’re consistently off by a pixel, somebody has to go in and align things correctly. Shouldn’t it be you?
It’s difficult to figure out what the hex value of your mashed-up color is. Make it easy.
Use Masks, Smart Objects & Adjustment Layers to avoid forever deleting precious pixels.
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.
Consistency in your typesetting is key. It rarely makes sense to use fractions and decimals in Photoshop.
There's nothing worse than needing to edit type and not being able to because you don’t have the fonts.
Beyond not being able to do it programmatically, I doubt the typographer intended for their type to be squished or stretched.
Longer-than-necessary text boxes can prohibit selecting text that’s behind it and can be frustrating to work around.
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.
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:
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.
Keeping everything in one PSD reduces the confusion of which file to use.
Ironically, absolutes like “Newest” and “Latest” are bound to have edits later. It's best to just keep a general file name.
PSD inheritors shouldn't have to go hunting to find original assets. Proximity is key to avoiding wasted time.
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.
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.
The quintessential piece of etiquette: naming your layers instantly decreases confusion and improves acclimation to an otherwise unfamiliar document.
Happy layers have happy homes. Folders group like-items for easier navigation and editing.
Having too many layers hanging around usually results in an unnecessary bloat of file size and can affect performance.
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.
Layer Comps & Smart Objects offer a way of showing multiple states or layouts without needing to build (and maintain) another PSD.
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.
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? 🙂
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.
“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!
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.
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.