5 Ideas for Making a Screenshot Great

You want to include a screenshot of your app on your blog post or website. How do you make it look great? You want your screenshot be apart of the design and attract the attention of visitors.
5 Ideas for Making Your Screenshot Great

What can you do?

Use a colored pattern

Put your screenshot on a solid or patterned background. The background can help to draw attention to your screenshot.Scrrenshot with blue-green background

Place it on an image of a computer or phone

Create a screenshot that shows how your app looks on a desktop, phone or tablet. With a blank template, you can size it to fit. First, resize the computer monitor image to the size you want. Then, resize your screenshot to fit inside the monitor. You may need to crop and resize to get it to fit without looking squished.
Screenshot in Monitor

Add text to the screenshot

Is there a feature or part of your app that you want to show? Take a screenshot that focuses on that area of your app. Then, use your favorite photo editor to add text that describes the features that you are showing.
Screenshot with text

Create Multiple Screenshots

One screenshot doesn’t show the uniqueness of your app. Try three. Layer them on top of each with the most important screenshot on top. Or show it on a desktop, tablet and phone.
Three Screenshots

Add a shadow behind it

Use your favorite photo editor to edit the screenshot and add a background shadow to the image. The shadow can make it look like it is hovering over the background on your page.
Screenshot with a shadow

Your screenshot is an important part of the design. You want to make it stand out. Mix and match one or more of these techniques. You can make it look great by using one or more of these additional design techniques.

What do you do to make your screenshot great?

Create a custom build of Bootstrap

How do you customize Bootstrap? The quickest way is to customize the CSS. You create own theme to make your Bootstrap website look they way you want it to.

What if you want to do more? You can customize your build of Bootstrap. There are two options: use a Bootstrap generator or modify your copy of Bootstrap.

Create a Custom Build of Bootstrap

Use a Bootstrap Generator

You can customize and download your very own custom build of Bootstrap. With Bootstrap’s Generator, you can choose which components, Less Variables and jQuery plugins that your version will support. Before you customize Bootstrap, read the documentation to learn how it works.

Custom Build Bootstrap Choose Components

Customize your build

When you customize your build, you can choose from a previous version that you built or start from scratch.

When you start from scratch, you have four steps to complete.

  1. Choose your components
  2. Select the jQuery plugins that you require
  3. Customize Less variables to define your colors, sizes and more
  4. Click on Compile and Download your customized version

First, choose the components that you want to support. You may choose your components either by unchecking the ones you don’t need or using the Toggle All button. It turns off all of the components in this section, so you can choose individually the ones that you want.

Next, select the jQuery plugins that you require. You may turn them all off using the Toggle All button or unselect them individually.

Once you picked your jQuery plugins, you can modify the Less Variables. For each variable that you want to change, edit the value in the text box provided.

Finally, click on the Compile and Download button to create your customized version. If you haven’t already, create a Bootstrap website to test your new customized version. You can always go back and change your version if it doesn’t work the way you want it to.

Modify Your Copy of Bootstrap

Don’t want to use a generator? You can modify your own copy of Bootstrap. Before you modify your copy, you need to understand how Bootstrap is organized and what you want to change. Keep your changes separate. Bootstrap recommends modifying the variables.less file. In Customizing Bootstrap the Right Way, Mark Healey recommends creating your own file with all your changes and modifying the bootstrap.less file to import your new file. His method makes updating Bootstrap simpler when they make changes.

Whether you choose to customize Bootstrap by creating your own theme, using a generator or modifying the files, you can make it your own.

Have you Customized your Bootstrap website?

Once you have built a few websites with Bootstrap, you may notice that your sites look too much alike. As a web developer, you want your websites to useful as well as attractive. How do you fix this problem? You can customize how your Bootstrap looks. By working with and customizing the design, you can create a Bootstrap website that doesn’t look like it was made with Bootstrap.

Have you customized your bootstrap website?

What web development techniques can you use?

  • Create a custom style sheet
  • Use Custom Fonts
  • Add Custom Photography
  • Use Font Awesome
  • Customize Bootstrap’s Buttons

Create a custom style sheet

You want to create a custom style sheet to keep your design customizations separate from Bootstrap. Nothing more annoying than upgrading and realizing that you lost all of your design work because you added them to the Bootstrap CSS and forgot what you did. If you use Adobe Kuler or COLOURlovers color scheme generators, you can create a Bootstrap theme with the color scheme to start your designs from.

