Tarot & Web Design

Tarot & Web Design.png

Tarot is a wonderful tool when it comes to making decisions, planning goals and utilising it as a way to write down our thoughts and feelings. But, did you know that tarot can be used to create mockup layouts for web design?

The idea spawned while creating a website layout via WordPress. After configuring my installation, I was presented with a blank layout. You ever get the sense where you're staring at a blank page and feel a sense of agitation coursing through your veins as you're trying to come up with something decent? Maybe it's the Virgo Moon in me, but I love to plan things out.

Regardless of your skill level and which platform you're using when creating a potential website, I have provided two sample spreads where you can utilise the next time you're working with a client (or giving your own website a makeover). Keep in mind that the mockup tarot spreads are an example; you can customise to however you want, depending on your vision. If you need to pull out more cards in elaborating your potential design, feel free to do so!

Mockup Tarot Spread 1: Call To Action, Body and Right Side Column

Tarot & Web Design (1).png

To show how the first mockup layout is done, I pulled out the cards below: 

 Deck: Golden Universal Tarot by Lo Scarabeo

Deck: Golden Universal Tarot by Lo Scarabeo

Here, we have the 10 of Swords, 9 of Pentacles and 10 of Pentacles. Given from the overall vibe of the layout, it's leaning towards a website dedicated for grounding ritual work and/or coaching in the areas of finance and self-confidence. The 10 of Swords represents the Call To Action (Main Header). When a potential client enters the website, they'll be presented with a message that can indicate the need and desire to bring back their confidence after feeling defeated. Or maybe they're feeling stuck and not sure if they're willing to move forward. We go to the 9 of Pentacles as part of the Body section. This is where it'll answer the solution for the Call To Action; you can indicate what type of work that you've done successfully or perhaps indicate what can be done to pull yourself out of a low point. The 10 of Pentacles can be a short overview of the practitioner or a section where your credentials can be viewed. Since the 10 of Pentacles have appeared on the right side, you can also use this opportunity to have a testimonials section of previous work. 

Remember - the cards can be switched around if you feel that the layout doesn't make sense. For the purpose of this demonstration since I'm building the layout under WordPress, I'm treating the areas as sections and widgets.  

Mockup Tarot Spread 2: Call To Action, Body, Services and Right Side Column

Tarot & Web Design (2).png

For this mockup layout, here is the snapshot of the cards where I expanded from the previous spread: 

 Deck: Golden Universal Tarot by Lo Scarabeo

Deck: Golden Universal Tarot by Lo Scarabeo

As I mentioned before, you can switch up the cards to however you want. In this case, I decided to switch the 10 of Pentacles and 9 of Pentacles positions from the layout. The 9 of Pentacles for the right side column made sense since we do see a woman brandishing her accomplishments and showcasing her achievements on the work that was done. You can also place emphasis as to why he/should work with you if the potential client chooses to hire you as their mentor. The 10 of Pentacles as the Body area aligns with the Call To Action (10 of Swords) since it's addressing on how to be financially free or building back up self-confidence through some ground work. Notice the number 10's on both of them? In a way, it's representing two large scales of completion: one on the disastrous end where he/she may need help on and the other one as a potential future where they can fix their previous state to something more tangible and realistic.

The three additional cards that I pulled up can represent either the services or the benefits in working alongside with you. In this case, we have Justice, Knight of Wands and Two of Swords. The Justice card can indicate that by having the potential client work with you, they'll have a firm resolve with their situation. The Knight of Wands can indicate that the potential client will feel uplifted and carry out their new lifestyle using your tried and true plan. The Two of Swords can represent the outcome that they'll no longer feel conflicted. Or, you can indicate that if they're not happy with the service, they can request a refund after a certain period of time. 

Piecing The Layout Together

Depending what program you use to create your wireframe (I'm using Adobe XD), you can have a sense where the overall website layout will look like in terms of content placement. When figuring out a colour palette - if you're designing for a client, ask them what colour moods and inspiration they're looking for in terms of expressing their message. If you're designing the layout for yourself, take a look at the tarot cards to find some colour inspiration. Personally, I feel that the potential layout I'm creating would have notes of yellow, orange, green and maybe a smidge of grey and blue. 

Here's my wireframe that I created quickly on Adobe XD. Yes, I know it looks horrible but that's why we have Photoshop and Illustrator in creating prettier graphics. 

 A rough wireframe on what the main page will look like.

A rough wireframe on what the main page will look like.

There you have it! I hope the blog post will provide some design inspiration and some help to those who are looking to revamp their websites. Of course if you need a website done, check out our services for more information.  Let me know your thoughts in the comments section below!