Creating a Packed Addons- Plugin for Word – Press.

In this post, we will learn the way to keep especial function from presentation which is a WordPress theme the best development practice.

Theme – Development – Logic

We learnt many things which help us success in the market through selling WordPress themes on Theme- Forest for more than four years.

The production speed is the main benefit of separating development logic: creating quality themes is quicker, you can generate more income. Keeping function in a special plugin is helpful when it comes to updates. Suppose that: on Theme – Forest, you have 10 themes and you want to add new function to make an update, when you have all functions which are in a simple plugin, you just need to update once in the board.

Therefore, you should attend to Word – Press’ plugin and theme system if you want to create powerful themes and earn more money.

Functionality – Types

This is a list of key constituents which we typically keep separate from theme files:

  • Theme – options – panel.
  • Page/Post extended (custom fields).
  • Custom for widgets.
  • Custom for short – codes.
  • Custom for post types.
  • Custom for extra functions.

In this article, we will not say too detailed and clear. But we will show and explain how to pack all those constituents into an addons plugin.

OK! Let’s Begin

Creating a new folder with the name of your packed plugin in your “wp-content > plugins”. You should use a self-explanatory name, for instance, our addons plugin has name “ninzio-addons” (“Ninzio” is the name of my company.)

Note: pay attention toavoid use an underscore in the folder name! If needed, let use a dash.

Next, you have to create a “.php” file with the same name like your folder in that plugin folder,such as in above example, there would be “ninzio-addons.php” (note: no underscore). Open that file and add Doc- Block header comment:

