Category: Web Development

Before I list some common options for marketing website options, it’s worth going over a few topics first.

Speed

No matter what type of website you are building, you want it to be a fast as possible. Speed is critically important for SEO and a good UX. To achieve the fastest speed, you need the following:

• a static website (dynamic sites like WordPress that render PHP files with each request are slower)
• hosting the website files on a content delivery network (CDN)
• optimized and compressed images, preferably using a dedicated CDN like ImageKit or Cloudinary)
• optimized and minified CSS, e.g. using Tailwind CSS to build only the CSS that is needed)
• optimized and minified JavaScript
• other techniques such as lazy-loading of images and infinite caching with unique (e.g. with a timestamp) asset filenames whenever a file changes

Security

Having a secure website is critical, especially for businesses. Some best practices for website security are

• delivering a static website since dynamic ones, e.g. WordPress powered by PHP and numerous plugins by different authors are much easier to hack
• multi-factor Authentication (MFA) (If you are using a CMS like WordPress, you can add 2FA to each user’s login. You can also restrict access to the admin panel to just a block of IP addresses for your company and requiring VPN access)
• implementing a Zero Trust policy, where you assume everyone who has access is a potential threat and proceeding accordingly
• applying a principle of least privilege (POLP) by limited user access to the minimum needed
• requiring complex passwords
• rotating passwords by forcing users to change their password regularly
• keeping all dependencies up to date, including WordPress plugins
• deleting using WordPress plugins rather than just deactivating them (yes, it’s possible to hack a WordPress site even via a deactivated plugin)
• having regular backups
• implement a Content Security Policy (CSP), which limits which resources can be loaded and from what domain
• add SSL/TLS to transfer data encrypted (check SSL Labs and Hardenize for configuration recommendations)
• use a code-scanning service to regularly check version control for sensitive data
• rename default file / folder names, e.g. wp-admin for WordPress
• disable unused features, e.g. WordPress’ REST API URLs

Content Management System

WordPress with or without a builder

WordPress is the #1 most popular CMS. If you use the default WYSIWYG editor (Gutenberg), you can create simple web pages, but if you want to more design and layout customization options without coding, you’ll need to use a website builder plugin like Elementor, Oxygen Builder, and WPBakery. With so many plugins, you can easily add website features like a hero carousel without coding by just installing a plugin and using it. However, it’s important to know WordPress’ limitations:

• slower than a static site because the live site has to be dynamically rendered from PHP files first
• less secure than a static site
• development and customizations are somewhat limited or come with a learning curve as you have to work within the WordPress’ ecosystem
• content is stored in a database, which is less user-friendly to work with for developers
• version control uses WordPress’ custom versioning system rather than industry-standard git

Webflow

Webflow is a popular website builder that provides a WYSIWYG interface for creating very custom-looking websites. Its UI is powerful, but the many options may make it overwhelming for non-technical users. Websites are either hosting on Webflow’s servers or you can manually export a static version of the site each time you want it.

Headless CMS like Contentful

Contentful is a headless CMS. It allows you to create custom content models. Content is stored in Contentful and then fetched using the Contentful API. Note that you can also use WordPress in a headless manner via the REST API and WPGraphQL.

Content Contributors

Some marketing leaders will insist that many or all members of marketing, most of whom are non-technical, should be able to update the website. From my experience, most marketers don’t want to update the website themselves, even if they knew how to. They prefer to just open a ticket, like in Asana, or worse yet, send an email or a chat message asking for an update to be made. If non-technical

Having said that, from my experience, the one section of a website that is updated very frequently is the blog by many different authors. Unlike product pages, which are created once in a while, and tend to have fancy designs with animation, blog posts are very simple and they follow the same simple template. As such, it would make sense for non-technical people to be able to stage blog posts using a CMS.

Development Time

React

Even though React is the most popular JavaScript library for building user interfaces (UIs) with reusable components, that doesn’t mean it’s the best (I prefer Svelte) nor is it needed for all types of websites. I think most developers would agree with me that React is better suited for interactive web applications rather than primarily static marketing websites. Though you can create a static marketing website with React and a framework like Next.js, it makes no sense to because there will be a lot of unnecessary overhead that will slow down development and updates.

Dynamic functionality

