WireFraming A Landing Page - Lesson 2

Lesson Details:

This course is brought to you by Appy Pie as part of our Academy series.
You click all the elements of the divider and hold ctrl to duplicate the same let's see what the next section of the landing page is this section has a little bit more information on the course with a bunch of icons and some text so let's go to the quick add toolbar and drag another image and position to the left let's go to the pre-k toolbar and drag down an icon right next to it duplicate these icons using the option key these icons will be denoting what the students can learn in the course increases the length of damage and select icons hold on option key and create the third row let's align the icons using the smart guide in balsamic another important aspect in design as well as balsamic is creating reusable symbols we will be using the divider a lot more than the rest of the section hence it makes sense for you to create a reusable divider symbol select the hetero the other head shrew hand the other a true and head over to the top of the toolbar and click group come to the lower left corner and enter the group name as divider and click the button convert the symbol you can see that going to the symbols tab the divider is available for reuse you can just drag it down and continue using it unlock the browser and extend the length lock it back again so that it does not move around and let us see what the next section of the landing page is this section is an FAQ section or a frequently asked questions section consisting of common questions a student might have so let's just click on the curriculum subtitle and hold option key and duplicate the same and renaming it to a fake use let's go back to the quick add tool bar and search for the text field we will be using this as the question field hold down option to create duplicates of the same denoting multiple question fields now head over to the quick add toll bar and search for an arrow this is to denote that when the user clicks on the arrow the answer will drop down resize the arrow to s and drag it to the corner of the text field and hold option key and create duplicate of the same make sure they're all aligned and look good now let's have a look at what the next section of the landing pages this section is the instructor bio section where the instructor has a few details about himself so the next way is to head over to the symbols tab and insert the divider symbol let's unlock the browser and extend it a little bit more and lock it back again copy the image from the course about section and hold option to create a duplicate of the same now let's just use a subtitle and enter some basic text introducing the instructor to the student let's take a block of text and realign it a little bit so that it looks like quartet is present which goes a little bit more deeper into the instructors skill sets let's align it a little bit more so that it all looks good we are here at the last section of the landing page that is the call to action page and the footer section the call to action we are asking from the user is to enroll for the course so dragging the divider symbol from the symbol tab and drag down the subtitle to create a duplicate of the same and rename it to start learning today position it a little bit to the center drag down the copy of block of text from above and resize it head over to the quicker toolbar again and drag down a button and position it just below the text and rename the button to enroll now go back to the quick add toolbar and search for hedge rules again drag it up all the way so that it's edge to edge with the browser window thereby creating a solid divider line insert a block of text and align it and go back to the quicker toolbar and look for a list item rename the list item to the names of the pages and position it right next to a lock of text it can be home about contact whatever is relevant and what and all the pages you have in the landing page Congrats you have completed a completely mobile ready landing page even though the wireframe looks great and complete it still looks a little bit sketchy this is because we need to change the skin of the wireframe head over to the inspector tab and click on wireframe skin and voila the entire wireframe just became so much better it's looking so professional and ready to be published to the world congratulations you know how to design and wireframe mobile ready landing pages this is an exciting time you are ready to move on to much professional projects and create projects of your own and upload them on your triple social media pages Linkedin etc as always anything you require you can send a message and I'll be glad to help and lastly I urge you to leave an honest review for this course along with feedback if any so that I can work on them and improve your learning experience.