How much copy should I write for my website?

I’ve been working with a client on redesigning their website and they have asked me  “how much copy should I add to this page” OR “is this enough copy?” In my head I’m thinking of the best way to answer without contradicting myself or making it more complex than it needs to be when explaining to someone who doesn’t know a thing about web design.

At first, I wanted to respond from the marketing perspective in that copy helps drive SEO. However, my client was already using other successful SEO strategies and therefore it would be unnecessary. I’m all about educating my clients as much as possible, and I didn’t want to blurt out some answer without some real thought behind it. So what do I do? I went to good old Google, I typed in how much copy to have on my website?

I click on the first article that pops up which you can view here. And in this article, the author has provided an infographic. And of course that infographic is from The Nelson Norman group, how could I forget!? What an amazing resource. I was able to give my client a short and concise answer based off of the infographic:

Screen Shot 2019-04-03 at 5.13.26 PM

As a designer we may take on the role of copywriter, we may, in fact, take on many roles, but we should always also take on the responsibility of being truthful and honest. -Luka P.


If you’re not sure how to explain something to your client, it’s totally ok to quote another resource. I’m just wondering why I never thought of that in my prior client facing projects. Sometimes we don’t always have the right words despite our experience and knowledge, and I am encouraging you today that, that is ok. As long as you are honest and providing high quality work, usually clients don’t mind if you say, ” I am honestly not sure, but I will look into it and get back to you.” I find thats more productive of an answer rather than getting stumped and feeling inadequate.

Sorry not too many pretty visuals today, however I may share with you in my next post some of the things I have been designing.

Thanks for stopping by & stick around for all design related topics 🙂


The Little Mermaid App


I had this great idea awhile back for some freelance projects, what would Disney character’s websites look like? What Services would they offer? Or what Apps would fit their characteristics and personality? With that said, I decided to create Ariel’s App, which you will notice is similar to the Offerup App with changes to fit the context of Ariels’s grotto from the movie.


This project was so fun and had so many different design elements to it. All the items in Ariel’s Grotto were photoshopped. When I originally had the idea for the App, I was picturing it as more illustrative and similar to the movie, but I am not necessarily a character illustrator. I knew I could make something interesting in Photoshop but it would be more closer to reality than a cartoon style, so I went with it. Below are some of the various items I photoshopped, I wanted to show you the details. Let me know which one is your favorite!

Keep scrolling to see all the additional pieces that went into composing this UI…


I even Photoshopped the model that I chose for Ariel. I changed her eye color, and colors of her wardrobe to match the coloring of the UI. I only needed the model’s face for the profile photo and because the thumbnail size is around 300px I could get away with not making perfect selections or removing her flyaway-hairs.


I did use Font Awesome to create the icons, it is my number one go to. The conch shell replacing the phone was however created in illustrator. The chess piece which represents the home button was left untouched. The camera was taken from font awesome, but I added bubbles to it. The star fish is actually titled disease in font awesome? And the mermaid’s tail-fin was inspired by the seedling icon.


I created three screens originally because I had planned on presenting a GIF which would demonstrate a CTA button, basically the user would select the profile button (mermaid’s tail-fin) and then the profile screen would appear). I had trouble with the GIF appearing grainy, so for the sake of time I may include an animation piece for this project in my next blog entry ( that would be composed in AE).



Hope you enjoyed seeing the results as much as I did! Always, thank you for stopping by I appreciate you checking out my work and would really appreciate it if you would show some love and hit the like button down below this post 🙂

Check out what other Designers are saying about this project on my Dribble account

The Design Interview Exercise

A Design Exercise I completed. Keep scrolling for the case study.

By now I have had various requests for different design exercises. In fact, I even landed a job based off of one and it ended up being a great short-term gig. This seems to be a topic of debate for which I do not currently take sides. I also came across this interesting article: “Design Exercises are Bad Interviewing Practice“.

