Research Report
ENG104 requires each student to write an organized Research Report. The page length is 8 pages (not including reference page, table of contents and cover page). Out of those 8 pages, one whole page can be devoted to pictures, charts, or graphics. Students can either have one whole page of graphics, or there can be possibly 4 graphics that take up a quarter page each spread throughout the report.
The topic of the report is to connect to the student’s major(Internet Media Digital Design, future profession(Web Developer) Other than that guideline, students are free to choose their own topic. It is encouraged that students discuss ideas for a topic with their instructor. Many ideas students have for a topic can be made to fit the above requirement.
The report will incorporate elements of design such as headings, white-space and a table of contents.
All outside sources must be credited with in-text citations throughout the report and with a list of References or Works Cited at the end of the report.
Students must use APA Style for crediting sources.
Topic – The Evolution of Web Design: Explore how web design has transformed from the early days of the internet to the present. Discuss key innovations such as responsive design, the rise of mobile-first approaches, and the integration of AI in design tools. This topic allows you to use historical data, trend analyses, and could include visuals like timelines or comparative designs.
Category: Web design
Scenario
Example University is preparing for the new school year. The admissions department has received complaints that their web application for student records is slow or not available during the peak admissions period because of the high number of inquiries.
You are a cloud engineer. Your manager has asked you to create a proof of concept (POC) to host the web application in the AWS Cloud. Your manager would like you to design and implement a new hosting architecture that will improve the experience for users of the web application. You’re responsible for building the infrastructure to host the student records web application in the cloud.
Your challenge is to plan, design, build, and deploy the web application to the AWS Cloud in a way that is consistent with best practices of the AWS Well-Architected Framework. During the peak admissions period, the application must support thousands of users, and be highly available, scalable, load balanced, secure, and high performing.
The following image shows an example of the student records web application. The site lists records of students who have applied for admission to the university. Users can view, add, delete, and modify student records.
Solution requirements
The solution must meet the following requirements:
Functional: The solution meets the functional requirements, such as the ability to view, add, delete, or modify the student records, without any perceivable delay.
Load balanced: The solution can properly balance user traffic to avoid overloaded or underutilized resources.
Scalable: The solution is designed to scale to meet the demands that are placed on the application.
Highly available: The solution is designed to have limited downtime when a web server becomes unavailable.
Secure:
The database is secured and can’t be accessed directly from public networks.
The web servers and database can be accessed only over the appropriate ports.
The web application is accessible over the internet.
The database credentials aren’t hardcoded into the web application.
Cost optimized: The solution is designed to keep costs low.
High performing: The routine operations (viewing, adding, deleting, or modifying records) are performed without a perceivable delay under normal, variable, and peak loads.
Assumptions
This project will be built in a controlled lab environment that has restrictions on services, features, and budget. Consider the following assumptions for the project:
The application is deployed in one AWS Region (the solution does not need to be multi-Regional).
The website does not need to be available over HTTPS or a custom domain.
The solution is deployed on Ubuntu machines by using the JavaScript code that is provided.
Use the JavaScript code as written unless the instructions specifically direct you to change the code.
The solution uses services and features within the restrictions of the lab environment.
The database is hosted only in a single Availability Zone.
The website is publicly accessible without authentication.
Estimation of cost is approximate.
Disclaimer: A security best practice is to allow access to the website through the university network and authentication. However, because you are building this application as a POC, those features are beyond the scope of this project. You are encouraged to implement this additional functionality.
Approach
Recommendation: Develop your project solution in phases. This will help you ensure that basic functionality is working before the architecture becomes more complex. After the application is working, you are encouraged to enhance the solution with additional requirements.
Phase 1: Planning the design and estimating cost
In this phase, you will plan the design of your architecture. First, you will create an architecture diagram.
Next, you will estimate the cost of the proposed solution, and present the estimate to your educator. An important first step for any solution is to plan the design and estimate the cost. As necessary, review the various components in the architecture to adjust the estimated cost. Cost is an important factor when building a solution because cost can help to determine the components and architecture pattern to use.
Note: You don’t need to use the lab environment for this phase of the project, but you might want to use it to refer to AWS services and features as you plan your design.
Task 1: Creating an architectural diagram
Create an architectural diagram to illustrate what you plan to build. Consider how you will accomplish each requirement in the solution.
References
AWS Architecture Icons: This site provides tools to draw AWS architecture diagrams.
AWS Reference Architecture Diagrams: This site provides reference architecture diagrams for a variety of use cases.
Task 2: Developing a cost estimate
Develop a cost estimate that shows the cost to run the solution in the us-east-1 Region for 12 months. Use the AWS Pricing Calculator for this estimate.
If required by your instructor, add your architectural diagram and cost estimate to presentation slides. Your educator might want to evaluate this information as part of assessing your work on this project. A presentation template is provided.
References
What Is AWS Pricing Calculator?
PowerPoint presentation template
Phase 2: Creating a basic functional web application
In this phase, you will start to build the solution. The objective of this phase is to have a functional web application that works on a single virtual machine in a virtual network that you create. By the end of this phase, you will have a POC to demonstrate hosting the application on the AWS Cloud. You can then build upon your work in later phases.
Task 1: Creating a virtual network
Create a virtual network to host the web application.
Tip: Create networking resources such as a virtual private cloud (VPC) and subnets.
Reference
AWS Academy Cloud Architecting – Lab: Creating a Virtual Private Cloud
Task 2: Creating a virtual machine
Create a virtual machine in the cloud to host the web application.
To install the required web application and database on the virtual machine, use the JavaScript code from the following link: SolutionCodePOC
Tips:
Use a compute service such as Amazon Elastic Compute Cloud (Amazon EC2).
Use the latest Ubuntu Amazon Machine Image (AMI).
Task 3: Testing the deployment
Test the deployment of the web application to ensure it is accessible from the internet and functional. Perform a few tasks, such as viewing, adding, deleting, or modifying records.
Tip: To access the web application, use the IPv4 address of the virtual machine.
PROJECT 3: USABILITY REVIEW
PROJECT DESCRIPTION
For your third assignment, you are hired as a UX Designer to conduct a Usability Review of an existing web site, desktop application, or mobile app and present your findings and recommendations using PowerPoint or other approved presentation application (e.g. Google Slide, LibreOffice Impress, Prezi)
PROJECT REQUIREMENTS
Select an existing website, desktop, or mobile application and complete the following as the result of your Usability Review.
Describe the critical goal of the web site or application. In other words, what is the purpose or what is it designed to accomplish?
Describe four, distinct usability issues you uncovered (sorted by severity) based on the project resources and/or other research you performed. Complete the following information for each issue and present it in column format:
Usability Issue – List the issue
Severity Rating (High, Medium, or Low) – Rate the severity of the issue into one of three categories:
High severity – Issues that prevent the user from completing tasks efficiently.
Medium severity – Issues that impede ease of use and understanding.
Low severity – Issues that do not prevent users from completing tasks, but inconvenience the user.
Rationale – Describe the usability issue. Discuss the severity you assigned to the issue. Why is this an issue? How does it tie to the project resources and/or research? Justify your severity rating.
Recommendation – Recommend a path of action to address the usability issue. How can the issue be fixed or corrected?
Note: This is not a complete or extensive usability review, but for purposes of this class, it will provide you an introduction into the usability review process.
PROJECT FINDINGS PRESENTATION
Please follow the steps below:
Create a PowerPoint presentation to present your findings (USE THE ATTACHED TEMPLATE) . The PowerPoint template below can be used to complete this project. Simply add your information to the slides.
The slides should be designed as follows:
Slide 1: Cover Slide
Include the following:
Your name
Your class
Year and semester
Website or application used in your usability review
Slide 2: The critical goal of the website or application.
Slide 3: First Usability Issue
Include the following:
Item A: Usability Issue
Item B: Severity Rating
Item C: Rationale
Item D: Recommendation
Slide 4: Second Usability Issue
Include the following:
Item A: Usability Issue
Item B: Severity Rating
Item C: Rationale
Item D: Recommendation
Slide 5: Third Usability Issue
Include the following:
Item A: Usability Issue
Item B: Severity Rating
Item C: Rationale
Item D: Recommendation
Slide 6: Fourth Usability Issue
Include the following:
Item A: Usability Issue
Item B: Severity Rating
Item C: Rationale
Item D: Recommendation
Slide 7: Summary
Summarize slides 1 through 6.
Slide 8: References
List the references you used to complete this project. You must include at least two academic references, not including the Web site/application you evaluated.
Slide 9: Project Reflection
Answer the following question regarding the assignment:
What issues or challenges did you face completing this project? How did you resolve them? Note: Your reflection should describe issues and/or challenges related to completing the usability study itself and not to issues of finding a web site to evaluate or creating your PowerPoint presentation. If you did not face any issues or challenges in completing this project, what do you think are some issues or challenges someone new to completing usability studies might face in completing a project like this? Note: Your reflection must be a total of at least 200 words.
PRESENTATION DESIGN STYLE
Please follow conventional presentation design format and guidelines. In other words, your presentation should look “presentable”.
You will turn in your FIGMA links and FIGMA files.
For each of the following:
Navigation tree
Phone view of the website
Tablet view of the website
Desktop view of the website.
Create a color scheme for you site. Select effective fonts.
You are building a website for a restaurant. The only information you are given is the type of food that is being served. Based on the food you will create the following items to use in your design.
A name for the restaurant (
Palace of Arabian Knights)
Using a logo creator, a logo for the restaurant
This food is main menu item of the restaurant, there are other items on the menu, but you must focus the food you select.
Your restaurant website must include the following items
Opening page highlighting online ordering, must include photos of food.
A menu created by using ChatGPTLinks to an external site.
A logo created by using an online logo maker of your choice
At least on image created by using DALL-ELinks to an external site. image creator or another AI image creator of your choice, make it something abstract if you can
a process for online ordering, this will be a survey form type ordering system, with multiple screens. Make sure you gather information about the user. This will also have a Thank you page after ordering
There will be a registration page that will allow the user to get a coupon for 50% off their first order, this is separate from the online ordering process.
A process to allow users to schedule a pick-up or a reservation to eat at the restaurant.
You are creating a working prototype of the complete responsive website, which means you will have a working prototype for the phone, tablet and desktop. You may use any stock images, you need. Make sure you create a list of these in a word doc of where you downloaded the images from.
Below is a list of the types of food you can choose from.
Type of Food
fish
hamburger
salad
spaghetti
vegetables other than potatoes
shrimp
chicken wings
chicken
steak
ribs
lamb
Write a short reflection paper about the role of visual design and how it can be incorporated that in your life and field of study like Human Computer Interacton. Write 700-1000 words responding to the below prompts.
What are some of the principles of design? What are the steps within the visual design process?
The visual design process is similar to other processes (ex: scientific) but distinct in some ways. What differences or similarities do you see in these approaches?
How do you anticipate being able to integrate those principles into your discipline? How have our activities in this class changed the way you might approach designing in your field? Be specific with experiences from this class that affect your thinking.
Learning outcomes
This assignment directly connects to several learning outcomes from the course (listed in the syllabus). Here’s a summary of them…
Students will…
• Utilize the principles of Design specifically in the context of web and digital media
• Discuss the importance of visual design in digital user experiences.
• Discuss the role that visual design plays in the accessibility of an interface
• Utilize peer critique as a method of design development
• Create and use visual design systems.
• Control elements of design to improve the usefulness, usability, and enjoyment of digital interfaces.
• Conduct user research with the intention of designing visual interfaces
• Stylize text to promote readability.
• Prototype solutions using industry-standard tools.
Write a short reflection paper about the role of visual design and how it can be incorporated that in your life and field of study like Human Computer Interacton. Write 700-1000 words responding to the below prompts.
What are some of the principles of design? What are the steps within the visual design process?
The visual design process is similar to other processes (ex: scientific) but distinct in some ways. What differences or similarities do you see in these approaches?
How do you anticipate being able to integrate those principles into your discipline? How have our activities in this class changed the way you might approach designing in your field? Be specific with experiences from this class that affect your thinking.
Learning outcomes
This assignment directly connects to several learning outcomes from the course (listed in the syllabus). Here’s a summary of them…
Students will…
• Utilize the principles of Design specifically in the context of web and digital media
• Discuss the importance of visual design in digital user experiences.
• Discuss the role that visual design plays in the accessibility of an interface
• Utilize peer critique as a method of design development
• Create and use visual design systems.
• Control elements of design to improve the usefulness, usability, and enjoyment of digital interfaces.
• Conduct user research with the intention of designing visual interfaces
• Stylize text to promote readability.
• Prototype solutions using industry-standard tools.
The name to use is instakool photograpgy as the website company name. I also uploaded a few pictures to use for it. Not sure how many pages it takes so I selected 2 pages if not write please let me know.
Create a simple web
page! The web page can be on any topic
that you want! Here are the following
minimum requirements:
Use a title (this will appear
in the browser tab)
Use at least 3 headings (this
will change the font size)
Use paragraphs and breaks as
appropriate for your content
Include at least two images
Include at least one link to
a website
Include at least one list –
it can be unordered or ordered
Besides black, use at least 2
other colors
That’s it for the minimum
requirements.
Use a text editor such as
Notepad to create your HTML document.
Save it with a .html file
extension.
Test it out in a browser.
BOTH documents are attached, web project and rubric
Crisis Simulation Rubric 2022.docx
Crisis Simulation – Final Project media content created and essay response
Complete the Project #5 Submission Sheet and submit the document as an attachment. The revised storyboard should be submitted as a separate attachment.
Review
your Storyboard document created in Project #2. If you carefully
documented the design and navigation details for your Website, it will be
a straightforward process to build your Website from the storyboard.
Use Adobe Dreamweaver to build your Website.
There should be three storyboard pages for the
Home page (i.e., desktop, tablet, and mobile) and one storyboard page
for every other Web page in your Website.
Your Website should meet the following
requirements:
8 Web
pages minimum.
Use of FRAMES is not permitted!
Disclaimer
statement on the Home page or linked from the Home page. The disclaimer
will state that this is a
fictitious company and is developed as an education project. If any
copyrighted materials are included in accordance to the multimedia fair
use guidelines, a notice should be added and states that certain materials are included under
the fair use exemption of the U.S. Copyright Law and have
been prepared according to the multimedia fair use guidelines and are
restricted from further use.
The
Home page of your Website should be based on a responsive web design (RWD), so the layout and content adjust
according to different device and screen sizes, i.e., desktop
(769px~1232px), tablet (481px~768px), and mobile (480px and below).
Each
page should be properly titled both in the body as an heading AND
in the tag.
One
of the pages of your Website must be a Site Map.
Your
site should include the logo created in Project #3 (reduced from its
original size of 200×200).
Your
site should include the animation commercial created in Project #4 (at
least 20 seconds long, no larger than 800×600).
Your
site should include some clip arts/images other than the logo.
Your
site should include an embedded widget
or Web element (e.g., Google map, custom search, photo gallery, YouTube
video, etc.).
Your
site should include a navigation bar/menu/tab with rollover buttons/links, which can be graphical, link or
CSS-based.
Your
site should include a custom favicon on the Home page.
For
accessibility, insert a visible
Skip Link on every page.
For
accessibility, use alt attributes on all images.
For
accessibility, use title attributes on all non-text objects (e.g.,
tag, tag)
For
accessibility, at least the Home page passes WAVE (http://wave.webaim.org/), a Web
accessibility evaluation tool.
At
least the Home page passes the
W3C markup validator (http://validator.w3.org/). The use of a CSS validator is
optional.
The Website
must adhere to all Copyright and Fair Use guidelines and limitations
(Lecture #9). Proper attribution
and acknowledgement must be provided for graphic/content sources. Websites that do not adhere to
Copyright and Fair Use guidelines will not receive a grade.
The
content must be suitable for all audiences. Content or images that may be misconstrued to be offensive to
ANYONE is not acceptable, and the Website will not receive a grade.
Post your Website on your Mason
server account (e.g., mason.gmu.edu/~username).
Test your Website. For added feedback,
ask someone else to test your posted Website. Note: compatibility across all browsers is not part of the
requirement, however, is encouraged. Mozilla
Firefox will be used to examine your Website at the time of grading.
Complete the Project #5 Submission Sheet
This writing includes:
1- Essay about ( Mobile Applications and Digital Wellbeing)
Prescriptive length: 500 – 600 words
Academic writing style
-The report is exceptionally thorough, addressing the topic in detail and without occasional grammar or structure errors. It provides excellent critical reflections on the concepts, theories, and applications.
-Respond to the essay topic in paragraph form.
-Use Times New Roman (or equivalent), 12 pt, single-spaced.
-Provide references ( reviewed and newly written ).
In-text referencing must be used ( APA IEEE format ).
Include links to documentation, design principles/patterns, opinion articles, research, or the like.
2-Annotated bibliography
annotate the most important reference that you have included, making it exceptionally clear how it contributed to the essay.
* Artificial Intelligence tools are not permitted *