#7Days7Designs - Design & Prototype an Email Capture Form

DesignCourse · Beginner ·🖌️ UI/UX Design ·6y ago
Skills: UI Design90%

Key Takeaways

The video introduces a 7-day design challenge where participants have to design and prototype an email capture form using UI design fundamentals and interaction design, with a focus on visual hierarchy, typography, and white space, and utilizing tools like Adobe XD or Figma to create interactive prototypes.

Full Transcript

[Music] hey everybody what's up Gary Simon here so today we got something fun every day of the week I'm gonna be uploading one video here at the usual time around 9:30 a.m. Eastern Time where I introduced a new challenge and it's gonna be designed based so it's going to be based on 7 days 7 designs now this idea is taken and it was inspired from floor and pop here on YouTube he did a 7 day 7 website challenge I was based on HTML and CSS but for our challenge we're dealing with no code and they're gonna be simple UI design based challenges and don't worry I'm not gonna have you design full websites or anything there may be specific challenges that are something that you can tackle within a span of just an hour or less alright so I'm gonna introduce the very first one but first also if you submit in entering you participate then you'll be entered into a drawing where each day I will choose one random person that receives a free copy of my UI design boot camp at scrim accom that I recently released they recently also dropped a price to 39 bucks but yes it's basically 9 hours of a ton of UI design instructionals basically so definitely check that out there's been hundreds upon hundreds of people have taken it and have enjoyed it yeah 100 blessings exactly so let's go ahead and introduce the very first challenge and you have until by the time of uploading this in about a 10 hour window so right now it's 9:30 a.m. Eastern Time and you have until 7:30 p.m. Eastern Standard Time in order to submit and you're gonna submit it through of Twitter and using a specific hashtag in mentioning me as well so I'll get to that at the end all right and so oh by the way all the instructions are in the youtube description so the very first challenge that we're going to do is right here it's basically an email capture form now this is just an ugly prototype I didn't want to give any design ideas away but basically you also have to design for this but you also have to make it interactive so let me just show you that again you need to create basically an email form it doesn't have to be included in this you sort a panel or modal if you wish it doesn't matter this is just for your reference it has to have scribe to subscribe now an email address and text field along with this I agree to Terms of Service with a checkbox and also a call-to-action button so as you can see it's very simple I'm and also you have to be able to click join the list and it has to be animate in in some unique way this message right here success please check your email to verify your subscription all right so basically you need to it's like a two-fold challenge you have to design it well so adhere to all the good UI design fundamentals such as visual hierarchy typography white space all that good stuff and also interaction design so I want to see you guys utilizing maybe Adobe XD Zotto animate feature to create some sort of interesting page transition animation between those two screens and I believe you can also do that sort of thing with figma as well if you wish so you can use that if figma or Adobe XD and you could link to me using Twitter the adobe ir XD prototype or the figma prototype and so the i just to show you this over here real quickly let me get my browser out so right here is my Twitter you know what's really pathetic I only have thirty seven hundred followers but my youtube channel has like five hundred sixty thousand so or something like that so yeah I have really neglected Twitter so please give me a follow if you haven't yet and so basically what you'll need to do is right here I'll put this bigger on the screen just mention day one or whatever day it is along with at design course calm which is my Twitter handle here and then the hashtag seven days seven designs alright seven days seven designs and that way I can easily find these as well and other people can too also if you wish you can join my discord server and I've created a seven day seven designs channel where P can share their designs here as well and also submit feedback and just try to help others out so again every day I'm gonna be uploading a video and I also will be reviewing the previous day's submissions so I'm not gonna review them all but I will pick out a few that are both really good and maybe some that I thought I could you know definitely improve and then I will also pick a winner random and I'll do it right on that video right there live and you know that person will win the free scrim buck course and also introduce the next day's challenge we'll do this all seven days alright so hopefully you guys submit and participate I'm looking forward to you know the day ones entries and yeah I'll see you guys real soon [Music] you

Original Description

INSTRUCTIONS BELOW 🔽 -- For the next 7 days, I will be uploading 1 video per day, where I introduce a simple design challenge and review the entries from the previous day's challenge. If you participate, you will be entered into a random drawing each day where I choose 1 winner who will receive a free copy of my UI Design Bootcamp at Scrimba! https://bit.ly/2RP76sL TODAY'S Challenge: ✔ -- Design AND Prototype an email capture form that shows the 2 screens with the content as shown here: https://xd.adobe.com/view/f4ea78f5-0ae0-4679-5f89-b4c6831499fd-82db/ ✔ -- Utilize good UI design and also create an animation/transition between the 2 screens that flows seamlessly and naturally. INSTRUCTIONS: 1. You have 10 hours from the time this video was uploaded to submit your entry. (9:30 AM EST to 7:30 PM EST) 2. Submit your Figma or Adobe XD prototype with this format: "Day 1 @designcoursecom #7days7designs" (Must include the hashtag!) 3. Only 1 submission per person. 4. For added bonus points, follow me on Twitter! 😁 https://twitter.com/designcoursecom Thanks to Florin Pop for inspiring this type of challenge! Here's his chan, go sub up if you wish! https://www.youtube.com/channel/UCeU-1X402kT-JlLdAitxSMA Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel a
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from DesignCourse · DesignCourse · 0 of 60