What are your thoughts? I personally look at design exercises as a way to grow as a designer. I treat them seriously and look at it as if I have received a real-world brief by a real client. In the ideal situation, you would receive feedback to improve your design, but it is not always the case that you hear back from potential employers for various reasons.

Even with a follow-up sometimes there is NO answer. My suggestion is to move on and keep applying! And if you did “waste your time” on a design exercise, change your perspective. Were you challenged? Can you make it better? Did you offer a new solution? At the end of the day, it strengthened your creative muscles and made you physically design something!

If you are not designing something every day on your downtime or freelancing while looking for work that’s just unproductive. As a designer, you are responsible for your growth, with that said…That design exercise given to you by a recruiter or potential employer was a freelance project. I would personally like to share one design exercise that was given to me (the brief has been shortened and slightly changed for NDA reasons). This was specifically for a UX role. I wanted to share with you my process in how I went about solving this exercise.


Redesign the mobile checkout form for a new user at an ecommerce site.


Rachel, a 34 year-old mother, is in an airport waiting to board a flight to Colorado for vacation. She has some time to kill before her flight, so she does some impulse shopping online. This is her first time purchasing anything on this site.

Rachel needs to fill out the checkout form, which contains billing/shipping and payment info. Once she provides that info, the site will allow her to review the info before submitting the transaction.


  1. Define Competitors
  2. Competitor Analysis
  3. Review UI elements & functionality from competitors in detail
  4. Wireframe/Prototype
  5. High Fidelity Prototype


First I thought of online department stores that women around the age of 34 may shop at. I just started to list as many as I can regardless of price, quality, and branding. Then I narrowed down my list to five for two reasons. The first being I was only given a few hours to complete the “task” aka design exercise and the second -based off of my assumption that Mothers are more likely to shop at these 5 online department stores.

General Competitors:

  • GAP
  • Jcrew
  • Nordstrom
  • Macys
  • Banana Republic
  • Target
  • Kohls
  • Zara
  • Maurices
  • Zulily

Direct Competitors:

  • Jcrew
  • Nordstrom
  • Zara
  • Banana Republic
  • Macys

Assumptions are never good in the world of UX -you can read more on this topic hereBut in the event that you are on a time crunch, you can always explain your thought process or reasoning and you can even say “my assumption was…”. The individuals running the interview understand that this is simply an exercise to help them understand your thought process. 


I created a short table to record my competitor analysis. When I finished reviewing the shopping cart icon on each site, I realized it was completely irrelevant! After revisiting the brief, it was clear to me that the user (Rachel) had already looked at the items in her cart so there would be no need to design the shopping cart. After this mistake, I realized the importance of understanding user flows.


I also would like to add that the icon was a shopping bag and NOT a shopping cart. Which I never noticed since I don’t do too much online clothes shopping, but it made me also realize the importance of understanding the context of what your designing for and creating a visual language based off of that.


I took screenshots of the functionality & UI elements that I thought were successful in each competitor site to keep in mind when I design the mobile checkout form. I will only share a few features with you today.

Screen Shot 2019-03-20 at 10.22.35 PM.png

Jcrew had each part of the checkout process on a separate page, and the user can’t move onto the next section until the one before it is completed. What I liked about using a user funnel is that the checkout process is broken into chunks and there is not too much scrolling up or down.

Nordstrom displays a sticky header that reminds the user of how many items they have selected along with the subtotal, which is a completely different solution to just having a shopping cart icon to click on. The user doesn’t have to backtrack to their cart or wait until checkout is completed to be reminded of the total.

Screen Shot 2019-03-20 at 10.55.05 PM.png

Old Navy had a unique swiping (left to right) action for the shipping method section. The selections were also not placed in your typical box but were placed in circles which conveniently match the shape of your finger upon being tapped on.

Across all competitors, each portion of the checkout was labeled and easily identifiable in terms of hierarchy. The brief also mentioned that this is the first time the user is purchasing on this site. Banana Republic would not allow me to finish my checkout without creating an account while all the other competitors offered to check out as a guest. This was an important part of understanding the user flow and would play a crucial role in the success of the final outcome (purchasing the product).


