UX/UI Design & A/B Testing

Remember when the internet and web development was a complicated thing that was only reserved for geeks and nerds. I don’t since I never lived in a time where the internet was a mystical and intricate subject, but we don’t have to have that mindset anymore. Now with user-friendly programs, anyone can access the internet to create their own web pages. This makes it not only easier for people to publicly express themselves but can be an enjoyable activity. However, this is only possible for common citizens who aren’t fully knowledgeable on web development. As mentioned in past blogs, web development is a very complex thing, both in technical and creative aspects. In this post I’m going to elaborate more by discussing what UX/UI designing is, as well as how A/B testing works.

Photo by picjumbo.com from Pexels

When creating a web page, a web developer can’t think of designing as pretty color palettes and fancy decoration fonts. They also have to consider how it interacts with the user, and if it properly accomplishes its goal of attracting the user who lands upon it. This is where UX Design, or User Experience Design steps in. UX Design visualizes all the possible interactions between the user and the web page’s elements. It focuses less on visual appeal and more on functionality and quality, which is why UX design can be used with any product, virtual or not. On the other hand, we have UI Design, or User Interface design. Unlike UX design, UI design is a digital term because it focuses on the user’s experience with the web page via visual appeal instead of technical elements. This is where graphics, typography, layout, and responsiveness come in to web development. UX design and UI design often get mixed up because of how intermingled their tasks are. To make it easy to understand, I like to think of UX design being responsible for an attraction ride functioning properly as it carries their users along, so the users and ride comfortably. And UI design uses visuals to attract the user and help guide their attention through the ride.

Photo by Christina Morillo from Pexels

Along with UX/UI Design, there’s A/B Testing or Split Testing. It’s a simple process that can help a web developer design a web page that works best. They start off by taking their own webpage and creating modifications (big or small) to make a different version of the page. Then a random selection of users will receive either of the versions, similar to an experiment with a control variable and testing variables. From there, how the users interact with the page is recorded and analyzed by a statistical engine which will allow the web developer to see whether each variation brings negative or positive change. These tests can be done each modification at a time until it’s combined to make an overall improved web page. Performing A/B Tests can help increase your webpage’s user-experience and find out what elements are more respondents and why for future projects. There are many companies that are willing to help you test your web page, one of which is who I used for information about A/B Testing.

Since web developing is a digital job, it can be done remotely or at a corporation. Many employers looking for UI/UX Designers are very specific about what they want in their employee. Some hire designers based on skill level (Junior or Senior designer) others on specific platforms (Mobile, Desktop, etc.), and some hire people who are capable of leading the project. Though there’s a lot of programs that allows users to create their own website without proper knowledge of web development, many businesses depend on skill graphic designers for professional products. Some of the qualifications that employers ask of is a portfolio of your work, a certain amount of years of experience, knowledge in web, mobile, and interactive design principles. I hope all of this information assisted in improving your skills and the quality of your web developments. To learn more about UX/UI Designing and A/B Testing, check out the links given respectfully. As always, good luck!

Page Size Optimization & Digital Graphics

A website is more than just links, graphics, and words. There’s another side of web development that makes the page more user-friendly. A website can’t only look functional, it has to work functional as well. And that includes what is added to the web page. When a web page is slow, it doesn’t matter how amazing it looked (or could’ve looked) because humanity no longer has the time to wait a few seconds for a digital location rich in information. This is what makes Page Size Optimization so important, as it directly effects the size of your web page along with the time it takes to load for a user. I’ll also cover the type of digital graphics that can be inserted in to a web page and how it’s efficiently used.

Managing the Page Weight

Photo by Christina Morillo from Pexels