You might argue that you need React for some dynamic functionality in your marketing website, like a page to filter resources. First of all, unlike SaaS web apps, where each company’s app have different requirements, most marketing websites have more or less the same functionality. For example, if you need a page to filter resources, you can use the Hushly Content Hub. Not only does it provide fully customizable filtering functionality and design, it allows non–technical marketers to log in and upload resources themselves, so web developers don’t have to waste time doing non-development work. Another common type of dynamic functionality is an ROI calculator. There are many services that provide this and which are easily customizable, e.g. grid.is.

Of course, there may be a time when you need a custom solution, but it doesn’t make sense to have your entire website depend on React or Svelte or some other JavaScript library just for a few edge cases. In this case, developers can use React and Svelte to create a frontend-only app.

Image Optimization

You really don’t need to waste time manually optimizing images anymore. Not only is that time-consuming, you can mostly get better results by using a dedicated image optimizer and CDN like ImageKit and Cloudinary.

Now that that’s out of the way, here are some options I’d recommend for a marketing website.

Marketing Website Tech Stack Options

Option 1

If non-technical people will only update certain parts of the website, e.g. press releases and blog posts, and if there are sufficient and skilled developer resources, then I recommend the following stack:

• Eleventy or similar (for static site generation)
• GitHub or similar (for version control – text files only)
• Netlify or similar (for CI/CD and hosting)
• Contentful or similar (a headless CMS for custom content models)
• WordPress (used in a headless manner via the REST API or GraphQL for blog posts)
• WPengine or similar (for WordPress hosting)
• Tailwind CSS (for optimized CSS)

Option 2

If non-technical people will update most of the site and the site and/or there are limited developer resources, then I recommend the following stack:

• WordPress (used in a headless manner)
• WPengine or similar (for WordPress hosting)
• Simply Static (a WordPress static site generator plugin)
• Github or similar (for storing static files and for version control)
• Netlify or similar (for CI/CD and hosting)
• Advanced Custom Fields / ACF (for if you need custom fields)

In both cases, I recommend the following as well.

• AWS S3 or similar (for hosting binaries – images, PDFs, etc)
• AWS Cloudfront or similar (for delivering non-image binaries, e.g. PDFs)
• ImageKit or similar (for automatic image optimization)

Design for Developers

Learn more

Roots of UI/UX Design

Learn more

Refactoring UI

Learn more

In this tutorial, I’ll explain how you can easily create a website using pre-made components.

Note that the following is just one of many ways you can do this.

1. Install Parcel

Parcel in a simple, zero-configuration build tool. Here are some of its features.

• It works with static HTML files, but it can also work with React and many other file types.
• Parcel includes a development server out of the box with auto-reload.
• Clear error messages and diagnostics
• Fast build times
• HTML, CSS, JS modification and compression using Gzip and Brotli
• Image optimization (although I prefer an image CDN like ImageKit for that)
• Parcel automatically includes content hashes in the names of all output files. This enables long-term browser caching.

2. Install Tailwind CSS

Tailwind CSS is a utility-first CSS framework.

Instructions on how to install both Parcel and Tailwind CSS.

If you will have CSS files separate from Tailwind CSS, in your tailwind.config.js file, make sure to add “css” as a file option.

3. Update Configs, Set Up Git, and Test Locally

Add a source and scripts to your package.json by copying the source and scripts to it so that it looks like below. Remove the “main”: “index.js” if it exists. Note that we’re using the glob ./src/**/*/index.html to tell Parcel to build all HTML files in all directories.

Run npm run build to test building the pages.

Run npm start to start a local dev server.

Open a browser and go to the server URL provided to verify the test page loads. Make a change to the HTML and Tailwind CSS classes to verify that changes are processed and the page auto-refreshes in the browser.

4. Set Up Git and Push to GitHub

• Run git init to initialize a new local git repo.
• Create a .gitignore file with the following contents

node_modules
.parcel-cache
.env
dist

• Create a repo in GitHub and push your local changes to it, e.g.

git add *
git commit -m "first commit"
git branch -M main
git remote add origin [email protected]:javanigus/test-tailwind-site.git
git push -u origin main

All files in your GitHub repo should be there except for the ones in the .gitignore file.

5. Set Up Deployments to GitHub Pages

Install the gh-pages package by running npm install gh-pages --save-dev.

Add the following scripts to your package.json file:

"predeploy": "rm -rf dist .parcel-cache && parcel './src/**/*.html' build --public-url ./",
"deploy": "gh-pages -d dist"

