Meaghan liked elements of all three of the main designs. :) Here are a couple of mockups with her preferred background, font, and header. Both headers have different "effects", top header has a darker background and table color; bottom header has a lighter background and white table color.
Borders and font colors can be changed.
(Click image to view larger)
Friday, May 29, 2009
Mockup for "Loving Touch Wetbags"
Thursday, May 28, 2009
Mockups for "PNPBaby"
Meaghan was looking for a more retro-style HC design. She wanted to incorporate her cute little baby heads but with brighter colors and easy-to-read fonts.
Original baby heads:
I took the original baby heads, made them a bit darker, clearer, and vectorized them. Then I took one of the backgrounds Meaghan liked and created a couple more so that she can have a variety of designs to choose from.
Here are the mockups! Note: backgrounds, headers, borders, fonts, etc. can all be changed to different shades of colors (even the little bowties on the babies can be changed!) I used several different fonts too, and these can all be interchanged with each other.
Click to view larger:
Let me know what you think!
Tina :)
Note: In the mockup stage of the HC design I sometimes use images straight from online sources to get a feel for my client's wants. Once they've chosen an image they love, I purchase the image from the online source and the final HC design contains a royalty-free image with no watermark. :)
Original baby heads:
I took the original baby heads, made them a bit darker, clearer, and vectorized them. Then I took one of the backgrounds Meaghan liked and created a couple more so that she can have a variety of designs to choose from.
Here are the mockups! Note: backgrounds, headers, borders, fonts, etc. can all be changed to different shades of colors (even the little bowties on the babies can be changed!) I used several different fonts too, and these can all be interchanged with each other.
Click to view larger:
Let me know what you think!
Tina :)
Note: In the mockup stage of the HC design I sometimes use images straight from online sources to get a feel for my client's wants. Once they've chosen an image they love, I purchase the image from the online source and the final HC design contains a royalty-free image with no watermark. :)
Samples for "Polkadotted Pickle/Crochet Frog", Part III
Wednesday, May 27, 2009
Monitor Resolution Mockups
I've had several clients ask about different monitor sizes/resolutions so hopefully this post will help clear things up a bit.
The first sample shown below is what I see on my monitor (1440x900 pixels). Depending on your client's screen resolution your HC design may appear differently on their monitor.
Note: there are other monitor resolutions not included in these samples. See the wikipedia article for full details: http://en.wikipedia.org/wiki/Computer_display_standard
(Click to view larger; all of these images have been scaled down but at the same ratios to give a better idea of how the site might appear on different monitors. You'll notice that the last one - 800x600 - the client would have to scroll over a little bit to see the full background.):
It is for this reason that the majority of Hyena Cart and Congo designs that I create are made with an 800 pixel wide (or less) header; so that they will accommodate the majority of monitor resolutions.
My preferred header size is 750 pixels wide. That way even on a smaller monitor resolution your client will see your header and also a bit of your background without having to scroll over to the right or left. I tend to use 72 ppi as the resolution for most web images that I design.
The following is taken from "peter's digital photography - Resolution Explained (http://www.ptcuk.com/02_technical/resolution.htm):
Monitor resolution refers to the number of pixels comprising the image on the screen. The monitor screen resolution on a PC can be set up through Microsoft Windows - My Computer - Control Panel - Display - Settings. For example a screen resolution of 1282 pixels wide by1024 pixels high might be selected which would mean an image imported with this dimension would fill the entire screen. An image of size around 600 x 450 pixels would only fill a quarter of the screen. A practical screen resolution for say a 17 inch CRT monitor is around 1024 x 768. A 17 inch CRT monitor has a viewing area of approximately 12.5 inches wide by 9.5 inches high.
Dividing the number of pixels by the number of inches gives a resolution of 82 pixels per inch. Therefore, in this example, for monitor viewing there is nothing to be gained by having an image resolution greater than 82 ppi. Usually 72 ppi is a default used in most imaging software.
The first sample shown below is what I see on my monitor (1440x900 pixels). Depending on your client's screen resolution your HC design may appear differently on their monitor.
Note: there are other monitor resolutions not included in these samples. See the wikipedia article for full details: http://en.wikipedia.org/wiki/Computer_display_standard
(Click to view larger; all of these images have been scaled down but at the same ratios to give a better idea of how the site might appear on different monitors. You'll notice that the last one - 800x600 - the client would have to scroll over a little bit to see the full background.):
It is for this reason that the majority of Hyena Cart and Congo designs that I create are made with an 800 pixel wide (or less) header; so that they will accommodate the majority of monitor resolutions.
My preferred header size is 750 pixels wide. That way even on a smaller monitor resolution your client will see your header and also a bit of your background without having to scroll over to the right or left. I tend to use 72 ppi as the resolution for most web images that I design.
The following is taken from "peter's digital photography - Resolution Explained (http://www.ptcuk.com/02_technical/resolution.htm):
Monitor resolution refers to the number of pixels comprising the image on the screen. The monitor screen resolution on a PC can be set up through Microsoft Windows - My Computer - Control Panel - Display - Settings. For example a screen resolution of 1282 pixels wide by1024 pixels high might be selected which would mean an image imported with this dimension would fill the entire screen. An image of size around 600 x 450 pixels would only fill a quarter of the screen. A practical screen resolution for say a 17 inch CRT monitor is around 1024 x 768. A 17 inch CRT monitor has a viewing area of approximately 12.5 inches wide by 9.5 inches high.
Dividing the number of pixels by the number of inches gives a resolution of 82 pixels per inch. Therefore, in this example, for monitor viewing there is nothing to be gained by having an image resolution greater than 82 ppi. Usually 72 ppi is a default used in most imaging software.
Mockups for "Loving Touch Wetbags" Part IV
Heather liked the idea of having a transparent table so that you can see the background behind it. She also wanted the header font a bit different.
Here are some mockups of the new design! (click any image to view larger)
First mockup - the background on this one is "fixed", meaning that when you scroll down, you see the same image as you scroll; the background doesn't move as you scroll (hard to capture in a still image, but imaging that you scrolled from the top down to the bottom)
Second mockup - the background is not "fixed", meaning that as you scroll down, the image stays up at the top of the site.
Third mockup - this is a sample of what the background might look like on a smaller monitor (the above examples are with a monitor of 1440 px width; this is about 875 px wide)
Note: In the mockup stage of the HC design I use images straight from online sources to get a feel for my client's wants. Once they've chosen an image they love, I purchase the image from the online source and the final HC design contains a royalty-free image with no watermark. :)
Here are some mockups of the new design! (click any image to view larger)
First mockup - the background on this one is "fixed", meaning that when you scroll down, you see the same image as you scroll; the background doesn't move as you scroll (hard to capture in a still image, but imaging that you scrolled from the top down to the bottom)
Second mockup - the background is not "fixed", meaning that as you scroll down, the image stays up at the top of the site.
Third mockup - this is a sample of what the background might look like on a smaller monitor (the above examples are with a monitor of 1440 px width; this is about 875 px wide)
Note: In the mockup stage of the HC design I use images straight from online sources to get a feel for my client's wants. Once they've chosen an image they love, I purchase the image from the online source and the final HC design contains a royalty-free image with no watermark. :)
Animated Banners for "Avant-Garde" Congo
Meaghan and April have been so wonderful to work with!
Work done today on their Avant-Garde Congo:
- created an "info" image
- added Blog and Twitter links under the "info" section
- created new vendor headers and added them to the Congo (3D-DeebleDdo, Adorned by KristinaKate, Monkeys & Angels, and Roxie's Gourmet Treats and Gecko Jewelry)
- added Google Analytics coding to the Footer
- changed the wording a little at the top of the Congo so that Twitter is clickable and links straight to the Congo Twitter
- created two animated banners (468x60 and 150x50)
Work done today on their Avant-Garde Congo:
- created an "info" image
- added Blog and Twitter links under the "info" section
- created new vendor headers and added them to the Congo (3D-DeebleDdo, Adorned by KristinaKate, Monkeys & Angels, and Roxie's Gourmet Treats and Gecko Jewelry)
- added Google Analytics coding to the Footer
- changed the wording a little at the top of the Congo so that Twitter is clickable and links straight to the Congo Twitter
- created two animated banners (468x60 and 150x50)
Mockups for "Loving Touch Wetbags" Part III
After seeing the latest mockups, Heather decided she'd like to take her HC design a new direction; with a more simple header and a background that covers the entire page.
Here are some mockups using images she chose and a simple header (font color can be changed). The first and third rows show the same images but with differing dimensions.
Click to view larger:
Note: In the mockup stage of the HC design I use images straight from online sources to get a feel for my client's wants. Once they've chosen an image they love, I purchase the image from the online source and the final HC design contains a royalty-free image with no watermark. :)
Here are some mockups using images she chose and a simple header (font color can be changed). The first and third rows show the same images but with differing dimensions.
Click to view larger:
Note: In the mockup stage of the HC design I use images straight from online sources to get a feel for my client's wants. Once they've chosen an image they love, I purchase the image from the online source and the final HC design contains a royalty-free image with no watermark. :)
Tuesday, May 26, 2009
Samples for "Polkadotted Pickle/Crochet Frog", Part II
We're back from a wonderful family vacation/reunion at the Cabin. :)
Here are a couple more samples for Dava; she liked the last ones and decided she'd like to go with something fairly simple for her header because she's already incorporating the frogs in her HC design as thumbnails.
(Click to view larger image)
Here are a couple more samples for Dava; she liked the last ones and decided she'd like to go with something fairly simple for her header because she's already incorporating the frogs in her HC design as thumbnails.
(Click to view larger image)
Thursday, May 21, 2009
Mockups for "Loving Touch Wetbags" Part II
Heather liked the flower in the last image (from the previous samples), but the fonts from samples 3 and 4. She also wanted to see what it would look like with a pink/white swirl background.
I used the original image she had chosen and tried a few other tulips as well. :) Also tried a larger and a smaller pink/white swirl background.
(Click to view larger)
Note: In the mockup stage of the HC design I use images straight from online sources to get a feel for my client's wants. Once they've chosen an image they love, I purchase the image from the online source and the final HC design contains a royalty-free image with no watermark. :)
We're heading out for a nice family vacation. Wishing everyone a wonderful Memorial Weekend!
Tina :)
I used the original image she had chosen and tried a few other tulips as well. :) Also tried a larger and a smaller pink/white swirl background.
(Click to view larger)
Note: In the mockup stage of the HC design I use images straight from online sources to get a feel for my client's wants. Once they've chosen an image they love, I purchase the image from the online source and the final HC design contains a royalty-free image with no watermark. :)
We're heading out for a nice family vacation. Wishing everyone a wonderful Memorial Weekend!
Tina :)
Wednesday, May 20, 2009
Mockups for "Loving Touch Wetbags"
Heather was looking for something nice and clean, focusing on tulips as a main picture.
Here are a few mockups with different headers, fonts, backgrounds, colors, etc. Any of the design elements can be changed. (Borders and table colors don't match in some of these layouts!)
Note: In the mockup stage of the HC design I use images straight from online sources to get a feel for my client's wants. Once they've chosen an image they love, I purchase the image from the online source and the final HC design contains a royalty-free image with no watermark. :)
Click to view larger:
Here are a few mockups with different headers, fonts, backgrounds, colors, etc. Any of the design elements can be changed. (Borders and table colors don't match in some of these layouts!)
Note: In the mockup stage of the HC design I use images straight from online sources to get a feel for my client's wants. Once they've chosen an image they love, I purchase the image from the online source and the final HC design contains a royalty-free image with no watermark. :)
Click to view larger:
Tuesday, May 19, 2009
Samples for "Polkadotted Pickle/Crochet Frog"
Dava was looking for a new header and matching banner for her Hyena Cart shop. She wanted a curly-type or bubble-letters font, something that will match her new pretty blue flower background, and maybe even incorporates her main focus "Crochet Frog Goodies" (she's very talented at crocheting!)
Here are a few samples with four different headers so she can get an idea of what it will look like on her actual site: (click on image to view larger)
I had a lot of fun with these!
Tina :)
Here are a few samples with four different headers so she can get an idea of what it will look like on her actual site: (click on image to view larger)
I had a lot of fun with these!
Tina :)
Friday, May 15, 2009
Mockups for "Jenny's Simply Clean" Part II
Jenny liked the buttons but wanted them changed to match the website colors rather than the header. She wanted the left navbar buttons changed so they don't look like buttons.
She also wanted a thin footer to help tie the whole site together.
Here's the next mockup:
Web layout by Michelle Tate; Logo by Personal Photo Art, Header, Button Graphics, Footer, and detergent image effects by JoyfulRose.
She also wanted a thin footer to help tie the whole site together.
Here's the next mockup:
Web layout by Michelle Tate; Logo by Personal Photo Art, Header, Button Graphics, Footer, and detergent image effects by JoyfulRose.
Samples for "My Diaper Addiction" Part II
Thursday, May 14, 2009
And the winner is.....pantufla13!!!!
Thank you to everyone who commented on my Blog to let me know how I can improve my Hyena Cart! I appreciate how well thought-out each of the comments was.
Pantufla13, I'll email you to find out which of the following you'd like: Animated Banner, Twitter Design, or Business Card Design!
Crystalb, Angela, Melanie, Thiry47, April Joy, and First, as a special thank you for taking the time to post such helpful comments, I'd like to offer each of you 50% off of your choice of: Animated Banner, Twitter Design, or Business Card Design. Here's the link to my site so that you can see samples of previous work and pricing: JoyfulRose Online Shop. I'll also be emailing each of you this afternoon. :)
Edited to add: I emailed everyone whose email addresses I could find. If you didn't receive an email from me please let me know your address. Thanks!
Next week I'll work on adding a custom logo design option, changing the "About" so it doesn't open in a new tab, and embedding images on my HC (especially in the "Portfolio" section). In the future I'll plan to expand beyond HC, Etsy, and ArtFire; just need to practice my coding skills so that I feel comfortable with that. :)
Here's a screenshot of our random number generator (visit this link for the actual website where you can generate your own random numbers):
Speaking of random number generators...it always reminds me of this silly Dilbert cartoon (which my husband and I quote all the time!):
Thanks again for taking time out of your busy lives to comment about my Hyena Cart; I appreciate the help,
Tina :)
Pantufla13, I'll email you to find out which of the following you'd like: Animated Banner, Twitter Design, or Business Card Design!
Crystalb, Angela, Melanie, Thiry47, April Joy, and First, as a special thank you for taking the time to post such helpful comments, I'd like to offer each of you 50% off of your choice of: Animated Banner, Twitter Design, or Business Card Design. Here's the link to my site so that you can see samples of previous work and pricing: JoyfulRose Online Shop. I'll also be emailing each of you this afternoon. :)
Edited to add: I emailed everyone whose email addresses I could find. If you didn't receive an email from me please let me know your address. Thanks!
Next week I'll work on adding a custom logo design option, changing the "About" so it doesn't open in a new tab, and embedding images on my HC (especially in the "Portfolio" section). In the future I'll plan to expand beyond HC, Etsy, and ArtFire; just need to practice my coding skills so that I feel comfortable with that. :)
Here's a screenshot of our random number generator (visit this link for the actual website where you can generate your own random numbers):
Speaking of random number generators...it always reminds me of this silly Dilbert cartoon (which my husband and I quote all the time!):
Thanks again for taking time out of your busy lives to comment about my Hyena Cart; I appreciate the help,
Tina :)
Mockups for "Jenny's Simply Clean"
I'm working with Jenny to create some graphics for her new website. I've worked with Jenny several times before and it's always a pleasure!
She asked for top buttons (Home, View Cart, and Contact) and left navbar buttons (Search, Shopping, Information, and Products) to match the colors of the website Michelle is designing for her.
Here are a couple mockups of her site design so far (web layout by Michelle Tate; logo by Personal Photo Art, header, button graphics, and detergent image effects by JoyfulRose). Top mockup header has no border; bottom has a thin green header.
She asked for top buttons (Home, View Cart, and Contact) and left navbar buttons (Search, Shopping, Information, and Products) to match the colors of the website Michelle is designing for her.
Here are a couple mockups of her site design so far (web layout by Michelle Tate; logo by Personal Photo Art, header, button graphics, and detergent image effects by JoyfulRose). Top mockup header has no border; bottom has a thin green header.
Samples for "My Diaper Addiction"
Andrea was looking for a header for her new shop that incorporated purple, blue, green, and pink. She loves, "fairies and fantasy type things, butterflies and dragonflies" and she wanted a swirly font. :)
I came up with a couple of different ideas to see which type of look she's hoping for. The first one is more fancier and more delicate-looking to me. I love the little pixie girl and the butterflies with their trails. I also like the second one because it's very simple and will look nice even at smaller sizes.
Which is your favorite? :)
(Click on the image to view larger. The black background isn't part of either header; just there to help show off the two samples)
I came up with a couple of different ideas to see which type of look she's hoping for. The first one is more fancier and more delicate-looking to me. I love the little pixie girl and the butterflies with their trails. I also like the second one because it's very simple and will look nice even at smaller sizes.
Which is your favorite? :)
(Click on the image to view larger. The black background isn't part of either header; just there to help show off the two samples)
Tuesday, May 12, 2009
Monday, May 11, 2009
Hyena Cart Congo Mockups for "Avant-Garde", Part II
Meaghan liked the last mockups but LOVES the square picture in these samples. Image provided by April's talented father-in-law. :)
I also added a pretty little border for each corner of the "about Avant-Garde" section, and used the same corner borders for the sample vendor header.
Colors, borders, fonts, etc., can all be changed. (Click to view larger image)
I also added a pretty little border for each corner of the "about Avant-Garde" section, and used the same corner borders for the sample vendor header.
Colors, borders, fonts, etc., can all be changed. (Click to view larger image)
Saturday, May 9, 2009
Proof for "sweetpea boutique" - Part III
Friday, May 8, 2009
Hyena Cart Congo Mockups for "Avant-Garde"
I'm working on a wonderful new Congo with Meaghan and April. They're looking for a design that incorporates pictures taken by April's father-in-law, with a description on the home page about the artisans of the Pacific Northwest (which is where their Congo will be focused).
The pictures provided are just beautiful! I think the hardest part will be deciding which ones to use. :)
Here are a few rough mock-ups to get an idea of which direction Meaghan and April would like to go with the design. (Click on the image to view the larger version)
The pictures provided are just beautiful! I think the hardest part will be deciding which ones to use. :)
Here are a few rough mock-ups to get an idea of which direction Meaghan and April would like to go with the design. (Click on the image to view the larger version)
Proof for "sweetpea boutique" - Part II
Thursday, May 7, 2009
Samples for "sweetpea boutique"
Wednesday, May 6, 2009
Proofs for "Katydid Creations"
Kate was looking for a new Blog header to match her website and Hyena Cart. She wanted the size to be about the same as her current Blog header so it will be easy to replace it with the new.
I created 3 samples with slightly different borders for her to choose from. :)
Click the proof below to see the full-size image.
I created 3 samples with slightly different borders for her to choose from. :)
Click the proof below to see the full-size image.
Saturday, May 2, 2009
JoyfulRose New Design Contest!
Welcome to the JoyfulRose new design contest!!!
In the past few months JoyfulRose has seen a lot of growth in our graphics design area. To focus more on that aspect of my business I thought my shop could use a layout more tailored towards design.
* Is there anything you'd like to see different in the layout?
* Is the site easy to navigate?
* Are the listings clear? (I wanted to include as many details as possible for my customers, but I'm thinking some of the listings are a bit too wordy!)
* Do you like the way products are listed in a table rather than categories?
* Any other suggestions for improvement?
* Are there any other graphic design products you'd like added?
Please post your comments to this thread and on May 14th I'll use a random number generator to choose a comment number. The person who posted that comment may choose from the following prizes:
* Animated Banner - you choose size, let me know what you'd like it to say and I'll create it! (up to 8 frames)
* Twitter Design - email the images you'd like me to use and I'll design your custom Twitter for you! (useful for both business and personal Twitter accounts!)
* Business Card Design - email the images and text you'd like included and I'll create a unique design for you!
Click on the image below to see our new Hyena Cart Design:
See this link to find out more about our new design
Second JoyfulRose Design:
First JoyfulRose Design:
In the past few months JoyfulRose has seen a lot of growth in our graphics design area. To focus more on that aspect of my business I thought my shop could use a layout more tailored towards design.
Free Contest!!!
Please take a look at my new Hyena Cart design and let me know what you think!* Is there anything you'd like to see different in the layout?
* Is the site easy to navigate?
* Are the listings clear? (I wanted to include as many details as possible for my customers, but I'm thinking some of the listings are a bit too wordy!)
* Do you like the way products are listed in a table rather than categories?
* Any other suggestions for improvement?
* Are there any other graphic design products you'd like added?
Please post your comments to this thread and on May 14th I'll use a random number generator to choose a comment number. The person who posted that comment may choose from the following prizes:
* Animated Banner - you choose size, let me know what you'd like it to say and I'll create it! (up to 8 frames)
* Twitter Design - email the images you'd like me to use and I'll design your custom Twitter for you! (useful for both business and personal Twitter accounts!)
* Business Card Design - email the images and text you'd like included and I'll create a unique design for you!
Click on the image below to see our new Hyena Cart Design:
See this link to find out more about our new design
Second JoyfulRose Design:
First JoyfulRose Design:
About our New JoyfulRose Site Design
About the new Design:
My husband suggested that I sketch out the new design and then he'd help me figure out how to incorporate it within the Hyena Cart parameters (it can be a bit tricky!) In March I spent about a week sketching the design and creating the appropriate images.
Our shop name, JoyfulRose, came about when our family was going through a very difficult time several years ago. I reflected on my experiences and decided that I wanted to focus on finding more joy in life. The "rose" part of the name comes from my middle name, Roseann. I am named after my wonderful grandmother whose kindness and generosity I have always tried to live up to.
I loved the idea of creating a rose vine for the border of my design and my husband suggested that I create a briar patch-type background. Originally, the background I created was made of browns. After trying it out with the rose vine and header, however, we decided greens helped the main design stand out.
My husband helped me with the coding so that the rose vine borders appear to be on top of the briar background as you scroll down. This is one of my favorite aspects of the design!
Unfortunately, right after we finished the coding my computer caught a virus and then the hard drive started failing. :( We installed a new hard drive, cleaned up the computer, and I'm excited to finally have my new design online!
To enter our new design contest please see this link:
JoyfulRose New Design Contest!!!
My husband suggested that I sketch out the new design and then he'd help me figure out how to incorporate it within the Hyena Cart parameters (it can be a bit tricky!) In March I spent about a week sketching the design and creating the appropriate images.
Our shop name, JoyfulRose, came about when our family was going through a very difficult time several years ago. I reflected on my experiences and decided that I wanted to focus on finding more joy in life. The "rose" part of the name comes from my middle name, Roseann. I am named after my wonderful grandmother whose kindness and generosity I have always tried to live up to.
I loved the idea of creating a rose vine for the border of my design and my husband suggested that I create a briar patch-type background. Originally, the background I created was made of browns. After trying it out with the rose vine and header, however, we decided greens helped the main design stand out.
My husband helped me with the coding so that the rose vine borders appear to be on top of the briar background as you scroll down. This is one of my favorite aspects of the design!
Unfortunately, right after we finished the coding my computer caught a virus and then the hard drive started failing. :( We installed a new hard drive, cleaned up the computer, and I'm excited to finally have my new design online!
To enter our new design contest please see this link:
JoyfulRose New Design Contest!!!