To start off, we need to know what Page Size Optimization it. It’s the practice of managing the weight or size of a web page by its amount of content in order for it to keep its functionality. Think of it as a wheelbarrow being pushed up a hill. It does its job well at holding objects, but the heavier the items inside the wheelbarrow, the harder it will take to reach the top of the hill. This of course results in a slower time to push the wheelbarrow. A web page can only load so much content at a time, which is something that a user is quick to notice. To reduce the page weight and speed up loading time, try to remove excessive custom fonts. Of course, custom fonts add uniqueness and originality to a web page, but it carries a lot of weight which adds up to your overall page size. Therefore, it’s best to also limit the number of custom fonts you use to at least two. If you can’t bear to let them go, many web developers recommend making WOFF2 files. It converts your custom font to the most efficient format for browsers, which helps reduce the weight of your web page. Another thing that can reduce the page weight would be to limit the sizes of your images. The dimensions of an image should never be bigger than its container. You can make the size to fill up the entire container if you wish, but never make it bigger. To help with the image’s file size, you can also compress the image, which shrinks the image even more.

Digital Graphics for Web Pages

Photo by Tranmautritam from Pexels

To add on to images in a web page, it’s important to know when it’s best to use JPG, GIF, PNG, should be used in a web page. To start off, JPG have always been the first file type to depend on for web images. They allow raster editing and compression, which helps them download easier. Next, there’s GIF, or Graphics Interchange Format. It’s a raster format that is used for animated graphics and comes with customization settings which could help reduce the file size. It’s best to use it when you need a web animation that’s a small file and allows transparency. Lastly, there’s PNG, or Portable Network Graphic. It’s also a raster format that comes with transparency and a higher color depth. PNGs have currently taken the crown for the best file to use when needing high-quality web graphics that are still small in file size. 

Overall, web development can be very methodical, so I hope this collection of information helped clear things up. If you couldn’t tell, I am not a professional web developer, so I too had to research information on it. If you would like to learn more about Page Size Optimization and when to use Digital Graphics, check out the links respectively. Good Luck!

Target Audience

A universal accomplishment is having global internet access available to any user who can afford the resources. What once was a luxury that could only be afforded by the few wealthy is now a privilege for all. And as great as it sounds, we have a tendency of never being completely satisfied with what we acquire. Before, the internet was filled with pages that didn’t have enough information. But now the internet is filled with pages that are…a bit unappealing. It could be the level of vocabulary is too advanced or vague to comprehend, or layout and design is too distracting and makes the information hard to read. Regardless, at times like this where we have abundant access to information, it makes sense to dismiss these types of websites in for something “better”. This is because if a web page is unappealing to you, it either means the site was put together with a certain audience in mind or completely disregarded who their target audience could be. And with that being said, this is how well go into properly determining target audiences for web pages.

Understanding the Purpose or Brand

When making a web page with a specific purpose or brand, you must ask yourself what the web page would be for, and who would need it? Who would be interested in the topic of your web page? Is it offering something that they might need? You can’t expect people against animal cruelty at a site that speaks on trophy hunting. Imagine who would be interested in your topic and brand when formatting and designing the web page. If you feel that your web page will mainly attract enthusiastic sport hunters or even those interested in taxidermy, then narrow down your target audience from there. Once you know what your web page will be about and you get a basic idea of who’d be interested, then it’ll be easier to picture your particular target audience.

Researching Demographics

Photo by Lukas from Pexels

Now that you have a general idea of the audience you’ll likely receive, it’s time to research the demographics of the audience. Finding data on the demographics will better help you determine how to set up and design your web page. This would include one’s age, sex, marital status, occupation, and more. Of course, is isn’t easy to find the exact demographics of your target audience but gaining a few information about who would be interested in your web page will definitely help boost your SEO (Search Engine Optimization). If your target audience falls around men who are middle aged or already retired, ages will range from their 40s to early 60s. This data alone can already make you settle on a text in big and easy-to-read fonts, with colors that are easy on the eyes. But of course, don’t just stop at age ranges. Web designing professionals look into, location, general hobbies, lifestyles, and current trends they may share. Of course, some of that information is closer to psychographics, but the more info the better.

As simple as it sounds, it takes a lot of research and site testing to ensure that the web page is ready for the public. It may take weeks or even a few months before you feel like you’ve matched your web page with your target audience. But even if it’s easier said than done, it can still be done. All it takes is meticulous care and a lot of patience. I hope this information can assist on finding and locking onto your target audience. For more information, feel free to check out this website on honing in on your target audience. Enjoy!