← Previous Next →
1 Photoshop Pen Tool Tutorial (Tattoo Design)
Photoshop Pen Tool Tutorial (Tattoo Design)
DesignCourse
2 How to Design the Microsoft Logo in Photoshop
How to Design the Microsoft Logo in Photoshop
DesignCourse
3 Photoshop Gradients Video Tutorial
Photoshop Gradients Video Tutorial
DesignCourse
4 Your Guide to Layer Styles
Your Guide to Layer Styles
DesignCourse
5 Layer Masks in Photoshop
Layer Masks in Photoshop
DesignCourse
6 iOS App Icon Design Tutorial in Illustrator CS6
iOS App Icon Design Tutorial in Illustrator CS6
DesignCourse
7 Illustrator CS6 Logo Design Tutorial - Archfold
Illustrator CS6 Logo Design Tutorial - Archfold
DesignCourse
8 Photoshop CS6 3D Tutorial - Magic Tent Illustration
Photoshop CS6 3D Tutorial - Magic Tent Illustration
DesignCourse
9 How to Design a Tshirt Tutorial - Adobe Illustrator
How to Design a Tshirt Tutorial - Adobe Illustrator
DesignCourse
10 Types of Logos - Lettermark & Monogram Logo Type
Types of Logos - Lettermark & Monogram Logo Type
DesignCourse
11 Banner Design in Photoshop CS6
Banner Design in Photoshop CS6
DesignCourse
12 How to Design a Logo in Illustrator CC
How to Design a Logo in Illustrator CC
DesignCourse
13 Designing a Logo in Photoshop CC
Designing a Logo in Photoshop CC
DesignCourse
14 1. Launch & Market a Web Based Business - Introduction
1. Launch & Market a Web Based Business - Introduction
DesignCourse
15 2. Launch & Market a Web Based Business - Logo Design
2. Launch & Market a Web Based Business - Logo Design
DesignCourse
16 3. Home Page Mockup in PS : Part 1
3. Home Page Mockup in PS : Part 1
DesignCourse
17 4. Home Page Mockup in PS : Part 2
4. Home Page Mockup in PS : Part 2
DesignCourse
18 5. Home Page Mockup in PS : Part 3
5. Home Page Mockup in PS : Part 3
DesignCourse
19 6. Home Page Mockup in PS : Part 4
6. Home Page Mockup in PS : Part 4
DesignCourse
20 7. Home Page HTML & CSS - Part 1
7. Home Page HTML & CSS - Part 1
DesignCourse
21 8. Home Page HTML & CSS - Part 2
8. Home Page HTML & CSS - Part 2
DesignCourse
22 Using Photoshop to Showcase Mobile Projects
Using Photoshop to Showcase Mobile Projects
DesignCourse
23 Flat Icon Design Tutorial in Illustrator CC
Flat Icon Design Tutorial in Illustrator CC
DesignCourse
24 Illustrator CC Logo Design Tutorial - A Logo That "Pops"!
Illustrator CC Logo Design Tutorial - A Logo That "Pops"!
DesignCourse
25 Logo Design Follow Along 1: Emblem Logo Design
Logo Design Follow Along 1: Emblem Logo Design
DesignCourse
26 Showcasing Logos in 3D with Blender
Showcasing Logos in 3D with Blender
DesignCourse
27 How to Design an Effective Lettermark Logo
How to Design an Effective Lettermark Logo
DesignCourse
28 Squeeze Page Design Tutorial in Photoshop (Part 1)
Squeeze Page Design Tutorial in Photoshop (Part 1)
DesignCourse
29 Squeeze Page Design Tutorial in Photoshop (Part 2)
Squeeze Page Design Tutorial in Photoshop (Part 2)
DesignCourse
30 Mobile GUI Element Design in Adobe Photoshop CC (Part 1)
Mobile GUI Element Design in Adobe Photoshop CC (Part 1)
DesignCourse
31 Mobile GUI Element Design in Adobe Photoshop CC (Part 2)
Mobile GUI Element Design in Adobe Photoshop CC (Part 2)
DesignCourse
32 Flat Mobile App Design in Photoshop CC - Weather App
Flat Mobile App Design in Photoshop CC - Weather App
DesignCourse
33 Create Reflective 3D Text in Blender (Beginner)
Create Reflective 3D Text in Blender (Beginner)
DesignCourse
34 Animating a Logo with Adobe After Effects CC (Beginner)
Animating a Logo with Adobe After Effects CC (Beginner)
DesignCourse
35 Design a Game Website Mockup in Photoshop CC (Part 1)
Design a Game Website Mockup in Photoshop CC (Part 1)
DesignCourse
36 Design a Game Website Mockup in Photoshop CC (Part 2)
Design a Game Website Mockup in Photoshop CC (Part 2)
DesignCourse
37 Photo Manipulation Tutorial in Photoshop CC (Beginner)
Photo Manipulation Tutorial in Photoshop CC (Beginner)
DesignCourse
38 Advertising Illustration Tutorial in Photoshop CC
Advertising Illustration Tutorial in Photoshop CC
DesignCourse
39 Perspective Warp Tool Tutorial in Photoshop CC
Perspective Warp Tool Tutorial in Photoshop CC
DesignCourse
40 Free Giveaway Contest.  (WiseBanner Banner Maker).
Free Giveaway Contest. (WiseBanner Banner Maker).
DesignCourse
41 Design an Animated Loading/Download Icon (GIF)
Design an Animated Loading/Download Icon (GIF)
DesignCourse
42 Contest Winners (WiseBanner)
Contest Winners (WiseBanner)
DesignCourse
43 Model & Animate a 3D Push Button in Blender (Beginner)
Model & Animate a 3D Push Button in Blender (Beginner)
DesignCourse
44 Mega Tutorial - iPhone Breathalyzer - Project Introduction
Mega Tutorial - iPhone Breathalyzer - Project Introduction
DesignCourse
45 Part 1 - iPhone Breathalyzer - Blender
Part 1 - iPhone Breathalyzer - Blender
DesignCourse
46 Part 2 - iPhone Breathalyzer - Rendering & GUI Design
Part 2 - iPhone Breathalyzer - Rendering & GUI Design
DesignCourse
47 Part 3 - iPhone Breathalyzer - UI Animation in After Effects
Part 3 - iPhone Breathalyzer - UI Animation in After Effects
DesignCourse
48 Part 4 - iPhone Breathalyzer - Website Design in Photoshop CC
Part 4 - iPhone Breathalyzer - Website Design in Photoshop CC
DesignCourse
49 Part 5 - iPhone Breathalyzer - HTML Part 1
Part 5 - iPhone Breathalyzer - HTML Part 1
DesignCourse
50 Part 6 - iPhone Breathalyzer - HTML/CSS Part 2
Part 6 - iPhone Breathalyzer - HTML/CSS Part 2
DesignCourse
51 Part 7 - iPhone Breathalyzer - HTML/CSS Part 3
Part 7 - iPhone Breathalyzer - HTML/CSS Part 3
DesignCourse
52 Part 7 - iPhone Breathalyzer - Finishing Touches
Part 7 - iPhone Breathalyzer - Finishing Touches
DesignCourse
53 Square Space Logo Maker - C'mon People.
Square Space Logo Maker - C'mon People.
DesignCourse
54 Design a Bloody Knife in Photoshop CC
Design a Bloody Knife in Photoshop CC
DesignCourse
55 Typographic Poster Design Tutorial in Illustrator (Part 1)
Typographic Poster Design Tutorial in Illustrator (Part 1)
DesignCourse
56 Typographic Poster Design Tutorial in Illustrator (Part 2)
Typographic Poster Design Tutorial in Illustrator (Part 2)
DesignCourse
57 Modern Business Card Design in Illustrator CC (Part 1)
Modern Business Card Design in Illustrator CC (Part 1)
DesignCourse
58 Modern Business Card Design in Illustrator CC (Part 2)
Modern Business Card Design in Illustrator CC (Part 2)
DesignCourse
59 Parallax Tutorial using Parallax.JS
Parallax Tutorial using Parallax.JS
DesignCourse
60 Interview: Andrew Price of BlenderGuru.com
Interview: Andrew Price of BlenderGuru.com
DesignCourse