The predeploy script will run the npm run build command before deploying to ensure that the latest production-ready files are used. You need to clear the cache by deleting the .parcel-cache folder first. Also, since GitHub Pages publishes your website in a folder below the root domain, you need to add a “public-url” flag to tell Parcel to remove the slash (/) for relative dependencies like CSS and JS files to avoid getting a 404 error.

Run npm run predeploy

The deploy script will use the gh-pages package to deploy the contents of the dist directory to the gh-pages branch of your GitHub repository.

Run npm run deploy

View your site at https://<username>.github.io/<repository>/. In my case, that’s https://javanigus.github.io/test-tailwind-ui-site/.

In GitHub, if you go to Settings > Pages, you’ll see that the commands above configure GitHub Pages for you.

6. Add Pre-made Sections to Your HTML Pages

You can use Tailwind UI to copy and paste a bunch of sections like header, footer, hero, contact us, etc.

https://tailwindui.com/components

You can also get Tailwind components from Flowbite.

7. Add Pre-made UI Elements to Your HTML Pages

You can use Material Tailwind to copy and paste a bunch of elements like buttons, cards, accordions, lists, tables, etc. You’ll first need to add the Material Tailwind CSS and JS to your HTML pages first.

Ripple Effect

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html@latest/scripts/ripple.js"></script>
 
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>

Icons

<!-- Material Icons Link -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
 
<!-- Font Awesome Link -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
  integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
  crossorigin="anonymous"
/>

8. Add Icons

Easily add icons from FontAwesome or SVG Repo.

9. Add Fonts

Find and load fonts for free from Google Fonts.

10. Add Backgrounds

Your page sections will look boring if they are just plain white. Here are some background ideas:

• background photo
• background video
• background solid color
• background gradient
• background animation

For example, I use this gradient background animation for the announcement banner commonly found stuck to the top of websites. You can find free images at Unsplash. You can find SVG backgrounds from svgbackgrounds.com. I also used one of the button styles from here.

11. Add Animation

I like anime.js. The documentation is clear and integration is simple. Just add a reference to the animeJS library on a cdn like CDNJS. Then, add write some JavaScript that uses animeJS in your main JavaScript file. If you want your animations to run when users scroll to a particular section of your site, you can add the Waypoints library from a CDN as well. In my example website, I first hide all elements by setting their opacity to 0. Then, I use Waypoints + AnimeJS to animate different elements. Here’s my code. I ended up loading jQuery, animeJS and Waypoints along with my main JS file at the bottom of the <body> element.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js" integrity="sha512-aNMyYYxdIxIaot0Y1/PLuEu3eipGCmsEUBrUq+7aVyPGMFH8z0eTP0tkqAvv34fzN6z+201d3T8HPb1svWSKHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js" integrity="sha512-fHXRw0CXruAoINU11+hgqYvY/PcsOWzmj0QmcSOtjlJcqITbPyypc8cYpidjPurWpCnlB8VKfRwx6PIpASCUkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="main.js"></script>

12. Deploy

Whenever you’re done making a change, just run the following deployment commands.

npm run predeploy
npm run deploy

Here’s a test site I created. Not too bad for a day’s work.

https://javanigus.github.io/test-tailwind-ui-site

• The source code is in the main branch.
• The built website files are in the gh-pages branch.

Next steps:

• add a custom domain to your GitHub Pages site

Additional Resources

• Hero templates

Things have definitely moved around and look different in the UI for GA4 (Google Analytics v4) vs UA (Universal Analytics). If you’re looking how to find pages that link to a particular page (previous page path), then you need to use Path Exploration.

Explore > Path Exploration

If you see an existing path exploration, click “Start Over”. Then, click “Ending Point” and choose an option. I prefer to choose “Page path and screen class” since page paths are easy and unique to get.

You can then choose one of the available paths or click the magnifying glass to type in a path, e.g. /resources/.

You will then see how often people click on a link on a page that takes them to your ending point (page) within a particular time range.

In the Variables section on the left, you can change the date range and other variables.

1. From a web design point of view, what do you think of  
   • www.qualys.com 
   • https://www.qualys.com/customers/success-stories/cintas-replaces-manual-patching-tasks-with-risk-based-from-qualys-enterprise-trurisk-platform/  

2. Are you currently employed? If so, why are you looking for another job? 

3. What have been your key responsibilities as a web designer? 

4. Describe your experience designing websites. 

5. How familiar are you with HTML and CSS? 

6. Do you have a portfolio of web designs? 

7. Have you created any websites yourself, whether from scratch or from WYSIWYG tools like Webflow? 

