Meg Lewis

Intro to Web Design: Friendly Design for Startups and Small Business

Hi Sheelah!

I love this idea! I wish this wasn't fictitious, I would love for this to be real. Let me provide just a couple of very minor comments. This looks great and nothing is major:

1. The gradient on your "Shop Now" button is going the wrong way! Conventionally the gradient should be light on top and dark on bottom. That implies that the button is pushing outward. When you switch it (as you did) it has more of the feeling that it is being pushed inward. That's great for a "rollover" state, and I would keep it for that...but it conventionally should be switched for the default button state.

2. I think it made a huge improvement to add a secondary heading font to the design. However, I'm not completely sold on the script. I would recommend using a font that is impactful, yet clean and easy to read. The script you chose is really competing with the script in your logo. Try something that is simple with a bit of personality.

That's it. This is looking awesome. I think the beautiful tea images are working really nicely. Looking forward to seeing if any students have additional comments.

Thanks, Meg.  I had no idea about the button gradients :)  I agree on the fonts too.  I incorporated your ideas into my v4.  Enjoyed the class!

Awesome, Sheelah! Just noticed the gradient is swapped back. Lookin' great! Thanks for being so active in my class. Hope you learned something valuable!

A fictitious startup that sells premium teas online.
1st iteration: &nbsp;Not sure about the background colors below the banner image - hmm. &nbsp;Perhaps something w/ texture would be better.
<img src="http://s3.amazonaws.com/skillshare/uploads/project/65b846e28b4e93104b825dd86014ad80/6ea0a4ee" alt="Specialteas - image 1 - student project" srcset="http://s3.amazonaws.com/skillshare/uploads/project/65b846e28b4e93104b825dd86014ad80/6ea0a4ee 600w, http://s3.amazonaws.com/skillshare/uploads/project/65b846e28b4e93104b825dd86014ad80/6ea0a4ee 1000w" sizes="(max-width: 600px) 600px, 100vw" loading="lazy">
Version 2: I added a textured background to the content area and footer.&nbsp;
<img src="http://s3.amazonaws.com/skillshare/uploads/project/65b846e28b4e93104b825dd86014ad80/ca28ee43" alt="Specialteas - image 2 - student project" srcset="http://s3.amazonaws.com/skillshare/uploads/project/65b846e28b4e93104b825dd86014ad80/ca28ee43 600w, http://s3.amazonaws.com/skillshare/uploads/project/65b846e28b4e93104b825dd86014ad80/ca28ee43 1000w" sizes="(max-width: 600px) 600px, 100vw" loading="lazy">
Version 3: I added more rectangle separation bars between sections, added some nav links, and changed up the fonts a bit.
<img src="http://s3.amazonaws.com/skillshare/uploads/project/65b846e28b4e93104b825dd86014ad80/c5b2c8f8" alt="Specialteas - image 3 - student project" srcset="http://s3.amazonaws.com/skillshare/uploads/project/65b846e28b4e93104b825dd86014ad80/c5b2c8f8 600w, http://s3.amazonaws.com/skillshare/uploads/project/65b846e28b4e93104b825dd86014ad80/c5b2c8f8 1000w" sizes="(max-width: 600px) 600px, 100vw" loading="lazy">
Version 4: &nbsp;I reversed the button's gradient and changed up the content section fonts so as not to compete w/ the header font.
<img src="http://s3.amazonaws.com/skillshare/uploads/project/65b846e28b4e93104b825dd86014ad80/5d789515" alt="Specialteas - image 4 - student project" srcset="http://s3.amazonaws.com/skillshare/uploads/project/65b846e28b4e93104b825dd86014ad80/5d789515 600w, http://s3.amazonaws.com/skillshare/uploads/project/65b846e28b4e93104b825dd86014ad80/5d789515 1000w" sizes="(max-width: 600px) 600px, 100vw" loading="lazy">

Company

Community

Teaching

Mobile

English

English