Design and prototype an email capture form using UI design fundamentals and interaction design, and submit it for a chance to win a free UI design course.

Key Takeaways
  1. Design an email capture form with a subscribe button, email address field, and terms of service checkbox
  2. Create an interactive prototype using Adobe XD or Figma
  3. Apply UI design fundamentals such as visual hierarchy, typography, and white space
  4. Submit the design using Twitter with a specific hashtag and mentioning the instructor
  5. Participate in the 7-day design challenge and receive feedback from the instructor
💡 The key to a successful email capture form design is to balance visual appeal with functionality and usability, and to create an interactive prototype that showcases the design's interactive elements.

Related Reads

📰
Meet Crumbie
Learn about Crumbie, a UX design concept, and its relevance to designers
Medium · UX Design
📰
Build an Accessible Optimistic Toggle That Can Admit It Was Wrong
Learn to build an accessible optimistic toggle that maintains alignment between keyboard focus, announced state, and server truth
Dev.to · babycat
📰
AI Won’t Replace Designers. Average Designers Should Be Worried Instead.
AI won't replace talented designers, but average designers should be worried about being replaced by AI, highlighting the need for unique skills and creativity
Medium · AI
📰
AI Won’t Replace Designers. Average Designers Should Be Worried Instead.
Average designers should focus on developing unique skills to stand out, as AI won't replace talented designers, but mediocrity might
Medium · UX Design
Up next
How to Build a Doctor Appointment Booking Website in WordPress | CLDoctor Theme
Quick Tips - Web Desiign & Ai Tools
Watch →