8. On a scale of 1-10, with 10 being the most proficient, rate your proficiency in Photoshop. 

9. On a scale of 1-10, with 10 being the most proficient, rate your proficiency in Figma. 

10. Do you have a portfolio of websites you’ve designed? 

11. Do you use a grid system when you create designs? 

12. What is a responsive web design? 

13. Are you familiar with website breakpoints? 

14. What are some bad examples of web design? 

• An outdated or inadequate web design. 
• Poor website navigation. 
• Convoluted or unclear user journeys. 
• Excessive use of images, icons, colors, and textures. 
• Poor quality images. 
• Mobile optimization is not available. 

15. What’s the web design project you’re most proud of? 

16. Describe your end-to-end process when working on a web design task. 

17. Have you ever been involved in a complete website redesign project? 

18. Describe what UX is and why it is important. 

19. Describe your experience with website animation. 

20. Do you have experience designing icons from scratch or editing existing icons or do you rely solely on a library of premade icons? 

21. Do you have experience creating vector images from scratch, e.g. using Adobe Illustrator? 

22. Have you created any animations using Adobe AfterEffects? 

23. When designing for web, have you leveraged any website component libraries like Tailwind UI and Flowbite? 

24. A common workflow we have is to take a Word document containing web page content and turn it into a web design in Figma. Is this something you can do? 

25. Unlike print designs, websites are living documents, meaning that the content, whether text or images, often changes. As such web designs need to be versatile to accommodate such changes. For example, if a design calls for a box containing paragraph with 5 lines of text, e.g. a customer quote, that same design may not look good the customer was replaced with one spanning 10 lines of text. Do you have experience facing such web designs issues? 

26. Have you worked with any website templates before? 

27. Describe your level of passion for web design. 

28. How do you keep abreast of web design trends, e.g. do you follow certain groups, attend conferences, read certain blogs, etc? 

29. The marketing department at Qualys is very fast-paced with many last-minute requests. Do you have experience in and would you be comfortable in such an environment? 

30. Do you have experience designing marketing websites and/or landing pages to drive signups? 

31. Do you have experience designing websites with SEO in mind?  

32. Qualys is a multi-national company with offices around the world. Sometimes, you may need to work outside of normal business hours. Is that okay for you or do you have a strict 9-5 schedule? 

33. Where do you go for design inspiration? 

34. Are there certain websites that you particularly like the design of, e.g. apple.com, yahoo.com, etc? 

35. Please take 15 mins to make a list of design choices you like and dislike on www.qualys.com and explain why.

36. Describe a web design project you worked on that didn’t go as planned. What could you have done better? 

37. Do you have experience with ADA compliance as it pertains to web design, e.g. 

• Color contrast 
• Accessibility of web forms 
• Etc  

38. What tools do you use the most when designing? 

39. Some designs are full-width. How do you handle such designs if a user’s monitor is very wide? 

40. When designing for web, do you prefer to start with a mobile design (mobile-first design) or a desktop design? 

Let’s say you’ve inherited a large website that uses some home-grown static site generator (SSG) and there’s no documentation. Your build and release infrastructure is fragile and also custom. Your git repo is massive with content from two decades, including lots of binary files. You want to migrate this massive piece of shit to a popular SSG like Eleventy and you want to use a reliable deployment system like GitHub + Netlify. Let’s say you can’t migrate all source files because there’s no easy way to do so between your custom SSG and Eleventy. If you’re willing to sacrifice most of your layouts and partials (includes) and just migrate everything all of the built static files to Eleventy with one partial for the header and one for the footer, then here’s one way to do it.

1. Copy Your Static Site to a New Folder

If you don’t have access to the SSG and the web servers, you can download the whole website from the internet using wget.

2. Copy the Header and Footer Code Blocks to Separate Files

Let’s say your HTML looks something like this.

<html>
<head>
	...
</head>
<body>
<header class="header">
	<div>Logo</div>
	<ul>
		<li>Link 1</li>
		<li>Link 2</li>
	</ul>
</header>
<section>
	<p>Hello, World!</p>
</section>
<footer class="footer">
	<p>Copyright 2024</p>
	<div>blah blah blah</div>
</footer>
</body>
</html>

In this case, you can create separate files like this:

/includes/header.njk

<header class="header">
	<div>Logo</div>
	<ul>
		<li>Link 1</li>
		<li>Link 2</li>
	</ul>
