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.

Contrast

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.

Repetition

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.

Alignment

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.

Proximity

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!

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!

Target Audiences for Web Pages

Has there even been a time where you were searching for specific information, and you get to a website that’s simply…unappealing? It has the information you’re looking for, even extra sources to use for reference. But maybe the level of vocabulary used is too advanced or vague to comprehend. Maybe the layout of information is hard to read or the graphics and colors displayed are unattractive to look at. At times like this where we have abundant access to information, it makes sense to dismiss the website in search for something “better”. But who can say that your definition of better matches the concept that the web designer had in mind. It could be, that instead of bad web design, the website was put together with a certain type of audience in mind. And that is how we will go into properly determining target audiences for web pages.

Start With the Web Page’s Purpose

Photo by Christina Morillo from Pexels

Before searching for the best target audience, you must ask yourself what the web page would be for, and who would need it? Who would be interesting in the topic of your website? Was are you offering that they might need? You can’t expect professional business workers at a site that gives instructions for 5-ingredient meals. And even if they find interest in it, it’s not wise to format such a web page for professionals only. If you feel that your web page will mainly attract amateur chefs or college students, 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 build up a definite target audience.

Look Up the Demographics

Photo by Jopwell 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. If your target audience is retired people, ages will range from their late 50s 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 gender, location, hobbies, lifestyles, and current trends they may share. Of course, some of that information is closer to psychographics, but the more info the easier!


As simple as it sounds, it takes a lot of research and web page testing to ensure that the web page is ready for the public. It may take weeks, months, years, (an eternity), 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. I hope this information (and unnecessary words of encouragement) can assist on finding and locking on your target audience. For more information, feel free to check out this website on identifying your target audience. Enjoy!

CMYK & RGB: What’s the Difference?

Here we are again with another round of ‘What’s the Difference?’ in the world of digital design! In this blog we’ll cover the two types of color modes and their comparisons. To many digital designers, these terms are well-known but not as much spoken about. For all we know at the moment, CMYK and RGB deal with colors and how these colors are seen in certain situations. But what about them? Why are they so important in designing graphics? And what are they specialized for? With these questions set in stone, we’ll begin with the research on these two important color modes.


CMYK

Photo by Dario Seretin on Unsplash

For starters, the color mode CMYK is an a abbreviation for Cyan, Magenta, Yellow, and BlacK. These are the colors used to print graphics and images. The ink is used via subtractive mixing to turn a blank white page into a page with various particular colors. As stated before, the CMYK color mode is used for graphics and images that will be physically printed, so this color mode is best used with business cards, flyers, t-shirts, restaurant menus, etc. When preparing a digital graphic for printing, most file formats are compatible for CMYK, but some files are most suited for printing than others. The most compatible file formats for CMYK are PDFs, AI (Adobe Illustrator, if you have access to it), and EPS (a good file format for vector programs besides Illustrator).

RGB

Photo by Florian Olivo on Unsplash

Next up is RGB, an abbreviation for the colors Red, Green, and Blue. These three colors are used via additive mixing to turn a black screen into a screen full of colors varying in intensity. Such freedom with the colors can allow the designer to adjust how shaded, vibrant, and saturated the colors are projected. When I say ‘screen’ I’m referring to digital screens such as: computers, smartphones, televisions, etc. The RGB color modes allows graphics to be seen on such screens like icons, online ads, images, videos, and more. Just like CMYK, RGB has file formats that they can work best with. These formats are JPEGs, GIFs, PNGs, and PSD (for Adobe Photoshop).


With this new found information, I believe he have a lot to thank these color modes for (or at least the engineers who created them). These modes are not only responsible for the many physical things we see around, but for the seemingly endless digital graphics we encounter each day. Hopefully this post clears up the confusion for these commonly used terms, and helps you determine when and how to use CMYK and RGB. If you were unsatisfied with the brief explanation, feel free to use the website I used as research for the color modes. Enjoy!

What’s the Difference: Raster vs. Vector