Using the Joshua Tree Epiphany in Websites

The Joshua Tree Epiphany can easily be seen as the blueprint of basic design. It consists of Contrast, Repetition, Alignment, and Proximity. You can’t have the most unique and flashiest idea, but without these principles, there will always be something…off. It’s always refreshing to see simple designs that flow so well together because of the usage of the Joshua Tree Epiphany. So, in this blog will be highlighting the usage of the Epiphany in web design. And our example will be Lemonade, a Home and Rental Insurance company.


To put it simply, if elements aren’t the same, make them stand out. Contrasting items in your design draws attention, which is essential for anything that you want your audience to pay attention. Lemonade uses this principle very well in the way they sparsely use pink in their mainly grey and white landing page. This color pop keeps the audience hooked and makes it easy to find certain links or CTAs.


Now if you’re going to make designs specified to grab one’s attention, make sure to repeat them. Consistent elements in a design keeps everything unified and recognizable to any user, no matter how many times they’ve visited the website. In this website’s case, the pink color was used throughout their FAQ. And it wasn’t used randomly, but for hyperlinks to other pages in their website. Which is an ingenious idea, even if it’s a simple.


Next is something simple, but equally important. Placing things on the website randomly only brings confusion. Giving the elements in the website some sort of a visual tie keeps things clear and readable. Lemonade shows a good example in their blog page. Center aligning the title and graphics, left-aligning the text, and keeping social media links to the right.


And lastly, there’s proximity which is grouping related items together to make visual units. It removes clutter and gives clear structure to your design. Organized designs are more likely to be read and remembered. You can see this in the way the introduction for ‘Making a Change” is close to the title and spaced out from the next piece of text. Using space instead for clear transition instead of graphic designs is much more efficient in easy readability.

As you can see, the Joshua Tree Epiphany is essential for a well-rounded website. Hopefully this quick explanation is enough to quickly use it to practice. Unfortunately, all this information comes straight from my personal notes, but feel free to look for websites like Lemonade that use these principles for a good reference. Enjoy!

What Makes a Good Landing Page?

In an earlier blog, I covered good strategies for designing a website. Considering things like your target audience, color psychology, and functionality, are good examples of such strategies for your website overall. But what about a website’s first impression? In this case, the first thing an audience would see can either be the website’s homepage, or its landing page. Since every website has a homepage, we’re focusing on something less common to land on. While a landing page might seem unnecessary for your web page, it’s at least good to know the do’s and don’ts of a landing page if it’s ever needed.

Designing the Perfect Landing Page

Photo by Le Buzz on Unsplash

For starters, a good landing page must be straight to the point on its purpose with very little else to distract the audience. Keeping things simple and welcoming is essential for attracting any audience that lands on the page. It’s also important for the landing page to answer any question that would come to mind when reaching the main focus of the landing page. These would include features, any costs, and comparison to any of your competition. Make your landing page flow and engage the audience enough to follow through whatever you want them to do. And finally, you want to make sure that your ‘Call to Action’ is straightforward; if you redirect your users too often, they’ll leave in frustration. And if you want to avoid frustrating your users, let’s move on to mistake that should be avoided when making a landing page.

The Don’ts of a Landing Page

Photo by Pixabay from Pexels

Surprisingly, a major blunder with landing pages is that its loading time is too slow. With this being the first thing they see after clicking on the website, landing pages that take more than 5 seconds to appear gets rejected before their even given a chance. This is a problem that revolves around coding the landing page so that it can exceed the insanely low patience and high expectations of the web user. Another mistake to avoid is having a weak headline. A decent balance between direct and creative is ideal, but it’s safer to play direct if you can’t brainstorm attractive headlines. As long as you replace these possible slip-ups with the suggestions above, you’re go to go!

I hope this information helped gather a well enough idea for a landing page, or the consideration of making one. Of course, even without these tips there’s nothing wrong with looking up landing pages for reference. For more information on making good and bad landing pages, check out these websites for each, respectively. And as always, enjoy!

The Rave on Bootstrap CSS