My low fidelity prototype was mainly to include key elements of the content. In the Payment section as well as the shipping method I did wan’t to include the same left to right swiping motion as Old Navy did. The credit card choices would be swiped left to right based on this design, however I did not go with this functionality because I felt it was inconsistent with the simplicity of the other sections.


The sections would also be collapsed until the user has finished that section. In a way, this solution is similar to the user funnel in the Jcrew example. Once that section is completed it collapses and the user has the choice to expand that section if, for instance, they decide they wanted to enter in a different credit card.

I wanted Rachel, as a new user to know each step of the process without guessing or getting lost and to reduce scrolling so the process is straight forward. The labeling on the fields was actually inspired by Target, and I went with this solution to save space. However, ADA compliance recommends 12-14pts for legibility. You will shortly see the labels were set to 12pts and did not compromise the visual design.

All sections expanded

I tried to use color sparingly and I wanted the labels to have a clear hierarchy and I wanted to focus more on the UX process for this particular project. The colors scheme may not be ideal but when I thought of Colorado (where the user is from) I chose a neutral brown with an accompanying highlighter color.

Sections not completed collapsed

I hope this was helpful or insightful to you, and always thank you for stopping by to see what projects I’m working on or what topics I am currently discussing. I would really appreciate it if you would leave a comment to keep the conversation going, I am very curious about your thoughts on the Design Interview Exercise.

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…


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!



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!



Color Palette Queen ♛

As a designer, I am always inspired by my surroundings. The smallest thing can inspire me and cultivate a starting point for a project or just a mini brainstorming session. I deeply feel this is just a part of being a creative but also having FUN.

In college, I was called the “color palette queen”. I love playing with color, with that said I’ll share with you how I build color palettes for branding, websites, UI’s, print materials, interior decor, anything really.

okay, next time your playing with your dog, check out the color combos on their toys!

Meet my best bud, Linux 🙂

Every time I play with Linux I notice that his rope tug toys have the greatest color combinations and I start thinking what industry would these colors appeal to? With my hand-dandy color-picker tool in PS, I created a color palette from his toy. Below are the results, feel free to use these colors for your own use.


You can create a color palette out of any image. In fact, if you have an iPhone you can download the Adobe Kuler App that composes color palettes out of your images. It’s a great tool to have as a designer.

This is my short daily design exercise for the day. In a later post, I will use these colors to create some branding elements and or a website.

Thanks for stopping by & stick around to see what I’ll be working on next!

Facebook Cover Photoshop Tutorial

Over the years, I’ve looked at other successful online freelancers and noticed that they offer tutorials. I thought it would be a great way for me to develop my skillset in describing my ideas well enough that others can use them. The purpose of my blog is for my professional development, and to help me become a better communicator, and a better designer. With that said I’ll dive into a short Photoshop tutorial.

Today I’ll show you how I made a super quick facebook cover photo for a client. My client owns an online yoga business, and she wanted to add the Canadian Yoga Alliance logo to her facebook cover photo.

1. First you will want to setup your Photoshop document to the correct dimensions. Facebook cover photos display at 820 pixels wide by 312 pixels tall on computers and 640 pixels wide by 360 pixels tall on smartphones.

We can also keep or set the Resolution to 72 pixels which is the standard resolution for web. Anything smaller can cause your image to appear fuzzy.

Screen Shot 2019-02-14 at 6.33.44 PM

Now that we have the correct values set for our document, you can select create and a blank canvas will appear as so.

Screen Shot 2019-02-19 at 12.01.41 PM.png

2. Now we need to search for some commercial free / copyright free stock imagery. In the event that you may not be familiar with these terms:

When pulling images from the internet we run into copyright issues, if you use someone’s materials without permissions or outright purchasing the photo or a license to use it, you can face some legal issues.

When choosing a supplier, always read the terms and conditions, this will give you a good idea if you will need to pay any fees or provide attribution to the photographer.