As we continue to expand our knowledge on graphics and design, more questions arrive (to my mind at least). An example of such asked by beginners and amateurs is, “what is a vector and raster and what’s the difference?”, which is fine to question. That’s because for the most part, they basically do the same thing, right? Well not entirely. There’s small differences in composition and uses that a designer should know. These types of edits and images are very important to learn, and it’s a pretty complicated concept to understand. Nevertheless, we’re going down the rabbit hole to get a better understanding of vectors and rasters!


Vector

Photo by Rober González on Unsplash

Vectors are mathematical formulas which explains how paths of a graphic are shaped, colored, and outlined. Vectors allow images to keep their appearance identical to the original image no matter what the image size. This allows them to scale images and graphics to any chosen song. It’s best to use vectors for simple designs with simple colors like logos, illustrations, engravings, signage, etc. This feature can be used in Adobe programs like Photoshop and Illustrator. With these restrictions, most graphics depend on rasters. Despite its limitations on what it can be used for, vectoring is a great tool to learn and take advantage of.

Raster

Photo by Will Porada on Unsplash

On the other hand there’s raster, working with every single pixel of color in a graphic to generate an image, showing precise detailing. Raster can be used for complex graphics like images, digital painting, GIFs, etc. This feature can also be used in Adobe programs along with other design programs. However, scaling a graphic depends on the quality of the image. A rastered image can’t be easily scaled up as they can be scaled down. This messed with the size of the pixels, making the image blurry. Don’t let this stop you from using rasters for graphic editing, because it’s also an amazing asset.


Although it’s not common to find in conversations (in any topic for that matter), vectors and rasters are pretty important in creating amazing, quality graphics and images. Most if not all images or graphics had some sort of involvement with these tools. Hopefully this basic information allows you use these amazing tools when dealing with graphics and images. For more information on vectors and rasters, click the link for this amazing website I found. Enjoy!

Destructive & Non-destructive Photoshop Operations

Photo editing comes in two ways: destructive and non-destructive. That’s pretty much it. The term ‘destructive’ doesn’t mean that the photo is torn up and ruined though (as alarming as it sounds). It’s the way the pixels of the original photo are permanently altered forever. After editing a photo on Photoshop, you can’t open it back up on Photoshop and revert it back to the original. It’s altered forever. Many editors don’t like this idea, so here’s the different types of destructive and non-destructive operations on Photoshop.

Destructive

Photo by Szabo Viktor on Unsplash

As stated before, destructive editing manipulates the pixels on the original photo. Photoshop itself and many other Adobe programs are dubbed “destructive editing applications” because of its many adjustments that destroy the original photo pixels. This makes it hard to give exact examples of destructive editing since the entire software is a destructive editor (how dangerous!). Once you tint, crop, add filters, erase, or use the healing brush, the pixels are no longer the same. Of course, this is a disadvantage as you can’t take back what you changed-and undo and redo doesn’t count in my point. To combat it because Photoshop has a lot of potential, editors find non-destructive ways to edit their photos. These tricks are harder to find if you’re a beginner at using Photoshop, but even Adobe gives info about non-destructive edit methods!

Non-destructive

Photo by Kevin Bhagat on Unsplash

The standard non-destructive method in Photoshop would be to duplicate the original photo and edit it on a separate layer. This is very effective in editing and saving the altered copy while keeping the original untouched. But there’s much more to this safe way of editing on Photoshop. To share a few methods on non-destructive editing, you can crop photos and revert it to its original whenever you please by turning off the “Delete Cropped Pixels” check box. You can also use vector masks and filter masks which hide the pixels you edited instead of deleting them. And then there’s adjustment layers that can edit a photo’s tone and color and change it back to the original whenever you need to.

Overall, Photoshop is a great yet destructive program. Many editors turn to other programs like Aperture and Adobe Lightroom that aren’t destructive. And while that’s well and fair, you don’t have to lose hope on the capability of Photoshop’s operations. There are many ways to edit photos on Photoshop without destroying the original if you look hard enough. If you would like more information on the differences of destructive and non-destructive editing, along with tips on non-destructive editing on Photoshop, click on the links given respectively. I hope you’ve been enlightened!

Adobe Softwares & Its Unique Capabilities