Technology has really expanded its inclusiveness due to the abundant access that the general population can retrieve. This is because now not only do we have everything, but we can learn how to do everything. Remember when people who knew how to make print designs or design websites were seen as super geniuses (or just nerds)? Now with a few lessons and programs with free-to-use graphics, anyone could be a graphic designer! This is where websites like Canva and Bootstrap CSS step in. For now, we’re going to target Bootstrap CSS to figure out why this powerful website is so highly praised.

What is Bootstrap CSS?

Photo by Caspar Camille Rubin on Unsplash

Bootstrap CSS was released in August 2011 as a free-to-use mobile-first framework for developing websites, including templates and JavaScript plugins. Some of the HTML and CSS design template they provide are for typography, navigation, tables, and much more. It’s quick and easy development process allows developers to create responsive web designs. In other words, your website will be able to automatically adjust themselves to work on all devices. As mentioned before, you don’t have to be a whiz at programming to build a website because anyone with basic knowledge of HTML and CSS and use Bootstrap. And because Bootstrap is compatible with all modern browsers like Chrome, Firefox, Safari and Edge, it can be used by virtually anyone with a PC. It’s no wonder that there’s so much hype about such an product.

Bootstraps Popularity

Photo by Karl Pawlowicz on Unsplash

Bootstrap quickly gained popularity as a reliable front-end framework for building websites and web applications. Such a reputation can be shown in the fact that it have a market share with more than 16% of all websites. In January 2020, there were over 1.74 billion websites on the internet. This makes Bootstrap accountable for over 278 million websites (if I did my math correctly). With this much websites found globally, what makes this design framework so infamous? It’s simply because of how effective and easy it is to use. Frameworks such as Bootstrap can add consistency to your projects without having to constantly recode since it comes with pre-built options. This is what allows developers to build beautiful, user-friendly web designs. So it goes without saying, if you wish to create great responsive websites, use Bootstrap

It’s honestly thrilling when you think about how far technology has come from here. Hopefully this information (and recommendation) helps you out with any future web designing projects. For more information check out these websites about Bootstrap CSS and its features here. Enjoy!

Design Strategies for Websites

In my last post, I covered the methods for finding the perfect target audience for your website. But now that you’ve found them, you must move on to step two. This is reeling in the audience to attract regular visitors and promote whatever your website is about. Of course, when one thinks of strategies for designing attractive websites, it’s mainly about the aesthetics. And while it’s very true, it’s also important to make sure the website is consistent and user-friendly. There’s many other strategies for designing a website, but for now we’ll just cover the basic tactics of web design.

Designing Eye Candy

Photo by Hal Gatewood on Unsplash

Making your website visually pleasing for your audience initially stems from any ‘needs’ they may have. From the same example before, if the website’s target audience is elderly people, you should consider larger and easy-to-read fonts. Once all the ‘needs’ are figured out, you can move on the the ‘wants’. And what you should want is a balance of color and typography that accurately represents the topic of your website. Choose color palettes that aren’t too contrasted, but hues from the same color family to bring harmony. Use the principles of typography to pick a few fonts that match the feelings you want to convey (e.g. For sophistication you’d use script, cursive fonts).Finally, when adding info graphics or photos, use the rule of thirds to properly balance the placement of graphics throughout your website.

Use Familiar Conventions

A great part of designing everything is that you have the liberty to do whatever you want. This truth isn’t limited to the layout of a website, but it should be. It’s well and justified to want to design a website that’s unique and full of innovative graphics. However, it’s more ideal to create a website with conventions that the general audience can recognize. This would include placing the web logo at the top above the navigation menu. Or having the contact info at the bottom of the site shown with identifiable icons. This is allows visitors to browse a new website and automatically understand where to go. And that’s much better than them leaving the website in a flash because everything was too “abstract” to navigate through. Sometimes, comfort-zones are the way to go.

Putting aside the hard, dedicated work it takes to develop a website, it takes a lot of brainstorming for designing a website. And that’s because you have to make creativity compromises for yourself and your audience. Something that looks amazing to you, may not be so appealing to your target audience. So, I hope these strategies help give you a create a standard plan for designing your website. There’s much more designing tips out there which can be found in this website about effective website design. Enjoy!