</header>

/includes/footer.njk

<footer class="footer">
	<p>Copyright 2024</p>
	<div>blah blah blah</div>
</footer>

3. Search and Replace the Header Code Block with a Include

For simplicity, let’s say that your HTML looks something like this:

<html>
<head>
	...
</head>
<body>
<div class="header">
	<div>Logo</div>
	<ul>
		<li>Link 1</li>
		<li>Link 2</li>
	</ul>
</div>
<section>
	<p>Hello, World!</p>
</section>
<div class="footer">
	<p>Copyright 2024</p>
	<div>blah blah blah</div>
</div>
</body>
</html>

If your header and footer code blocks don’t use unique HTML tags like “header” and “footer”, then you may have a problem searching and replacing these code blocks. For example, in VS Code, if I try to select the header block beginning with <div class="header">, I can’t do so due to the nested div tag.

Using the regex

<div class="header"(.|\n)*?</div>

notice how the selection ends prematurely at the closing nested div tag. In this situation, you can update your source code to replace the open and closing div tags with the standard <header> tag. You can do the same with the footer by using the <footer> tag. After updating the source code, you can rebuild your static HTML pages and then use a regex like

<header class="header"(.|\n)*?</header>
<footer class="footer"(.|\n)*?</footer>

to search and replace the header and footer code blocks with a code reference that includes those code blocks using whatever template engine you want to use.

If you want to use the Nunjucks template engine, for example, then you can replace those code blocks with something like

{% include "header.njk" %}
{% include "footer.njk" %}

4. Rename file extensions

Rename all HTML files so their extensions are .njk instead of .html.

5. Install an SSG

Create a new folder and install an SSG. In this case, I’ll install Eleventy.

mkdir mysite 
cd mysite
npm init -y
npm install --save-dev @11ty/eleventy

Move your website files to your new Eleventy project. To follow Eleventy’s default conventions, your folder structure should look something like this.

Note that we put the header and include partials in the “_includes” folder under the “src” folder. Therefore, our header and footer include references should be updated to look like this

<html>
<head>
	<title>Home Page</title>
</head>
<body>
{% include "src/_includes/header.njk" %}
<section>
	<p>Hello, World!</p>
</section>
{% include "src/_includes/footer.njk" %}
</body>
</html>

6. Test

If you don’t create an Eleventy config file, then Eleventy will use all of its defaults and output built files to a “_site” folder and it will build the partials as well.

Since we don’t want to build the partials, let’s create an Eleventy config file.

7. Create an Eleventy config file

In the project root, create a file called .eleventy.js with the following content.

module.exports = function(eleventyConfig) {
	eleventyConfig.addPassthroughCopy("src", {
		//debug: true,
		filter: [
			"404.html",
			"**/*.css",
			"**/*.js",
			"**/*.json",
			"!**/*.11ty.js",
			"!**/*.11tydata.js",
		]
	});
  
	// Copy img folder
	eleventyConfig.addPassthroughCopy("src/img");

	eleventyConfig.setServerPassthroughCopyBehavior("copy");

	return {
		dir: {
			input: "src",
			// ⚠️ These values are both relative to your input directory.
			includes: "_includes",
			layouts: "_layouts",
		}
	}
};

If you rerun Eleventy, you’ll see that the partials are not built and copied to the output folder.

8. Create a layout (optional)

If you want your page content to be wrapped in other content, you can create a layout. This is called template inheritance. Both Nunjucks and 11ty have their own template inheritance mechanism. With Nunjucks, you inherit a parent template using 

{% extends "parent.njk" %}. 

With 11ty, you inherit a parent template using front matter, e.g.

---
layout: parent.njk
---

Nunjucks supports template blocks natively, but it doesn’t support front matter. 11ty supports front matter, but it doesn’t support template blocks natively. Learn more about creating a layout using 11ty’s template inheritance mechanism.

Recently, I needed to clone a website and make a few minor changes to it. I wanted to publish a slightly modified copy of the website. Luckily, it’s easy to do that using wget. Here’s how I did it.

1. Install wget

I’m on Mac, so I installed wget using Homebrew using the command

brew install wget

2. Download site

I wanted to download this small website. I used this command:

wget -p -r https://events.govexec.com/qualys-cyber-risk-conference/

• The -p flag means download all page requisites, such as images, stylesheets, etc.
• The -r flag means recursive.

Learn more

3. Search and replace

