Project Case
COMP6232001 | COMP6800 | COMP6800001 | COMP6800016 | COMP6800049 | COMP6880051
Human and Computer Interaction
Computer Science E252-COMP6800-PI08-00
Valid on Even Semester Year 2024/2025 Revision 00
1.Kelompok tidak diperkenankan untuk:
Members of the group are prohibited from:
Melihat sebagian atau seluruh jawaban kelompok lain,
Seeing a part or the whole answer from other groups,
Menyadur sebagian atau seluruh jawaban dari buku, catatan, video, dan jenis referensi lainnya,
Retell a part or the whole answer from books, notes, videos, and other references,
Menyadur sebagian atau seluruh jawaban dari internet,
Retell a part or the whole answer from the internet,
Mengumpulkan jawaban yang tidak sesuai dengan tema soal,
Submitting an answer with a different theme from the given case,
Melakukan tindakan yang menyebabkan jawaban dicontek oleh orang lain atau kelompok lain, baik disengaja maupun tidak disengaja,
Doing action that could result the answer being copied by someone or other groups, intentionally or unintentionally,
Melakukan tindakan kecurangan lainnya.
Committing other dishonest actions.
2.Jika kelompok terbukti melakukan tindakan seperti yang dicantumkan pada butir ke-1, maka nilai mahasiswa dan/atau kelompok yang melakukan kecurangan, baik menyontek atau dicontek, akan dinolkan sesuai dengan peraturan yang berlaku.
If it has been proven that a group has committed dishonest actions outlined in point 1 above, the whole groups related to the incident, regardless of which one copies or has their answer copied, will be issued a score of zero according to the regulation.
3.Jawaban yang dapat diterima dan dinilai adalah jawaban yang dikumpulkan sebelum batas waktu yang telah ditentukan.
The answer must be submitted before the designated deadline to be accepted and graded,
4.Jawaban akan dinilai berdasarkan teknik atau metode yang diajarkan pada kelas praktikum dengan menggunakan software yang sudah ditentukan.
The scoring will be based on the materials taught during the practicum classes using the designated software. Using different software than requested may result in your answer not being graded.
5.Jika Anda tidak membaca peraturan ini, maka Anda dianggap sudah membaca dan menyetujuinya.
By taking this exam, you agree to these regulations, regardless of whether you have read it or not.
6.Persentase penilaian untuk matakuliah ini adalah sebagai berikut:
The score will be distributed as follows:
Tugas Mandiri
Assignment Proyek
Project UAP
Final Exam
7.Perangkat lunak yang digunakan pada matakuliah ini adalah sebagai berikut:
This course uses the following software:
Software
Software
Figma
Visual Studio Code
Web Browser (Google Chrome)
8.Ekstensi file yang harus dikumpulkan untuk matakuliah ini adalah sebagai berikut:
Your answers must be in the following file extensions:
Tugas Mandiri
Assignment Proyek
Project UAP
Final Exam
9.File yang harus dikumpulkan adalah keseluruhan jawaban beserta dengan aset yang digunakan (gambar, audio, video, dll) dan dokumentasi proyek yang berisikan link referensi aset dan penjelasan mengenai aplikasi yang dibuat (terlampir bersama dengan soal).
Include other files that can support your project, such as: all files in your project, other files (image, audio, video, etc.) used in your project, *.doc file (documentation of your project) that contains all pages in your project, reference links of additional files (image, audio, video, etc.) used in your project, the description about how to use your application, etc.
Soal
Case
cryPIto
cryPIto is an innovative cryptocurrency platform designed to empower users with seamless access to digital assets. Launched with the vision of simplifying crypto trading, cryPIto offers a user-friendly interface that caters to both beginners and experienced traders. Users can easily buy, sell, and trade a diverse range of cryptocurrencies while benefiting from advanced trading tools and real-time market analytics. With a focus on security and transparency, cryPIto employs cutting-edge technology to ensure that users' funds and personal information are always protected, making it a trusted choice in the rapidly evolving crypto landscape.
To enhance its reach and improve user engagement, cryPIto is developing a comprehensive online presence that will serve as a hub for all cryptocurrency-related activities. The new website will feature educational resources, market insights, and an intuitive trading platform, allowing users to navigate the world of crypto with confidence. By creating this digital space, cryPIto aims to foster a vibrant community of cryptocurrency enthusiasts and investors, ultimately supporting its mission to demystify digital assets and promote wider adoption of blockchain technology.
The requirements from cryPIto are described below:
1.The management wants you to design the website prototype for all five pages using Figma. Make sure that the website prototype that you designed is intentionally different from the website that you will make later, even if the themes are same. For each page contains header, navigation bar, content, and footer. Consider the layout, color, and consistency when designing the prototype.
2.cryPIto management wants you to build the website have a luxury looks, appealing, fully functional, and responsive. Make sure that the website is accessible to mobile users with a perfect look. To achieve that, use 5 kinds of CSS property and JavaScript. Use meta viewport tag and media screen rule that will be applied if the screen is below 768px screen width.
3.The website contains five main pages. They are Home Page, Cryptocurrencies Page, Learn Page, Benefits Page, and Register Page. Below are the requirements for each page:
Home Page
The Homepage has multiple sections. The Landing section displays a banner, the company tagline, and a ‘Sign Up’ button that redirects to the Register page. The Top Coins section displays the top 4 coins and a ‘View All Coins’ button that redirects to the Cryptocurrencies Page. The New to Crypto section displays a brief introduction to cryptocurrency and a ‘Learn More’ button that redirects to the Learn page.
Cryptocurrencies Page
The Product page displays the Top 4 Hot Coins, which are the coins with the highest market cap. This page also displays all coins on the market (min. 5).
Learn Page
The Learn page displays the FAQ section, which displays the top questions and answers about cryptocurrency. This page also contains the Guides section, which displays beginner guides. Lastly, this page also has a Tips and Tricks section that displays tips on buying, selling, and managing your portfolio.
Benefits Page
The Benefits page displays the benefits of using cryPIto (min. 3).
Register Page
The Register page allows users to sign up to start their crypto journey. You are asked to create a form with five kinds of form components and five kinds of validation. For validation, you must create it using JavaScript and not use regular expression.
Guidelines:
a.Design your website by observing the principles of human and computer interaction. Set up your site as creatively as possible but still strive for consistency.
b.The website prototype must be designed using Figma and make sure to create some features, such as color and text style, effect, component, variant or interactive component, and navigation.
c.Consider the color, font, size, and layout that you use to design the prototype and website.
d.All pages mentioned in the requirement should be created based on your template design.
e.Use only external CSS. Internal or inline CSS will not be marked.
f.Use CSS box positioning to design your web structure, do not use table for the layout.
g.Consider the language you use, including spelling and grammar, feel free to choose either Bahasa or English, but you cannot have both at the same time.
h.Make your website responsive so it can deliver in any size, particularly for desktops, tablets, and mobile devices.
i.Organize your files with subdirectories.
j.Include references (link from a website, book, etc) that you use in creating the website.
I'll help you create a comprehensive cryptocurrency platform website for cryPIto that meets all the requirements. This will be a luxury, responsive website with all five required pages and proper functionality.
I've created a comprehensive cryptocurrency platform website for cryPIto that meets all your project requirements. Here's what I've included:
5 Main Pages:
5 CSS Properties Used:
JavaScript Functionality:
Responsive Design:
5 Form Components:
5 Validation Types (JavaScript only):
/css/styles.css (external CSS only)
/js/main.js (main functionality)
/js/learn.js (FAQ accordion)
/js/register.js (form validation)The website follows HCI principles with intuitive navigation, clear visual hierarchy, and excellent user experience across all devices. All pages are fully functional and ready for deployment!
I'll help you create a Figma prototype for the cryPIto website with intentionally different styling from the implemented website. Since I can't directly create Figma files, I'll provide you with detailed design specifications and guidance for creating the prototype.
Primary: #6366F1 (Indigo)
Secondary: #06B6D4 (Cyan)
Accent: #F59E0B (Amber)
Background: #F8FAFC (Light Gray)
Text: #1E293B (Dark Slate)
Success: #10B981 (Emerald)
Error: #EF4444 (Red)Header/Navigation:
Landing Section:
Top Coins Section:
New to Crypto Section:
Page Header:
Top 4 Hot Coins:
All Coins Table:
FAQ Section:
Guides Section:
Tips Section:
Benefits Grid:
Statistics Section:
Form Layout:
Form Elements:
Primary/600: #6366F1
Secondary/500: #06B6D4
Accent/500: #F59E0B
Gray/50: #F8FAFC
Gray/900: #1E293B
Success/500: #10B981
Error/500: #EF4444H1/Desktop: Poppins Bold, 48px, #1E293B
H2/Desktop: Poppins Bold, 36px, #1E293B
H3/Desktop: Poppins SemiBold, 24px, #1E293B
Body/Large: Inter Regular, 18px, #475569
Body/Regular: Inter Regular, 16px, #475569
Button/Text: Inter SemiBold, 16pxCard Shadow: 0px 4px 16px rgba(0,0,0,0.1)
Button Shadow: 0px 2px 8px rgba(99,102,241,0.3)
Hover Lift: 0px 8px 24px rgba(0,0,0,0.15)Button Component:
Card Component:
Input Component:
Navigation:
FAQ Accordion:
Form Validation:
This prototype design intentionally differs from the implemented website while maintaining the same content structure and functionality. The geometric, colorful approach contrasts with the dark, luxury theme of the actual website, demonstrating design versatility while meeting the project requirements.