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