Since I downloaded a bunch of HTML files, if I wanted to replace a common element on multiple pages, the easiest way was to do a search and replace. Using VisualStudio Code, you can easily find all HTML blocks within a particular tag using a multi-line regex. Here are some example regexes:

<footer(.|\n)*?</footer>

<script(.|\n)*?</script>

<a class="popup(.|\n)*?</a>

Note: these regexes only work if the tags don’t have any nested tags with the same name.

With so many video codecs and containers, it’s easy to get confused. Here’s a simple explanation.

Codec (Video Format)

Codec stands for coder-decoder. Video codecs are algorithms for encoding and decoding video data.

• An encoder compresses video streams, which reduces the amount of data for storage and transmission.
• A decoder reverses the conversion for playing or editing a video stream.

For simplicity, you can think of a video codec as the video format.

Examples of video codecs are H.261, H.263, VC-1, MPEG-1, MPEG-2, MPEG-4, AVS1, AVS2, AVS3, VP8, VP9, AV1, AVC/H.264, HEVC/H.265, VVC/H.266, EVC, LCEVC

Currently, the most popular codec is AVC/H.264.

Container (File Format)

With respect to video, a container is a data storage. It can include compressed video and audio sequences, subtitles, service information and metadata. It is a package or bundle.

For simplicity, you can think of a media container as the file format.

Examples of media containers are MPEG-1 System Stream, MPEG-2 Program Stream, MPEG-2 Transport Stream, MP4, MOV, MKV, WebM, AVI, FLV, IVF, MXF, HEIC

Currently, the most popular container is MP4.

There are many ways and tools you can enhance a photo. If you’re a professional photographer, then you’ll likely have advanced methods, but for the average person, you’ll probably just want some quick and easy solutions. Like most average people, my photos are mostly taken from my phone (currently, Google Pixel 8). However, when vacationing, I also take a lot of video using my Insta360 X3 camera, and I’ll occasionally want to take snapshots of a video frame to add to my photo collection. With this in mind, here’s my current (simple) workflow for upscaling and enhancing photos.

Enhance a Photo Using Google Photos

First, upload your photo to Google Photos. Then, use one of the presets to enhance the photo. Here’s an example photo without any enhancements applied.

The average person might that the photo looks fine, but it can significantly be improved. Here’s how the photo looks when you click on each of the suggested improvement options.

Note that Color Pop tried to isolate the subject and convert everything else to grayscale. It’s not perfect because the subject’s right arm is partially gray. To fix this, you could select the subject in Photoshop either manually or automatically, invert the selection, and convert the selection to grayscale.

Now, let’s say that you have a heavily underexposed (dark) photo. (Learn more about under and overexposed photos).

If you click the “Enhance” or “Dynamic” options, you’ll get this.

For comparison, here are the photo’s input levels in Photoshop.

If I were to manually correct the exposure in Photoshop, this is what I’d get.

The photo is significantly improved, but it doesn’t look exactly like it does using the Google Photos presets.

If the Google Photos presets don’t look good enough, you can make many adjustments in the Settings tab. In the example below, I started by choosing the “Dynamic” preset, and then in the Settings tab, I increased the brightness.

So, for the average person, using Google Photos to improve photos is easy and usually adequate.

Enhance a Photo Using Topaz Photo AI

Topaz Photo AI can do many things to a photo, including

• remove noise
• sharpen
• adjust lighting
• balance color
• recover faces
• preserve text
• upscale

You can also just run autopilot and let Topaz choose settings for you.

For me, I mainly use Topaz to enlarge (upscale) photos, remove noise, which can result from adjusting the levels of a heavily underexposed photo, and to sharpen photos. These improvements are particularly useful when I take a snapshot of a 1920×1080 video frame. For example, here’s a frame from a video.

I want to zoom in on the subject, crop it, enlarge it, and enhance it. Here’s the zoomed-in part cropped. The dimensions are 1048 x 589 px.

Now, I’ll drag it into Topaz and run autopilot to upscale and enhance the photo. It will take a minute to process. Here’s how the photo looks enlarged by 34% before enhancing it with Topaz.

Here’s how it looks with Topaz enhancements applied.

There is a difference, but it will be more obvious when you zoom in. Below is a comparison zoomed in at 67% before and after using Topaz.

At this point, you can copy the upscaled and sharpened photo from Topaz and paste it into Google Photos to enhance it.

Topaz Photo AI isn’t perfect, but depending on the original photo, it can often product amazing results.