Stock images are not always free for personal or commercial use, so be careful when choosing an online supplier. Here is a list of my favorite suppliers including stock images free for personal & commercial use & no attribution:

Ok Now to the FUN STUFF. I selected my photos from Pixabay. For my background photo I was looking for something with a nice gradient, I figured a multicolored sky would work well so I typed tree sky into the search bar and selected the following photo and then saved it into a folder on my desktop:


The second photo I wanted to use as an overlaying element which you will shortly see in photoshop how blending modes can create really interesting effects for graphics. I choose a Mandala because they play an important role in the practice of yoga. -and I also saved this photo in the same folder as the previous one. It’s always a good idea to keep an organized folder structure even for small projects.



For the last photo, my client supplied me with a PNG of the following logo to place into our Photoshop file. PNGS are a great format for when you want to save an image with a transparent background.

When you open a PNG in photoshop, you will notice a checkered background (see image to the right), this means that the photo has a transparent background.

CYA LOGO.pngScreen Shot 2019-02-19 at 1.21.16 PM.png

3. Now we are going to compose our Facebook Cover graphic in photoshop with the the 3 images that we gathered. Access the folder on your desktop that contains these photos, and select the first one (tree and sky) and place it into your Photoshop file.

Screen Shot 2019-02-19 at 1.27.48 PM.png

4.  Next, I re-positioned the photo. Move it down with your arrow keys on the keyboard or you can use your mouse and curser to drag it down.

Basically we want to use the part of the photo where the tree is not showing, and I also prefer the purple and pink hues in this portion of the photo.

Screen Shot 2019-02-19 at 1.31.16 PM.png

5. After re-positioning the photo I re-sized the photo by selecting command ⌘ + T + shift ( which is the transform tool in PS)  on a mac, or ctrl + alt + T + shift in Windows. Holding shift down will help you scale the image without it getting wonky or distorted.

Screen Shot 2019-02-19 at 1.35.29 PM.png

6. Now that we have our background image set, we will place the second photo (the mandala) into our PS document and resize it using the transform short-cut-key and place the mandala in the left corner of our canvas.

Screen Shot 2019-02-19 at 1.53.11 PM.png

7. You can now play with different blending modes to see what effects you want to achieve. I wanted the background image to show through the mandala, and I wanted the Mandala to appear overlaid and subtle. However, when I select overlay in my blending palette the colors are a bit too vibrant and neon for the more muted look I was going for.

Screen Shot 2019-02-19 at 2.03.18 PM.png

Instead I went with lighten for my blending mode, the colors are more pastel vs. neon. I wanted the graphic to convey a sense of peacefulness and purity so lighter colors are better suited.

Screen Shot 2019-02-19 at 1.55.24 PM.png

8. The colors are still a little too vibrant even with lighten as the blending mode, they remind me of holographic color palette. To tone it down I created a white layer with a 60% opacity.

First make sure that your foreground color is white the short-cut-key in PS is X. When you select the letter X on your keyboard you can toggle between the foreground and background colors.

Screen Shot 2019-02-19 at 3.03.17 PM.png

Then select ( the short-cut-key for the rectangle tool in PS ). Your curser will change to a cross hair curser and you will be able to drag over your canvas to create a white layer over your mandala photo layer.

Screen Shot 2019-02-19 at 3.06.46 PM.png

If it helps you can also name your layers. Usually you should do this in the beginning to stay organized. It is also best practices to name your layers in the event that you have to hand of your PS files to another designer and if you are working on a team. Just double click the layer and PS will allow you to change the type.


Make sure you have your white rectangle layer selected or your layer named opacity and set the opacity to 60%.

You can do this by either placing your curser into the field and type 60% or any value you wish, or you can use the slider that appears when you select the drop down arrow.

Now our facebook cover graphic has a subtle look, it is light enough to place our logo on-top but it isn’t too light that it goes unnoticed.

Screen Shot 2019-02-19 at 3.24.14 PM.png

