Website Design

I really hate having to scroll all the way down before seeing the final results. In the event that user’s (you me, practically everyone) skims over text…a primary UX principle – that is, humans use rapid eye movement to pickup on keywords to get a general overview of material. Ok, TMI…

laptop_mock

In my last post I shared how I create color palettes and I created one to use as a reference for a simple landing page website design shown above. When working on mini self projects I usually design for a fictitious company site, this way I can design the brand identity and logo from scratch. In this case, I decided to design for a yoga studio.

Below is the color palette & basic font choices I worked off of. I really absolutely love the script font that I chose, and I adore ARDYANA PUTRA’s work. He is a very talented typographer, go check him out!

mini_identity

 

Before I started creating my one page website in Photoshop I downloaded a free Bootstrap Photoshop PSD Template, provided by Joseph at GhostlyPixels.

The reason why I went with Joseph’s free template is because he offered the latest version of Boostrap, and in the event that I choose to translate this design into code, the process will be simpler as elements on the page will match the same columns widths and such set by Bootstrap…Anything really can be changed by CSS need be, regardless its best practices to work off of a grid.

When you have downloaded and opened the Boostrap 4 PSD Template, you will find that Joseph has kindly included a layered PSD file including a 12 column grid along with Boostrap’s body text, heading, font sizes, and buttons. Again everything is adjustable by CSS, so I completely re-styled the page but made sure elements still fit within a 12 column grid.

Screen Shot 2019-03-13 at 7.35.50 AM.png

I thought I would also share my folder structure. I always begin by creating folders for fonts and stock images. Everything has a home and a proper place, this way if I need to revisit the project or use elements from this project in another one I can easily find everything. Staying organized is a good habit even when working freelance.

Screen Shot 2019-03-15 at 9.01.47 PM.png

I didn’t want to go too much into the process or else this would become a lengthy post. However I did want to share with you my daily design exercise for the day. Below is the complete layout. If you are reading, skimming, or just stopping by, my sincere thank you. If you like or dislike this design, or have suggestions Im all ears, drop a comment!

site_mockup.jpg

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s