Use Custom Fonts

Fonts as well as colors should be unique to your website. By using custom web fonts, you can change how your site looks quickly and easily. When you choose the wrong font, your site can look bad. Where can you get ideas for choosing the right fonts? You can use the following resources Top 20 Google Fonts and How to Use Them and 10 Great Google Font Combinations You Can Copy.

Add Custom Photography

With sites like pixabay.com or Death to the Stock Photo, you don’t have to be a photographer to add unique and interesting photos to your website. With tools like Photoshop, you can crop, add photo effects and more to make a photo unique to your website.

Use Font Awesome

With Font Awesome, you can incorporate these icons into your designs. You can use them on buttons, navigations bars or anything else that you need.

Customize Bootstrap’s Buttons

Bootstrap comes with default buttons for you to use. You can customize the way these buttons appear in your design. Use this Bootstrap Button Generator to create the look that you need.

With web development tools like photos, Font Awesome and CSS, your Bootstrap website doesn’t have to look like a standard Bootstrap website. You can customize it to look the way you want.

Paper Prototyping

Have an idea for project? Do you start by opening your code editor and getting started? I have. Those projects seemed to take longer and failed to become good products. What works is prototyping or sketching the product out. Sketching helps you to slow down and think about the problem. It makes you choose one solution over the other and even seen things that you may not consider if you had jumped into coding first.

Paper Prototyping

Why paper?

  • Paper is cheap and easy. You just grab a piece of paper, a pen and start drawing. If you don’t like it, you can throw it away and start over.
  • Easy iterations. A paper prototype also allows you to create multiple iterations as possible without the expensive of writing code.
  • Documentation. No need to create additional documentation. The prototype becomes your documentation. With paper, you write notes on your design or on the back or add them with Post-It Notes.
  • Collaboration. You and your team can quickly and easily draw out ideas on paper and share them.

What do you need to get started?

  • Paper
  • Pens and pencils
  • Stencils

When do you use paper prototyping?

  • Brainstorming new ideas
  • Creating a mock-up of a new feature or product
  • Redesigning an older feature that no longer works

Should you use it for every project?

It depends. If your client or project can be easily understood by simple sketches, then you can use them to present your ideas. For some project, you may need to create a more interactive mock-up. Your client may need to see a working product in order to understand how you plan to implement your idea.

Paper prototyping is the easiest and simplest way to get started. If you want to stop talking and start sketching, this guide can help you get started.

5 Places to Get WordPress Snippets

How can you modify your WordPress website? By adding a theme, plugins or modifying WordPress yourself. When you develop your own WordPress websites, you may want to add code instead of relying on a plugin. Adding a code snippet to your theme or a custom plugin can be a better solution than searching for a plugin that does what you want. Where do you find these code snippets, what do you do if it breaks your site and how to do manage them?

5 Places to Get WordPress Snippets

Where do you find code snippets?

WPSNIPP

WPSNIPP – WordPress Snippets has a collection of about 666 snippets. You should be able to find a snippet that works for your next project.

wpsnipp

 

Digging Into WordPress

Digging Into WordPress has tips, tricks and snippets for modifying and making your WordPress site even better. You can use their tips and tutorials to replace plugins that could do the same thing.

Digging Into WordPress

 

WP-Mix

WP-Mix is a mix of code snippets and tutorials. You will find WordPress, PHP, jQuery, HTML, CSS and more.

WP-Mix

 

CSS-Tricks

CSS-Tricks has a collection of WordPress snippets. You can add these snippets to your theme or a site-specific plugin.

CSS-Tricks WordPress Snippets

The Web

You can search the web for a code snippet. Many WordPress or developer blogs will have code snippets that you can use.

What happens when you find one and it breaks your site?

WP Beginner explains how to paste snippets from the web into WordPress and how to avoid mistakes that could take your site down.

What do you do with your code snippets?

Whether you have written or found a WordPress snippet that you want to share, you need a way to do it. Thoriq Firdaus show you how in How to Manage and Use Snippets in WordPress.

Code snippets can make it easier for you to modify WordPress. You can search and paste snippets into your WordPress site. Where and how you paste these snippets can determine whether or not it will fix your problem or crash your website. As with all code you find, read it to make sure you understand what it does and test it. Do you have a place where you can find WordPress code snippets?