9. In our last step we will want to center our logo so that when users are viewing the cover photo on their phone or tablet it will appear centered. You can find the center of your document by viewing the document grid. View > show > grid. Or you can use the short-cut-key command ⌘ + ‘ (mac) and control + ‘  (win).

Screen Shot 2019-02-19 at 3.37.34 PM.png

Screen Shot 2019-02-19 at 7.08.01 PM.png

If you do not already have your rulers displayed, press command ⌘ + r (mac) or control + r (win). Now you can drag vertical and horizontal guides from your rulers onto your canvas. Click onto your ruler, and hold down your mouse to drag guides onto your canvas. The grid helps divide the document into portions or quadrants so that you can easily find the center.

Screen Shot 2019-02-19 at 3.56.33 PM.png

The default color for guides in PS is cyan which can be a difficult to see when your composition has competing colors, such as ours. To change the color of your guides you can go to the Photoshop dropdown > select Preferences > Guides, Grids, and Slices… (mac) and Edit > Preferences > Guides, Grids, and Slices… (win)

Screen Shot 2019-02-19 at 7.10.51 PM.png

A dialogue box will appear and you will see a header for Guides, just below that you will see options to change the color of the guides for your canvas and for your artboards. If you are curious like me, you might be wondering what are artboards ?

Screen Shot 2019-02-19 at 6.23.38 PM.png

I am now just learning that this feature was added to PS in 2015! Unfortunately I did not know that, which could have made the task of designing UI’s in PS a-lot easier a couple weeks ago if not a couple years ago ¯\_(ツ)_/¯ . Artboards in PS function in the same way they do in Illustrator. Essentially you can have multiple copies of your photoshop document. This comes in handy when you are designing for different screen resolutions.


Maybe a little TMI? You will want to change the color of your guides for canvas. When you select the dropdown menu photoshop offers some default colors, I chose light red for this tutorial, however if you would like you can even choose a custom color which is the first link located at the top of the dropdown list.

Now your guides should appear light red and you can better see your placement.

Screen Shot 2019-02-19 at 6.23.51 PM.png

10. Now you can drag and drop your logo into the PS document and position it into the center and turn off your grid and guides if you wish.

Screen Shot 2019-02-19 at 6.56.52 PM.png

command ⌘ + ‘ = turns off grid (mac) command ⌘ + ; = turns off guides (mac)

control + ‘ = turns off grid (win) control + ; = turns off guides (win)

The final results should appear as below.

Screen Shot 2019-02-19 at 6.54.55 PM.png

If you are reading this, I sincerely thank you for following along, and I hope that you learned something new. I will try to post more tutorials and share more of my thought processes behind projects. If this was helpful, interesting, boring, please leave a comment, I appreciate constructive feedback.




Work life

I’ve currently been working on a big project as a Visual Designer. With the holidays in full swing, and taking the opportunity to learn as much as I can on the job, I haven’t exactly had time to work on any side projects. However, I did want to mention some of the things that I have currently learned in my current role.

I have been working in sketch and it has made the process of building UI’s more quickly. I must also say it has completely changed my workflow, in that I can easily jump from various art-boards when designing for various screen resolutions. Redlining has also been another on the job learning task.

It has sparked a great deal of collaboration across team members including UX designers and developers. When the project gets to this stage, it is exciting because the developers begin preparing the process of building a prototype. While the prototype still requires a lot of work and QA from my side, it is such a rewarding experience to see my design work coming to life -and eventually exposed to the real world ( everyday users and consumers).

I am so excited for what the future has in store for my career as a designer, and I hope to continue to grow professionally and share that enthusiasm with others in the field.



99Designs & Logo Designs

Whether you run your own business, you are a freelancer, part-time, on-contract, in a transition between jobs, – and your looking to make some extra cash you can’t help but to gravitate towards services like 99designs. You can quickly ideate and come up with a logo in no time, and even throw in some mockups displaying different applications of the logo, its quick, fun and you can potentially earn a quick $200.