(Link: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/php/#docblock-formatting)

  1. /**
  2. Plugin Name: Your plugin name
  3. Plugin URI: your plugin url
  4. Text Domain: text-domain
  5. Domain Path: /languages/
  6. Description: Short description of the plugin
  7. Author: Author name
  8. Version: 1.0.0
  9. Author URI: author uri
  10. */

And here is the detail that we added:

  • Plugin – Name: here you should the name which is short and descriptive.
  • Plugin – URI: here you can paste your website address here.
  • Text – Domain: this is an extremely important parameter. You should name it the like your plugin folder and main file. You and your users can translate plugin strings. After that we consider how to translate a packed addons plugin.
  • Domain – Path: for plugin translation, this parameter is very important, too. It is relative to the language file folder. Go to your addons plugin folder and create an empty folder which is called “languages”. Let’s it empty and we will create the language file later.
  • Besides, there are other parameters called “Author”, “Author URI” and “Version”, which are reasonably self-explanatory.

About The Configuration

In the main plugin file, paste this snippet after the header comment:

  1. if ( ! defined( ‘ABSPATH’ ) ) {
  2. exit; // Exit if accessed directly
  3. }

Because of security, it blocks access to the plugin file directly.

After that, you can add this code:

  1. function your_addons_load_plugin_textdomain() {
  2. load_plugin_textdomain( ‘ninzio-addons’, false, dirname( plugin_basename(__FILE__) ) . ‘/languages/’ );
  3. }
  4. add_action( ‘plugins_loaded’, ‘your_addons_load_plugin_textdomain’ );

In order to ensure that the function name is exact, we download our plugin text – domain. We advised you that use self-descriptive names with a prefix of your plugin. For instance of ninzio – addons (we can use underscores here because this is a .php function)

Let’s ensure that you are right when copying or typing the “load_plugin_textdomain” function, for exact domain parameter that we defined earlier, and for the relative path parameter plugin, enter the path to the language folder that we made earlier. Please remember that.

About The Plugin – Directory – Path

Let’s add this code in order to express your plugin directory path:

define( ‘your_addons’, plugin_dir_path( __FILE__ ));

Your “addons” are used in order to make plugin – directory – path. Now, our plugin is created, let’s fill it with custom – function. OK?

About The Theme – Options – Panel

In here, you can create a custom – board, or you can use the theme – panel – frame on the cover, because we do not use this step in order to guide the way to create an option – panel for a theme.

Link about option – panel – frameworks (the articles of “BonangSalemane” on Redux – Framework theme integration: https://code.tutsplus.com/tutorials/getting-started-with-redux-framework-introducing-it-and-integrating-it-into-your-theme–cms-22240?_ga=2.158820281.2066407086.1508118696-1356864547.1505722856)

Besides, to add a theme – option – panel so that your addons copy the panel – options – folder to the plugin – addons- directory, we need to request some files to activate it like this:

  1. if ( ! class_exists( ‘ReduxFramework’ ) &&file_exists( your_addons . ‘/optionpanel/framework.php’ ) ) {
  2. require_once(‘optionpanel/framework.php’ );
  3. }
  4. if ( ! isset( $redux_demo ) &&file_exists( your_addons . ‘/optionpanel/config.php’ ) ) {
  5. require_once(‘optionpanel/config.php’ );
  6. }

We required 2 main files of redux – framework in this code, there are:

  • The “framework.php”: it manages the option – panel – function
  • The “config.php file”: it is responsible for configuring the option – panel.

Our option – panel files are placed in an “option – panel” folder which is located into the ninzio-addons- plugin folder. Done.

About The Custom – Functions

Let’s create a file which is into your addons- plugin – directory and give a name, as: “addons-functons.php”. After that, give all your functions in this file.

You use the function – naming – convention, using the description – function name with a unique prefix, like this:

functionyour_addons_profile_social_links (){……}

Then, requiring your custom – functions file:

require_once(‘includes/addons-functions.php’ );

About The Custom – Widgets

Next, to create a new folder which called “widgets” into addons- plugin folder, located all custom – widgets files into the file which you created, you should use prefixes and dashes instead of underscores.

For instance, we have custom Twitter – widget file with name “ninzio – recent-tweets.php”, similarly, our Mailchimp- widget is named “ninzio-mailchimp.php”.

require_once(‘widgets/ninzio-recent-tweets.php’);

require_once(‘widgets/ninzio-mailchimp.php’);

You can check the post of BonangSalemane here: https://code.tutsplus.com/tutorials/creating-your-own-widgets-using-various-wordpress-apis-introduction–cms-22460?_ga=2.96243615.2066407086.1508118696-1356864547.1505722856

About The Custom – Post – Types and “Taxonomies”

Now you should use custom post kinds if you add a portfolio, events or anything which is similar to regular post of Word – Press, but separated from the theme.

This is a useful post of “Tom McFarlin” that I think you should read: https://code.tutsplus.com/articles/quick-tip-post-types-taxonomies-and-permalinks–cms-20345?_ga=2.91004953.2066407086.1508118696-1356864547.1505722856

You also should make a special folder for custom post types,all your files which relate to your custom post types are put in this folder. The most important include the main files, unique post files and archive files. Giving a name your custom post type main file as you have named your custom post type folder, like “ninzio-projects.php”. Locate your custom post type code into that file, you need to have the main file in order to activate your custom post type

require_once(‘ninzio-projects/ninzio-projects.php’);

As you split function, you should consider about the customers, how they can extend or rewrite custom registry – template files. Suppose that we have our custom post type which called “projects”, the single post files will be named “single-projects.php” and the archive file will have name “archive-projects.php”.

You should create a separate file for your custom post kinds if they also has custom rules. We have 3 files now:

  1. single-projects.php
  2. archive-projects.php
  3. taxonomy-projects.php

Let’s add three functions to your main – addons file, like this:

  1. function your_addons_projects_single_template($single_template) {
  2. global $post;
  3. if ($post->post_type == ‘projects’) {
  4. if ( $theme_file = locate_template( array ( ‘single-projects.php’ ) ) ) {
  5. $single_template = $theme_file;
  6. } else {
  7. $single_template = your_addons . ‘projects/single-projects.php’;
  8. }
  9. }
  10. return $single_template;
  11. }
  12. add_filter( “single_template”, “your_addons_projects_single_template”, 20 );

And this:

  1. function your_addons_projects_archive_template($archive_template) {
  2. global $post;
  3. if ($post->post_type == ‘projects’) {
  4. if ( $theme_file = locate_template( array ( ‘archive-projects.php’ ) ) ) {
  5. $archive_template = $theme_file;
  6. } else {
  7. $archive_template = your_addons . ‘projects/archive-projects.php’;
  8. }
  9. }

 

  1. return $archive_template;
  2. }
  3. add_filter( “archive_template”, “your_addons_projects_archive_template”, 20 )

And this:

  1. function your_addons_projects_taxonomy_template($taxonomy_template) {
  2. if (is_tax(‘projects-category’)) {
  3. if ( $theme_file = locate_template( array ( ‘taxonomy-projects.php’ ) ) ) {
  4. $taxonomy_template = $theme_file;
  5. } else {
  6. $taxonomy_template = your_addons . ‘projects/taxonomy-projects.php’;
  7. }
  8. }
  9. return $taxonomy_template;
  10. }
  11. add_filter( “taxonomy_template”, “your_addons_projects_taxonomy_template”, 20 );

The important logic is to load the sample file of the custom post kind after testing if a copy of it exists in the threads directory. When your customers copy a custom post into a theme and expand or overwrite it, your addons- plugin will load the custom version of your client’s file. Therefore, in this case,your core files which into the addon- plugin are not change, they are merely expanded by your customer.

About The Custom – Scripts, “Shortcodes” and Styles

You should create a special folder and paste the files in your theme for custom styles and scripts. You must create include your code files within your folder – addons if you plan to add custom – shortcuts. Repeat our example, create a folder which is named “shortcodes” and create the file “yourprefix-shortcodes.php” inside that folder. You should set all your custom – shortcodes in the “-shortcodes.php” file.

Let read the Tutorial of “Siddharth” here: https://code.tutsplus.com/tutorials/wordpress-shortcodes-the-right-way–wp-17165?_ga=2.159229753.2066407086.1508118696-1356864547.1505722856

Our custom – shortcodes file:

require_once(‘shortcodes/ninzio-shortcodes.php’ );

About The Languages

It is time to make the language file in order to make your plugin able to translate, of course that after having checked all the custom – functions.

Go to the addons- plugin folder> languages and use the Po – Edit software in order to create language file. This is main language file which contains the strings within your text – domain. Other language files can be made from this main file.

The steps to translate your language file:

  1. Start upPoedit
  2. From POT/PO file go to File > New
  3. From the languages folder, select and Open the pot file
  4. Type your name, email address, your language and country (example:. French fr_FR, German de_DE).
  5. Click the Update button in the main Poedit UI.
  6. Save the file, for your language and country, such as “filename-xx_XX.po” with “xx_XX”

That’s all. Your plugin is ready and done no

Also, I would like to highlight the What is Whitespace and why is it important? 8 website to inspire your web design.

Top 15 Best eCommerce Website Templates of 2017.

When you have business needs but do not have enough money to open a store, online sales are always the best option. By creating your own online shop, you will easily reach new customers through the internet.

Using an online store (Ecommerce functionality) is a very effective way to advertise your business online to a lot of new customers. The advantage of this is that you will reach customers from a variety of geographic locations, which will be of great help in developing your business.

(If you are interested, I also have an article about 9 extremely useful tips that you should use for your ecommerce website.)

However, it is important to note that designing an online store is extremely important. It will make an impression at first sight of the customer. Therefore, you need to design your shop beautiful, so eye-catching and make customers right click on what you are doing business.

In the field of e-commerce, whether you are a business owner or a professional designer, using a top-notch site template will help you a lot in creating websites, online stores.

When selecting eCommerce site templates for your business, you should consider some important features to see which template is right for you and provide the best experience for your customers. These features include:

  • Responsive and mobile friendly design.
  • Template that allows for featured product images.
  • Cart that automatically updates.
  • Customizable design options.
  • Product variation features.
  • Customer support included.

In this article, I will introduce you to 15 best ecommerce website templates. These are all new templates created in 2017. These website templates are perfectly suited to eCommerce stores. You will have the features you need to create your online store (or your customers) with great designs or even features you have never seen before. From here you can introduce your product to the internet and there will be more customers to view your website.

1. iOne: Drag & Drop Minimal Shopify Theme

The first is iOne. This is a great theme with the impression of sophistication and simplicity! iOne has over twelve very detailed demos and lots of layout variations. It also integrates Instagram (one of the largest social networks in the world), AJAX cart, wishlist, Flexslider, automatic search function, popup (mini banner)…

Link Reference

2. Porto: Ultimate eCommerce Magento Theme

Porto is a Magento template with 18 different homepage layouts. In it the layouts have been pre-designed and complete. Your product can be displayed in a variety of sizes and formats such as grid or column, two to eight individual pages and pages that can attract your visitors with a gorgeous slideshow or horizontal background.

In addition, Porto has other features such as allowing you to select unlimited colors, integrate with Google Fonts, product pages that allow adding multiple images, 3D design options and more than 300 options. in the admin panel. Design easy-to-use interface so you can quickly use Porto and open your online store.

Link Reference

3. Journal: Advanced Opencart Theme

Jounar is an OpenCart template with lots of customizable options that give you complete control over your store (over 2000 options). This is a template that can be used to design in both simple and sophisticated style or complex and handy, depending on your needs and type of business.

In the Journal, you can create Main Menu and small menus within it with different functions such as best-selling products, products with the most comments, products are discounted … Journal also includes custom unlimited colors, besides changing the skin of the website to create your own style.

Link Reference

4. Ultimo: Fluid Responsive Magento Theme

Ultimo is a premium Magento theme with an admin tool that allows you to customize almost anything in your online shop. It has a very user-friendly interface, easy-to-use, and fully customizable.

It fits every type of store and optimizes for SEO. Ultimo has unlimited color and font options, beautiful images and galleries, multiple menu layers, custom views for different product and more.

Link Reference

5. Warehouse: Responsive Prestashop 1.6 & 1.7 Theme

Warehouse is a Prestashop theme that meets the needs of advanced customizations such as animations, clean carts, sliders and more. The repository is based on the Bootstrap framework, which makes your site look good on a variety of devices.

Besides, other Warehouse features, such as the theme editor, allow you to control and change the design of the store, the ability to view each product page without spending time reloading the page, autocomplete search, blog module, countdown module (for promotion), product label and more.

Link Reference

6. Ella: Responsive Shopify Template (Sections Ready)

Ella is a beautiful Shopify template with large banners that can showcase your most unique products to attract the attention of customers and then they will enter yourwebsite to view your other products.

Ella includes a special catalog module to display all the products at the same time, the product can be filtered (filter by manufacturer, price …), integrates with Google Fonts, color options and unlimited style. Ella also allows you to add custom icons and links for social media, payment options, product images and support for Google Rich Snippets.

At the top of the Ella is a product slider that is related to the consumer product being viewed as well as the slider for the recently viewed product, which increases the likelihood of buying additional other products from customers.

Link Reference

7. YourStore: Shopify Theme

The 7th place is YourStore template template. The name is also known as the template for online stores. YourStore is a Shopify template available in response to Retina, which has 12 different layouts; the product page can be modified into 3 different designs; the page lists 8 designs, six layout footers and header has 7 designs. These features offer many customizations and unique layouts. This is a great option for those who want to create an online store that outperforms their competitors.

YurStore features include a pop-up with unlimited color, Instagram integration, product name, countdown module (for event), beautiful hover effect for product images, product reviews (for viewer), wishlist, blog option, contact, company information. In addition, Yourstore also supports RTL for languages and SEO optimization.

Link Reference

8. Fastest: Magento 2.2.0 Themes & Magento 1 Theme

Fastest is a new Magento web template created in 2016 to not only create superior design, but also optimize the load time of the web. It includes 10 demo pages for your product that are uniquely designed and many options for categories and products.

Fastest has a lot of great features. You can display multiple banner ads (with the accompanying customer testimonials) to ensure product quality for new customers. You can also edit unlimited colors and fonts, category pages, social networking integration, multi-layered designs, vertical mega menus, filters with multiple production options, pricing… and more.

Link Reference

9. Fastor: Multipurpose Modern Opencart Theme

Fastor is a modern OpenCart template with a wealth of unique settings. Modules and product introductions are optimized to allow you to create a fast online store. Highlights of Fastor is the ability to manage multiple stores at the same time with a single tool (this is very convenient for system administrators). Fastor is also based on Bootstrap to make sure your site is accessible from any device.

In addition, Fastor has other features such as allowing you to change the design of your own store, multiple color schemes, multiple fonts, 67 skin available, hover effect, product page, add more images for 1 product and much more.

Link Reference

10. Market: Premium Responsive Magento 2 and 1.9 Store Theme

Market is a versatile Magento template that meets all your needs and fits into any type of store. MArket is integrated with various Magento extensions such as SM Camera Slider, Mega Mega Menu, SM Tab List, SM Directory…

Market has eight layouts with different home pages, unlimited color options and multiple font support. Market has four types of headlines with stunning slideshows and fast product views, Rich Snippet support, customizable static blocks, and a multi-format search feature that allows customers to quickly find products by entering the product name or description directly or the product price.

Link Reference

11. Everything: Creative Magento Fashion Store

Everything is a site dedicated to insurance templates updated in 2016. The templates include different designs such as creativity, uniqueness, flat design, material design, cleanliness, elegance, simplicity, compactness, elegance, modernity, prominence, eye-catching … all that makes Everything suitable for any kind of ecommerce website.

Everything is a bundle consisting of 11 designs. You can customize different types of stores such as fashion, games, electronics, applications and other types. All designs meet beautiful images, advanced customization features so that users can create individual designs and more.

Link Reference

 

12. Intenso: Advanced Magento Theme

Intenso is an on-demand Magento template, based on Foundation Foundation Intenso. Intenso has powerful customization options and advanced features that make it stand out from the competition.

Intenso’s features include unlimited color combinations and fonts, built-in icons for you, and navigation menus designed to be relevant and useful to mobile users. Other features include Google Rich Snippets, product gallery, and pinch-to-zoom feature to zoom in images.

Link Reference

13. Panda: Responsive Prestashop Theme

13 is Panda. This is a modern, sophisticated and professional Prestashop template. Panda has an optimized design for touch devices.

Panda has designs that include unlimited header and footer layouts, multiple color modes for you to choose from, gorgeous parallel sections, icons, fonts and Google integration. On top of that, Panda is optimized for SEO and retina-ready.

Link Reference

14. Luxury: Premium Fashion Magento Theme

Luxury is a flexible but simple Magento template. Blogs, catalogs, storage locations and display pages are neatly designed. Luxury has more than seven predefined layouts to create the look of luxury. In addition, the built-in composer allows you to customize your layout quickly. Luxury also displays very beautiful when viewed on a mobile phone.

Other Luxury features include multiple title options, daily deals, bulletin boards, banners, customer testimonials, product sliders, and a variety of colors.

Link Reference

15. Comohos: Multipurpose Premium OpenCart 2.2 – 2.3

15 is Comohos. This is a versatile OpenCart template that can be customized to create a store of your choice. Comohos has 28 custom designs for different parts. Comohos also has FontAwesome icons, unlimited color options, advanced theme options, product names, can be filtered in many ways, Super Daily Deals Pro, attractive slider, add multiple images for a product and more.

Link Reference

Conclusion

 

With the use of these templates, you will save a lot of time to create a store online for your business. Besides, it also fully meet your needs in the design of images, colors… to the advanced support features. If you make good use of these advantages, you can creat a great commercial website and impress your customers.

Also, I would like to highlight the 9 extremely tips that you should use for your useful ecommerce website.

What is Whitespace and why is it important? 8 website to inspire your web design.

Whitespace is an important element in web design. If we focus to normal elements to design a web like font, colors, images, whitespace set the color of the design and affect the usability of the site. In other words, beginning with an effective use of whitespace is the key which attract visitor’s attention.

We will find out about why whitespace matter and the importance of whitespace, what conversion-driven web design means and how 8 websites which are using whitespace to lead visitors towards a expect action.

1. What Is Whitespace?

White space is empty positions, not display anything. It is a space between different elements that help viewers breaks in design process, and it is easy to focus.

Unless it has whitespace, our brains will be difficult to acquire many informations or data which crammed into a small space, causes fatigue.

Whitespace

2. Why We Need Whitespace?

In order to understand about whitespace’s importance, we take an example for phone book. Imaging how your brain processes all the information from a page of book phone or white pages. You feel too difficult to find information when all the columns of text are combined into one piece of boring information.

With whitespace, the layout and design of the display information is easier to understand.

Need Whitespace

In addition to creating a more understandable layout, whitespace can focus on specific elements. Subdivision of the layout by using whitespace makes a sense of balance and sophistication.

Whitespace is extremely important in designing website. Using it efficiently can make your website is more easy to navigate, converting and understanding easily.

It is okay if adding some whitespace has caused some of other content on the page to be pushed down. In reality, designers should not attempt to create mass content on the page because it will become cluttered.

3. 8 Websites Using Whitespace to Their Advantage

a. Shopify

A simple aim of the homepage for commerce platform Shopify is: give to guest to sign up for a free trial.

They surrounded their one-field sign-up form with many whitespace in order to direct visitor to this action, help reduces interruption and guarantee users cannot miss it. The navigation of website is displayed smaller than the form of the text. It is put in the top of the screen.

Shopify

b. Everlane

Whitespace does not mean that there is no color or picture. Page elements are munificently and strategically spaced to avoid mistaken or confusing your visitors.

In order to launch latest clothes collection, Everlane (a retailer of fashion) chose minimize set up: The full page background shows off a photograph of their “Camel” collection, and a small, expertly placed call-to-action appears in the center of the screen, encouraging users to click and “shop collection.”. This is an example shows that an action which is not pushy or aggressive.

Everlane

c. Airbnb

In the homepage, Airbnb company shared many potential visuals, but they use simple design with conversion-friendly that allow users to try their product immediately.

The layout based on copy and image which are limited; put all importance in the search box. Navigation and logo are hidden in the corner of the page.

Airbnb

d. Wistia

Using a whitespace strategy can easily ensure that your forms and call-to-action buttons are separate from the rest of content. The change is simple, though, it makes a big difference in content awareness.

Wistia is a video platform which connect their homepage with a friendly question and a drop-down form. This form look likes a central point of the whole page. Beside of navigation and image, it has many place to set up

Wistia

e. Welikesmall

Welikesmall shows that whitespace is not empty, boring or static. The full screen demo of videos project recently are displayed in homepage. Attracting the attention of visitor by filtering through a many of interesting vignettes.

Full-screen video becomes more polished when is designed with whitespace. The text is kept minimize with all the focus on the background of video. The logo is in one corner, folded hamburger style menu is in the other corner. “Belief in the Making” – the slogan of Welikesmall – is in the centre of screen, with a call-to-action buttons which connect to the demo reel 2016.

Welikesmall

f. Simpla

The Homepage of Simpla uses whitespace to urge users to keep moving.

Below the logo and navigation, a large part of the site has been unmarked. The top of the photo with a short text and arrow invites users to read and study about the firm and their mission.

Using of whitespace is just sophisticated and has a strategy to attract users.

Simpla

g. Harvard Art Museums

Harvard Art Museums is a place where displays antiquated paintings, but not at all. Here, whitespace provides the perfect context for a particular art. It looks like the first art exhibition. The neat layout gives the users a reason why to keep moving, it also ensures that no images which are centered together. In order to keep nice gallery, navigation of the site is completely hidden until the user hovers over the page.

Harvard Art Museums

h. Burnkit

With whitespace in your homepage, you will give some of difficult decision about anything which is important to display. If not arrange, the contents in homepage will be very messy.

Homepage of Burnkit including key excerpts (from the agency’s portfolio of client work),blog content and looks at the agency’s culture behind the screen. So, whitespace and many whitespaces will help they can control many things on one page without overwhelming viewers.

Burnkit

9 Extremely Useful Tips That You Should Use For Your eCommerce Website

When building an eCommerce site, it is important that it is really beautiful and eye-catching to impress the customer at first sight. However, the features and usability in your website should also be designed to fit and feel comfortable for the customer. Here are some very helpful tips to help you create the best eCommerce site.

1. Include a FAQ Section

No matter what your store type or design is, there will always be questions from customers about your products or services. Create a separate page on this issue or add it to a section of the Menu page and navigate to it. This will help you a lot when customers are demanding to buy products but they need more information.

2. Add a Live Chat Widget

Live Chat Widget is a very important feature. It helps customers feel familiar and feel that they are well cared for when visiting your site. In some cases, your staff will give direct advice to customers through this feature. From there, customers will be more likely to buy your product.

3. Clearly Label Your Sale Section

Recent research shows that most online shoppers are interested in the “separate section of products on sale.” Create a group containing all your on-sale products together in one section and place it right on your homepage so customers can see it the fastest.

4. Include a Search Box

In fact, most visitors to e-commerce website, customers click on Search to find the product they want. Put this Search in a good place to look and build it a variety of filters such as search by manufacturer, by product name, by price, search for HOT items, search for products that are promoting…

5. Use Customer Browsing History for Personalization

Understanding the needs of customers is extremely important in e-commerce. Build an admin tool that you can use to see data such as customer access locations, traffic sources, customers who buy and what pages they are interested in can improve customer service and improve your sales.

6. Add Big and Beautiful Images

Images are always important and leave a strong impression on customers. Make product images or create banners for your ongoing promotions for your customers to know. But the following two things to note: the image and banner should be large, clear text, easy to read and most important is that it must be beautiful.

7. Insert Clear and Compelling Call to Actions

If images on your site have attracted customers. Then you succeeded step 1. Continue to direct them to step 2 by giving specific information that the next action of the customer after viewing the image is what. This is called call-to-action.

8. Incorporate Customer Reviews

The comments of the people who bought your product is always the information that new customers are interested in. They will rely on them to look at and even trust the comments, so they will decide whether to buy your product or not. If there are bad comments, do not hesitate to show it, because no one product is perfect for everyone. And if a product does not have a bad comment, maybe the customer even thinks you are trying to hide it. However, it is wise to leave these bad comments at the end of the comment section.

9. Have a Clear Shipping and Return Policy

This is the last and possibly the most important step that affects the customer’s purchase decision. Please note the information about your shipping and return policy. This clarity and transparency will build customer trust for your website. And this will turn them into your loyal customers.

Conclusion

The 9 tips above are very important. Build your site beautiful and impressive, and of course your site must have the full 9 tips on. If you are hesitant to start creating an e-commerce site. Take a look at my Top 15 Best eCommerce Website Templates of 2017 articles.

12 important things if you want to become a successful web designer

Typically, when learning web design people often pay attention to professional skills such as Photoshop or jQuery. However, that is not enough because it can only make you a web designer on a regular basis. To be a successful web designer, you need to have more elements.

This job is not as simple as you think. To really master it, you need to pay attention to managing the workflow. After you have created a beautiful and engaging website, you have to combine it with the next steps in your plan such as how to communicate, how to advertise …

However, in the process of working, the web designers have summarized and shared the key elements so that those who are eager to become a successful designer can rely on it and learn. These elements you cannot learn through school cannot learn through books. That would be the skill that you need to train it day by day. In my opinion, this is really a very valuable advice.

In today’s article, I have chosen very carefully and I will share with you the 12 most important elements of a successful web designer.

1. Message transmission skills

This is a very important skill, which made me put it in the first place of this article. This is really a factor that determines the success or failure of your product.

Once you have completed your work, there should be messages in bold or make it stand out to let your customers see “what is the subject of this product”, “the purpose of product “,” why I create this product”. Messages convey the fact that you are present and talking to your customers. Therefore, if they are clear, meaningful and truly beautiful in the eyes of customers then surely that customer will be yours.

2. Sell Yourself

This is a very significant word in the web design industry. Web design is a battlefield in which you will face many other opponents. Because customers will have a lot of choices, make sure they will only select the skilled degigners and meet their requirements.

You can be a calm, quiet and humble person. However, if you want to become a famous designer then you need to express yourself and not be silent. There are many ways to PR yourself. For example, using the media, using information cards, or your customers will tell each other about you… What I want to say here is the value of yourself. Let tell people that who you are and what you are good at. If you are just a person who likes to sit at the desk, design your product and wait for the customer to come to you, you are really having problems. Take the initiative!

3. Have a detailed plan before designing

Nowadays, I realize that many people carry their thoughts “waiting for inspiration” before they can embark on designing their products. But when does that inspiration come to you?

In fact, this will come faster when you have a clear and detailed plan before you figure out the direction to design the product. Take the following 3 factors to complete your own plan:

Find out all the information about your customers that you can find.

Understand the desire of the customer.

Learn about trends related to customer requirements, you can see what your competitors have done with those trends.

Make a paper draft, listing what you can think of. Then slowly synthesize them, put them into groups and you will see what you need to do in the plan.

You can read more about “design planning” here.

4. Seriously see the reviews on your product

Be serious when looking at other people’s reviews of your product. That may be compliments or criticisms. However, what I want to say here is about customer criticism.

You must truly accept them as mistakes in your work, from which you will have experiences for yourself. At the same time you have to fix your mistake, try to fix it, this is a very important factor.

Successful web designers always pay much attention to other people’s comments about their product and they see it as a measure to improve their skills further. Keep in mind for me that having someone else checks and gives feedback on your mistakes is always a motive for you to go on the “design” road, that will get you growing up in this job. You can read more about the importance of feedback in Brandon’s article on the subject.

5. Distinguish between web design and graphic design

It was a surprise when I surveyed and realized that most designers were confused by the two concepts. Although the same designer, but these two factors are completely different. You need to clearly distinguish these two concepts in order to create quality products.

Graphic design is to create a product that you can use to print on paper or serve a clear, simple purpose. It is a job to serve the evident needs of the customer. In contrast, web design requires more than that. Because you also have to pay attention to factors such as product PR, customer purpose…

6. Always update the new technology of the world

The internet industry is growing very fast and there are always new technologies available everydays with high efficiency. Therefore you need to update to keep up with it. Create a work schedule and choose a fixed time every day to keep up to date on new technologies, find out what’s new, design trends, new technology

I will provide you with an overview of what I do in the field of design. Look in Envato Market, see which products are sold the most. Based on that, you will see the trends and desires of customers, and also see how other designers meet these needs….

7. “Soft skills” in Web design

In addition to the core design skills, you also need to focus on the softt skills in Web design. Because they will bring comfort and satisfaction to your customers and enhance the professionalism in the product that you create.

Let’s imagine a web designer mastering the latest HTML and CSS topics, producing highly compatible, the Search feature loads very fast, handy with Javascript UI to build a solid website… surely will make your customers extremely satisfied.

8. Experience from day to day

In the web designer industry, experience sometimes helps us out more than skills. Experience also contributes significantly to the success of a web designer. Customers are also very concerned about this, they always want to know how long you have experienced in this field and they always choose reputable long-standing web designer.

My advice for you in this eighth element is “get started as soon as possible”. If you are still in school, look for customers who have a simple request to embark on your future career right now. Do not pay attention to money at this time, because what you get will be more than that. Believe me, you will soon recognize it in 2 or 3 years.

9. Organize the work system clearly

This is a “soft skill” of myself that I want to share with you. It is very useful!

At work, any work you do, there are times when you will overload or there are times when things happen to you and that inadvertently affects your ability to work, which makes you unable to focus on the job at all. Web design is also, even it is very influential because the nature of work you do should be accurate, meet the requirements and details.

I usually have the habit of categorizing files, images with the same subject, the same video, audio files … into folders on my PC. This helps me quickly find what I need and reduce the pressure of work. Besides, I also have a notebook to keep track of what I need to do to master my work schedule.

10. Professional business sense

Try to maintain business thinking at all times. Businesses view this as selling products to users, evaluating product values, and calculating costs. In web design there is also business thinking. After completing the product for the customer, you should provide or suggest to them strategies or solutions to promote their products to achieve higher efficiency. Besides that you should learn about the needs and desires of the viewer when they click on your web site. From here you will be able to give feedback to your customers so they can do business better.

To do this will take a bit of time, but it will be your advantage over other competitors, even if they are big design companies.

11. Teamwork

This is a factor not only web designer but most other industries also pay attention. Working with others and clearly separating what you should do, your colleagues should do to make the work more efficient as well as the work process will be faster.

You may be working as a freelance web designer, or maybe you are working for a company or a studio, working with a team is inevitable. The key here is, you have to understand your role in the team, the positions that are linked together. Moreover, you can learn from your colleagues.

If you have difficult requirements to do it yourself, you can go to Envato Studio to find other web designers to collaborate with.

12. Updated Portfolio

This is a very important element and it is essential for any web designer. You need to have a catalog to store what you have done, even if it is a product that you have completed long time ago.

This is the best way to demonstrate your ability to reach out to your customers, and it will really give your customers confidence. They will see how your workflow changes, and most importantly, what level you are at right now.

Store all the categories you have from content files, fonts, color adjustments, techniques you’ve put into the product, and why you use them. This will give you a clear basis for talking about cost with your customers.

Conclusion

Web design is a creative but extremely competitive field. A successful web designer needs patience, ceaseless learning and bravery to deal with any situation. Because the worst thing about web design is “give up”.

You may not be good at this field at this time. No problem, keep going and grow slowly. And with these 12 tips, I hope I helped you a little to become a professional and successful web designer.

8 interesting things about web design have a direct impact on the user experience.

When we embarked on designing a website, we often have thoughts like, “use yellow in this place is beautiful?”, “Put the logo on this place, then look okay?”, “Should I Include in this section a GIF image? “…However, if you really need to highlight something (such as a brand name or feature prominent product), then you should focus on them rather than looking at your overall site.

In the present time, there are many sites (more than a billion websites) with similar themes and users will have a lot of choices. So, what will make them choose your site when there are millions of other sites out there?

One of the most important is the user experience. This is extremely important because it directly impresses your users, or it is a good impression or a bad impression. So, today I will introduce to you some utilities and UX to impress the user.

1. Simplicity

We have to admit that designing a good-looking website is essential. However, it is not the most important. For some customers who are looking for what they want, when they visit your site, they will be satisfied that your site meets their needs and makes them comfortable on yours site.

Adding unnecessary details will only make your customers uncomfortable. Therefore, you should think of “simple” site but still meet the full features. There are many ways to accomplish this, here are some of the ways I’ve used:

  • Colors: Use 2 to 3 different colors. Maximum of 5 colors.
  • Typefaces:Similar to color, you should only use up to 3 fonts with 3 different sizes. Note that fonts must be clear, legible.
  • Graphics: Limit use of this element, only use it when absolutely necessary.

Simplicity

2. Visual Hierarchy

Create a smart hierarchy for your site. What matters most, give it the upper hand, so that the User is most accessible to them.Pay attention to UX and optimize usability. Help your clients fulfill their desires in the most comfortable way possible. These are adjustments in color, font size, font, location … that you need to design on your website.

Visual Hierarchy

3. Navigability

The excellence of the website is when the customer enters the site and they always find what they are looking for. From there, customers will easily know what their next step is in your website. It sounds very simple, but to do it requires a web designer to have certain experience. I would like to give you some tips for optimizing website navigation:

  • Your site navigation structure must be really simple. (both the top and the footer of the site).
  • Put breadcrumbs everywhere so that the User knows the paths.
  • The “Search” bar must always be in the most visible position and near the top of the page so that the User can easily use it.
  • Do not complicate images and details on a web page. User will be disoriented when there are too many things that they have to keep an eye on.
  • Do not stratify too much, up the hierarchy of 3 floors in each section of the site.

Navigability

4. Consistency

User usability and UX are also affected by synchronization. From the site interface, layout, colors, images, titles, logos … even fonts need to be unified. This will create a very positive feeling to the user.

However, you should understand the consistency here is on sites with the same content, not on your entire site. Other content pages still need to make a difference. This helps the user to easily identify when they are in the review product, store or inquiry …

Consistency

5. Accessibility

From 2013 to 2017, the number of tablet and smartphone users has increased rapidly (especially smart phones). Of course there are many different types of devices, and that is your goal. Create a web site that is compatible with all types of devices on the market (including the operating system).

The thing I want to say here is that if you do well, the site will have displays that match the browser type, screen size from the client’s access device.If you are not qualified enough to do this, let “add alt-text to all of your images” to improve the accessibility of the User.

The last thing is to display on different platforms. Make different experiences for customers on different platforms. Ofcourse to do this, you need to understand the requirements and characteristics of each platform type.

Accessibility

6. Conventionality

We have some web design conventions that users on the internet have become accustomed to them. The conventions are as follows:

  • The main-navigation is always at the top (or left-side) of a site.
  • A logo at the top-left (or the center) of a site.
  • The logo is“clickable” and it will“link” User to the main-menu.
  • Has the effect of changing the color andthe appearance when you mouse over the “link”.

Conventionality

7. Credibility

The use of custom web design conventions (elements that User is familiar with) will make your site more convenient and easy to use. If you are looking to create a site that brings the User’ experience at best, these available conventions will probably help you.

Credibility is also important. However, to create a website with high credibility is not simple. Want to do this, you should pay attention to the honesty and clarity. When selling a product or offering a service to a User, make sure the information is clear and in the simplest position.

I would also like to share a useful tip for you: create a pricing page. Having a clear and transparent product pricing on your site will make your site more trustworthy.

Credibility

8. User-Centricity

The last thing I want to share with you in this post is the design that fits the interests of the User. This will generate extremely positive feedback for your site. So, what you need to do is gather feedback from the User and change the design of your website to best suit the User’s wishes.

I will give you some tools to assist you with this problem: Crazy Egg, Loop11, The User Is Drunk

(Read this for even more helpful tools.)

User-Centricity