Photo by Matthew Kwong on Unsplash

The Adobe franchise is very popular because of their powerful and efficient softwares for design. Their softwares like Photoshop, InDesign, or Premiere Pro are very expensive (which sucks for most people), but it’s for a good reason. Adobe has created around 16 programs for designing and developing, however, there’s at least 8 that are more useful in the art/digital design spectrum. So let’s go down the list based on what each softwares are used for!


Printing Designs

Photo by João Silas on Unsplash

A good start for the various Adobe softwares would be programs used for printed products. Such printed products would include posters, flyers, book covers, or even logos. In these area, it’s important to incorporate visual attraction with informative skills. From this idea, three Adobe softwares came to mind: Adobe Photoshop, Adobe Illustrator, and Adobe InDesign. Overall, these programs are perfect for creating your own unique logos, format typography, and make certain prints to hand out. To better understand, I’ll give a very brief explanation of what they’re typically used for separately. Photoshop is one of the most popular design softwares used to edit photos, develop graphics, and create digital designs that can be printed or shared online. Illustrator is focused on creating graphics like Photoshop, but in a different way. Illustrators can make was is called vector art. Vector art is mainly for less detailed elements with curvatures and geometric designs. This is useful for making logos and original cliparts. Then there’s InDesign which brings all the amazing design elements and editing photos together in a printed product. It’s like the advanced version of a Microsoft Page layout. With these three software, one is already an equipped graphic designer!

Web Designs

Photo by Web Hosting on Unsplash

More on the digital side of design, web design is fairly easy now-a-days because of the websites and programs that allow a user to have their own website. (kind of like this!) After looking at all of the Adobe softwares, a few programs seemed perfect for the part. This would be Dreamweaver, Fireworks, and Photoshop (again). I won’t go into Photoshop because I already gave it props, but it is very versatile so I added it. On the other hand, Dreamweaver is more based on programming and using codes. Because of the software’s functionality, most users rely on it for creating websites in a simpler way. Fireworks is like the other side of Dreamweaver because deals with vector designs for interactive websites, regular websites, and more. This software is the Illustrator for websites and mobile applications, to state it bluntly. And with the former two, websites and mobile apps wouldn’t be a bad idea to execute.

Animations & Videos

Photo by Jakob Owens on Unsplash

Moving on to something that’s less still and more lively, Adobe also have softwares for videos and animations. In this era, films and animations have become more popular as technology made them more engaging and thrilling. So of course Adobe will create more amazing softwares to create this type of content. This is where Adobe Animate, Adobe Premiere Pro, and After Effects comes in. Animate, once known as Flash, is used for creating cartoons, interactive comics, and much more. It was very popular years back, whereas now technology has further advanced to something faster and better in quality. Despite that, many websites and media players still put it into use. Premiere Pro is more video-oriented with the ability to edit video tracks to create movies. It’s very basic on it’s capabilities because it focuses on the actual video tracks and clips than special effects. But that’s where After Effects takes the lead by adding special effects to both videos and animations. It makes seemingly hard effects like adding text to frames or using a green screen very easy to manipulate. It truly makes something come to life (as cheesy as it sounds).

Photo Editing & Design

Photo by Jakob Owens on Unsplash

Last but definitely not least we have photo editing and design. This is definitely the classic form of art so of course there’s many software that can edit and add effects to photos. From Adobe, there’s Adobe Photoshop and Adobe Lightroom which can edit photos and add graphics. Again Photoshop is a very flexible software that can do a lot if you know how to use everything and take advantage of it. That’s why it’s great for editing photos. Then there’s Lightroom, which arranges and organizes photos. This is great for making collages or panoramas after editing it on Photoshop. It sounds simple in theory but is very powerful and efficient in its work.


That being said, there’s nothing more to say about Adobe softwares. Actions speak louder than words and their capabilities speak for themselves. Each software is very flexible and user-friendly so it can be used in a work environment or in the comfort of your home. There’s much more Adobe softwares that haven’t been mentioned, although the softwares already mentioned are more than enough. For more insight on Adobe’s other great software, check out this website that I used fro research!