I wanted to share my experience with 99designs, I’m not looking to bash them or go into whether they are a scam or not, -as some designers are very successful in making money on this platform. I also think it’s a great opportunity to get constructive feedback as well as get some practice in. However, I personally felt a bit devalued, even with the little time I did put in maybe an hr. per logo, I still want to get paid for that. I did not get paid, and perhaps I don’t identity myself 100% as a “logo-designer”. However, I am still capable, and I do find my time and skills valuable.

If you are a fellow colleague, designer, dev, creator & builder reading this, you too should know your value!

Let’s not encourage an environment where our skill sets are devalued! With that said, go check it out for yourself form your own opinions. You will also find various articles on the topic but here is a great article that touches on our value as creatives. Taken from the article: “If someone wants something designed, they need to pay you, just like any other professional service provider.” Thank you, Sheila!

I ended up deleting my account when I came across this article because I don’t want to support that type of working environment. However I did want to show you some of the logos I created while I had my account for a good month.

1. Church Logo




2. Food Blog



3. Real Estate




4. Partnership Organization



5. Life Coach



Hope you enjoyed looking through, & always Thank you for your time!

Dribble & my works from 10 yrs ago

I started a dribble account!

-Which I will share some of my designs and possibly how I designed them in other posts as well as my thought process behind certain pieces.

I’m at this stage in my career where I’m not satisfied with anything that I am producing. When I came across Daily UI “Become a Better Designer in 100 days”, that really spoke to me. I subscribed to their daily design challenges in order to get some practice in. The challenges are great because the client and the product choices are pretty open. Sometimes its easier to have something or someone generate self-initiated projects vs. trying to think of them on your own.

In between design challenges, I marvel at other’s work, wondering how to improve myself, and then I realized, I forgot to appreciate my own progress. Designer’s that are well established rarely share their older works, you don’t get to see their failures or poorly designed projects. Today I want to share something I produced years ago.

In the early 2000’s DeviantArt was the go-to platform, and I wasn’t really producing quality or a quantity of work. At the time I was into photomanipulation, Japanese Kawaii culture, & illustration design, and I was a young designer still figuring out titles and the industry. I was working in Adobe CS3, & before HTML5 Flash was a thing. I went to a tech school where everything was very hands-on and less discussing Gestalt’s principles of design or the Bauhaus.


So here you have it, a flash piece I made 10 years ago! and to be honest with you, I haven’t touched flash since then. This piece was made up of two parts, the first was created in Dreamweaver and the second in Flash. I don’t touch too much Dreamweaver these days either, I go straight to HTML5.

Anyhow, I used to be embarrassed by my earlier works, but now I understand it’s apart of my journey into becoming a versatile designer. Okay yeah, maybe my face is turning a little red….how about that comic sans eh?

 (PART 2) Interact with the actual piece here

All early works are welcome here, don’t be shy! Drop a comment & Thank you for your time!



Reading Response #7

What I found the most insightful about reading this article is adding a step to the creative process for product design, -that is to design a marketing page. This step would personally help me understand the product and or services on a a deeper level, and I truly wish I would have done this for those projects I worked on earlier in my college career. I’ve noticed that its easy to overlook the problem that you are trying to solve just because by nature the designer is eager to psychically begin creating or designing. A defined product means a better execution and strategy for how others will use your product. Zhuo also mentioned that it doesn’t have to be perfect or refined, which I thought was also helpful because creating a marketing page seems like a daunting task.

I would definitely be too concerned about content and it would quickly turn into a long project that really is just a small exercise. Overall the main point of the article is to design your beginning early. That is, to consider how you will introduce others to your product and also how to get them to use it again. While this requires more analysis during the research stage, it allows you to develop a clear understanding of what you want your product to be. Again, I feel like I am revisiting the concept that appearance is not as important as function, because without function, the consumer’s interest will be lost. Taking the time to fully understand your product in the beginning allows for the designer to discover how they can go about providing a functional product that meets the needs of their users.