Piyaphon Inthavong (0337589)
Interactive Design
Project 2
LECTURE NOTES
Week 6:
October 1st, 2019
Wrapper & container
The wrapper holds a design within certain boundaries
The container is the area enclosed by the beginning and ending tags..
Limiting Width
Set min-width and max-width to ensure that the contents of pages are legible.
Achieved by using the code min-width and max-width property
Limiting Height
Control what happens when there is not enough space for the content of the box
Achieved by using the code min-width and max-width property
Overflow content
The overflow content [overflow] property specifies what should happen if content overflows an element's box.
Border separates the edge of one box from another
Margins sit outside the edge of the border.
Padding is the space between the border of a box and any content contained within it
Division tag <div> acts as grouping block elements, they are use for creating layouts.
HTML codes for the navigation
list-style: none; hides the bullet points
width: 100px; set width to 100px
padding: 20px; set padding to 20px
display: inline-block set the display of the ul to align horizontally
padding: 0 20px; set the padding to 0px (top and bottom) 20px (left and right)
float: left; set the element to align from left to right instead of vertically
Week 7:
October 8th, 2019
There were no lectures today.
Week 8:
October 15th, 2019
Responsive web design adjust web content to fit various screen sizes appropriately, which prevents information from flowing out on small devices. It achieved through the fluid grid concept. Different elements can display in certain screen size using media queries.
Bootstrap is most well known responsive web design frameworks among the industry.
Bootstrap deal with columns not rows, the number 12 makes it flexible to work with as it is divisible to multiple numbers ranging from 6, 4, 3, 2.
Bootstrap is most well known responsive web design frameworks among the industry.
Bootstrap deal with columns not rows, the number 12 makes it flexible to work with as it is divisible to multiple numbers ranging from 6, 4, 3, 2.
INSTRUCTIONS
PROJECT 2: Troublemakers Microsite
Week 6:
October 1st, 2019
Today Mr. Shamsul briefed us through our second project which is to create a microsite for the Troublemakers Manifesto event. To create a landing page interface for the event, I began by planning out its contents, the objectives and the design purpose all in my notebook. A wireframe is a necessary process in creating any websites.
 |
| Planning process for the Troublemakers microsite. |
 |
| Draft and wireframe for the microsite. |
Week 7:
October 8th, 2019
Once all the planning was done in the notebook, I continued to Adobe Illustrator to create a digital prototype for the website. The first step into creating a website is usually to divide the columns carefully to fit the bootstrap 12 columns rule.
 |
| Preparing columns to divide the microsite sections into a reliable grid. |
 |
| Placing the type and the key artwork according to the wireframe sketched earlier. |
 |
| Finishing up the website wireframe with the footer. |
 |
| A complete wireframe of the microsite made in Adobe Illustrator. |
PDF embedded version of the final wireframe
The link below is the final coded website:
FURTHER READING
 |
| 20 Details You Should Always Include on Your Event Website, article by Social Tables. |
Something that even some people forget to include is the event description, which is one of the most crucial elements of the event website. The details should be clear, concise, and have a strong Call-to-action to attract users to purchase a ticket or secure an RSVP. Adding company information contact details allow potential guests and clients to approach you and ask about the other details of your event. Create an attractive landing page because people can judge the entire page in as quick as 3.42 seconds. As for the speakers, try including bio information, speaker session times and even their social information.
Keep in mind that to include a feature that allows visitors to buy tickets for an upcoming event they like to attend. Most of the times when people cannot find what they want in a website, they no longer have a reason to stay on the website and simply leave. Although, a refund policy must be available for this feature as it gives the participants a more forgiving decision to make for a future event in case they change their mind.
A simple call to action can do miracles for the event. Make the call to action clear, whether its “sign up,” “buy tickets,” or “share”. Whatever the action is that you want attendees to take, make it clear on each page. Do not mix the pages with multiple CTA buttons because it creates complexity within the website and makes it harder for people to view and make decisions.
https://www.socialtables.com/blog/event-marketing/details-event-website/
Comments
Post a Comment