Git Product home page Git Product logo

techterra's Introduction

TechTerra🧑‍💻

An Imperative Web Design Repository !

Welcome to TechTerra !, a revolutionary platform designed for the IIITA community🏫, offering a dynamic space for students, faculty, alumni and recruiters alike. Our site is tailored to meet the evolving needs of students in their academic and professional journeys. At TechTerra, students have the opportunity to showcase their skills💡, projects📃, and achievements🏆, creating a comprehensive portfolio that resonates with potential employers and collaborators. Through detailed student profiles, alumni and recruiters can easily connect with individuals whose skills align with their organizational needs, fostering a bridge between academia and industry. Going beyond traditional academic boundaries, TechTerra hosts innovation challenges and hackathons🌟 organized by IIITA, providing students with opportunities to apply their skills in real-world scenarios. These events also serve as a platform for companies to discover emerging talent and groundbreaking solutions.

Hola @contributors 😊, we invite you to design the TechTerra website, to use your creativity and design skills to tailor this website from the very beginning, from thinking about the user flow to implementing the visual design you have got to do it all!


✒Tech Stack:

  • FigJam
  • Figma/Adobe XD
  • Illustrator

⏳The Design Timeline:

Task Duration of Submission Difficulty Level Maximum Points
Task 1: UX Task 14th - 17nd December Beginner 10
Task 2: Logo Design 17th - 20th December Competitive 30
Task 3: UI Tasks-1 20th - 1st January Intermediate 30
Task 4: UI Tasks-2 1th - 7th January Intermediate 30
Task 5: Designing Major Functioning Pages 7th - 12th January Skilled 50

The detailed instructions for each task will be mentioned in the respective folders once the submission duration starts. Keep checking for updates about new task releases😉!


🧾Common Rules:

  • The repository is divided into several tasks. Each task will be opened subsequently for a limited amount of time and all the submissions have to be made within those allotted days only. NO submission will be accepted after the allotted time ends. The details for the specific tasks and the time allotted for each can be found in their specific folders.
  • The mentors will evaluate the submissions and assign points for each specific task based on a variety of design-related factors, such as the use of design thinking, the uniqueness of the idea, the submission's visual attractiveness, etc.
  • Since everyone should be awarded for their efforts, the participants who qualify for the Minimum Design Criteria (MDC) as mentioned in the respective folders of the task will be awarded Full Points🎉
  • Since the goals of these tasks are learning design rather than only earning points, any plagiarism or attempt at it will be frowned upon and will result in disqualification from OpenCode. You can always ping us with questions, and we'll be pleased to answer them, but merely duplicating other people's ideas to finish the jobs will be strongly prohibited.

ALL THE FINAL DECISIONS FOR THE JUDGMENT AND AWARDING OF POINTS ⚖️ BASED ON THE SUBMISSION RESIDE WITH THE MENTORS & ORGANISERS. No claim can be made on the number of points awarded by the Mentors & Organizers🙂.


📩Contribution:

We welcome your contributions. Please follow the below guidelines while contributing to this project:

  1. Fork and star⭐ the repository and clone locally.
  2. Create an upstream remote and sync your local copy before you branch. See detailed instructions here
  3. Create separate branches for each separate piece of work.
  4. Do the work and commit changes with good commit messages.
  5. Once you are confident in your work, create a pull request to the main branch of the upstream repository with proper descriptions explaining what you did and wait until we review it.

Check out GitHub Flow for more details.


✒️Quick Resources:

Since you have scrolled this far, here are some short resources to give you an edge over others😉:


techterra's People

Contributors

aashish-raghav avatar abhi5h6k avatar ajay484 avatar amankumar0724 avatar anushkp1107 avatar apoorv012 avatar arya-007 avatar atharva0192 avatar ayushk00 avatar codinjack avatar d-hacker26 avatar harshal5167 avatar jaysharma100 avatar k7aditya avatar kushal7201 avatar mannxxx avatar nandinig24 avatar nilesh9758 avatar parth1egend avatar rishi2674 avatar rishika-g31 avatar rndastech avatar rohit-110 avatar sarthakvermaa avatar shahswati098 avatar shrutikarathi6 avatar shweta-1902 avatar sindhu194 avatar tej-as1 avatar tonystark-jr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

techterra's Issues

Task 1-UX Task

Task 1- UX Task

OPEN TO ALL.
NO need to claim this issue.
NO submission will be accepted after 16th December, 11:59 PM.

Your First Task is based on a basic understanding of User Experience and User flow. This is a 20 points task.

TechTerra as the name suggests is a platform designed for the IIITA community, offering a dynamic space for students, faculty, alumni and recruiters alike. At TechTerra, students have the opportunity to showcase their skills, projects, and achievements, creating a comprehensive portfolio that resonates with potential employers and collaborators. Through detailed student profiles, alumni and recruiters can easily connect with individuals whose skills align with their organizational needs, fostering a bridge between academia and industry. Going beyond traditional academic boundaries, TechTerra hosts innovation challenges and hackathons organized by IIITA, providing students with opportunities to apply their skills in real-world scenarios. These events also serve as a platform for companies to discover emerging talent and groundbreaking solutions.

😊If you guys can think of more related features for the website you are free to add them in your Userflow

💡The task needs to be done on FigJam. FigJam is free to use and doesn't need to download. It is very easy to learn and hardly takes 15 minutes to learn. If you are unclear on how to use it, check the tutorial here: https://www.youtube.com/watch?v=RVNuArHH5WM

Procedure:

  1. Think about how the flow of the website will be for an average user who has just clicked on the website’s link and is opening it for the first time. The user is assumed to be unclear about the functionalities of the website.
  2. You have to decide how the user will move through the website, what steps will he need to take, and in which order, for eg. the user first might need to sign up to the website, might want to search for the current hackathons, maybe wants to add a project in his profile, etc.
  3. Essentially, you have to design a ‘single flow’ for a user who wants to make a comprehensive portfolio for himself or have to participate in any current happenings in the college etc.
  4. Finally, create your ideal user flow in a FigJam file and provide its link (in a .txt file). Submit your txt files in the UX TASK folder only.

If you are unclear about user flow diagrams check this short video here: https://www.youtube.com/watch?v=cvYhuowazh0


PRO-TIP: The secret to creating a powerful user flow is to first research and gain an understanding of how a given problem statement is addressed. As a result, the first and most important thing you must do before beginning to build your user flow is to search other websites that deal with a similar problem statement of buying and selling goods. And take note of the key features they use (basically their user flow).


MDC (Minimum Design Criteria):

The user flow can be very simple, but it must at least fulfill the basic functionality of the website, which is that users should be able to buy and sell items. The flow should start with the user entering the site for the first time and continue until his job is done.

PRO-TIP: Try to make an elaborate user-flow…that makes your task of building the further website way too easy. meticulously decide upon each feature you add.

For any doubts related to the task or the submission process, you can always ping us on discord. Use the tag @techterra to notify the mentors. We will be happy to help.

Short Task 1(UX)

OPEN TO ALL No need to claim this issue NO SUBMISSION WILL BE ACCEPTED AFTER 15th December 05:00 PM

While you are working on the best user flow for the TechTerra website, here is another short task to test your thinking 🤔 as User Experience Designer!.

The task is brief and doesn't take much time, but what it actually requires is a strong eye for seeing things from the perspective of the user.

Everything in this world happens for a reason, and the below shown websites also appears a certain way for a variety of reasons to provide users with a better experience and ease of use.

The only thing you need to do is write down your ideas on why these pages are designed the way it is and why everything is situated in the locations that it is 😂.

If you are confident enough you can even suggest changes in the layout or any other aspect of the pages which might lead to better user experience than it currently offers.

Happy UXing contributors!

Submission Guideline:

  • Write your views on google doc.
  • Provide the link of google docs in a .txt file. Make sure that the link is accessible (and not private).
  • Submit your txt files in the 'Task 1' folder only.

Minimum Design Criteria (MDC)

Atleast suggest two features of the pages and how they contribute to good user experience and how the experience would have been worse if these features would have been implemented differently. You can also suggest two changes if that is what you prefer.

Features need not be very significant functions of the homescreen, they can be as simple as why the first thing on the screen is ‘Good evening’ or ‘Good morning’ .🤣

Untitled (2)
Untitled (1)
Untitled

Login/Signup Design

OPEN TO ALL.

NO need to claim this issue.

NO submission will be accepted after 26th December, 11:59 PM.

Your next Task is to design the Login/Signup page of the Website TechTerra. This is a 🌟20 points task.

TechTerra as the name suggests is a platform designed for the IIITA community, offering a dynamic space for students, faculty, alumni and recruiters alike. At TechTerra, students have the opportunity to showcase their skills, projects, and achievements, creating a comprehensive portfolio that resonates with potential employers and collaborators. Through detailed student profiles, alumni and recruiters can easily connect with individuals whose skills align with their organizational needs, fostering a bridge between academia and industry. Going beyond traditional academic boundaries, TechTerra hosts innovation challenges and hackathons organized by IIITA, providing students with opportunities to apply their skills in real-world scenarios. These events also serve as a platform for companies to discover emerging talent and groundbreaking solutions.

The task needs to be done on Figma. Figma is free to use and doesn't need to download. It is very easy to learn and hardly takes 20 minutes to learn. If you are unclear on how to use it, check the tutorial here: https://www.youtube.com/watch?v=jk1T0CdLxwU&t=784s

Procedure:

  1. Your task is to decide on the Login/Signup page of the website.
  2. Keep in mind the key functionality of the website as the key functionalities must be fulfilled by the Hero Section itself the user should not feel the need to scroll down for major actions.
  3. Finally, create your ideal Login/Signup page on a Figma file and provide its link (in a .txt file). Submit your txt files in the Login/Signup Design folder only.

✨PRO-TIP: Designing any piece of UI requires the following basic steps: firstly research similar websites (note down the key elements the placement and the arrangement) and get familiar with it, secondly the wire-frame (deciding where to place which element and what all has to be placed on the page) of the page must be done, thirdly the visual design must be given (deciding the color scheme, the font styles, weight and size, the graphics on the page) and implementing the visual design, and finally some basic touch-ups!!

MDC (Minimum Design Criteria):

The page of the website should look like a Login/Signup page. The page should feature a clean and simple design, with prominent call-to-action buttons that use contrasting colors to draw attention. User-friendly forms, with clear labels and logical grouping of information, contribute to a seamless experience. Password strength indicators and robust error handling mechanisms enhance security and usability .

✨PRO-TIP: You must search Figma Mirror on google and then select our frame on Figma and you would be able to see how your website would look on the screen. Take references of sizes and spacing from there. Make sure you maintain consistency in your design.

For any doubts related to the task or the submission process, you can always ping us on discord. We will be happy to help!!

Short Task-Design Rep

OPEN TO ALL

No submission will be accepted after 23rd Dec 5:59 PM.

In the first rep, you have to replicate the screen shown below of Shoe selling App 👟

Untitled (2)

Submission Guideline:

  • Copy the below given image and place it in your Figma file and replicate it in a separate frame of size depending on your laptop.🧑‍💻
  • Only the images can be different, rest all needs to be pixel perfect and CREATED by hand i.e. all the icons, all the shapes, the text should be recreated. For images, you can use https://unsplash.com/ and for icons you can use Iconify Plugin in figma or https://thenounproject.com/
  • You can use the random written content, no need to type the exact content, but it should feel original.✅
  • Submit the link to Figma file containing the screenshot and the recreated screen in .txt file and place the folder in "Design Reps" Folder only.

Minimum Design Criteria (MDC)

No changes will be suggested. Only single submission is allowed that will either be accepted or rejected depending on the accuracy of replication. Final decision resides with the mentors, no claim can be made on their decision

Hackathon Card Design

OPEN TO ALL!!.

NO need to claim this issue.

NO submission will be accepted after 1st January, 11:59 PM.

Your next Task is to design the hackathons Section of the Website TechTerra. This is a 🌟30 points task.

This page of the website TechTerra is dedicated to all the hackathons organized in IIIT Allahabad. This page contains three sections - ongoing hackathons, upcoming hackathons and past hackathons. You just design one section….as the rest two sections will be same as the first.

The hackathons card of a particular hackathon should explain the major and most important things about that hackathon like time, date, theme, name, number of participants, organized by whom, etc etc.

I have attached the basic wireframe of the page below:

card

💡The task needs to be done on Figma. Figma is free to use and doesn't need to download. It is very easy to learn and hardly takes 20 minutes to learn. If you are unclear on how to use it, check the tutorial here: https://www.youtube.com/watch?v=jk1T0CdLxwU&t=784s

Procedure:

  1. Your task is to decide on the Hackathon Section of the website. It is a different page of the website TechTerra.
  2. Finally, create your ideal section on a Figma file and provide its link (in a .txt file). Submit your txt files in the Hackathon Card Design folder only.

✨PRO-TIP: Designing any piece of UI requires the following basic steps: firstly research similar websites’ footer sections (note down the key elements the placement and the arrangement) and get familiar with footer sections, secondly the wire-frame (deciding where to place which element and what all has to be placed on the page) of the home page must be done, thirdly the visual design must be given (deciding the color scheme, the font styles, weight and size, the graphics on the page) and implementing the visual design, and finally some basic touch-ups!!

MDC (Minimum Design Criteria):

The wireframe provided is just a basic layout of the page…you need to be creative and design the page accordingly as only good designs will be merged….Also as it is a 30 points task design the page accordingly so that it looks good and attractive.

✨PRO-TIP: You must search Figma Mirror on google and then select our frame on Figma and you would be able to see how your website would look on the screen. Take references of sizes and spacing from there. Make sure you maintain consistency in your design.

For any doubts related to the task or the submission process, you can always ping us on discord. We will be happy to help!!🚀🚀

Footer Design

OPEN TO ALL.

NO need to claim this issue.

NO submission will be accepted after 29th December, 11:59 PM.

Your next Task is to design the Footer Section of the Website TechTerra. This is a 🌟15 points task.

TechTerra🧑‍💻 as the name suggests is a platform designed for the IIITA community, offering a dynamic space for students, faculty, alumni and recruiters alike. At TechTerra, students have the opportunity to showcase their skills, projects, and achievements, creating a comprehensive portfolio that resonates with potential employers and collaborators. Through detailed student profiles, alumni and recruiters can easily connect with individuals whose skills align with their organizational needs, fostering a bridge between academia and industry. Going beyond traditional academic boundaries, TechTerra hosts innovation challenges and hackathons organized by IIITA, providing students with opportunities to apply their skills in real-world scenarios. These events also serve as a platform for companies to discover emerging talent and groundbreaking solutions

💡The task needs to be done on Figma. Figma is free to use and doesn't need to download. It is very easy to learn and hardly takes 20 minutes to learn. If you are unclear on how to use it, check the tutorial here: https://www.youtube.com/watch?v=jk1T0CdLxwU&t=784s

Procedure:

  1. Your task is to decide on the Footer Section of the website. It is essentially nothing but the landing page of a website. Whenever a user reaches the end of the home page or any page for that matter he/she ends up seeing the footer of the website.
  2. You have to design the Footer of the website.
  3. Remember that this is the section that lets the user know about the organization of TechTerra, copywriting of the website, social media handles of the organization, etc.
  4. Finally, create your ideal footer section on a Figma file and provide its link (in a .txt file). Submit your txt files in the Footer Design folder only.

✨PRO-TIP: Designing any piece of UI requires the following basic steps: firstly research similar websites’ footer sections (note down the key elements the placement and the arrangement) and get familiar with footer sections, secondly the wire-frame (deciding where to place which element and what all has to be placed on the page) of the home page must be done, thirdly the visual design must be given (deciding the color scheme, the font styles, weight and size, the graphics on the page) and implementing the visual design, and finally some basic touch-ups!!

MDC (Minimum Design Criteria):

The Footer Section of the website should look like a footer section. It must have the logo(which you have already made), the organization of the website, the copywriting, the social media handles, etc. Remember that the same theme is followed in making the footer the theme used on the home page. Make sure the footer looks good and just as the footers look on general websites. Try to keep the options on the footer quite minimal. Only good designs will be merged.

✨PRO-TIP: You must search Figma Mirror on google and then select our frame on Figma and you would be able to see how your website would look on the screen. Take references of sizes and spacing from there. Make sure you maintain consistency in your design.

For any doubts related to the task or the submission process, you can always ping us on discord. We will be happy to help!!🚀🚀

APK T-shirt Design

OPEN TO ALL.

NO need to claim this issue.

NO submission will be accepted after 26th December, 11:59 PM.

Your next Small Side Task is designing the Aparoksha fest merch, the technical fest of IIITA . This is a 20 points task.

The task needs to be done on Figma. You would require knowledge of Mock-up for this task, So here is the link to an easy tutorial on mock-up: https://www.youtube.com/watch?v=aSEkEvymFMw.

IMP Announcement

If a design is found to be extraordinarily great, then that merch will be declared as the official merch of APK’24. And the designer of that merch will get his/her designed merch for free as a prize . So, make sure you participate and try designing the best merch possible as you might get your own designed merch for free! Though this is valid only if the merch is amazingly great and is selected as the official merch, But it is not necessary that out of all the submission we find the best match. So, all the decent designs will be merged and given 20 points each.

Procedure:

  1. Firstly you must browse through and carefully research t-shirt designs on the web.
  2. You first have to make a graphic design that appropriately describes APK. Use graphics related to github, use slogans, use catchy phrases.
  3. Now using the mockup video link given above make a mockup for a t-shirt. Remember that the design has to be implemented only on a T-Shirt and not on a hoodie or something else.
  4. Do the task in a Figma file and provide its link (in a .txt file). Submit your txt files in the APK T-shirt Design folder only.

✨PRO-TIP: A good use of font styles, graphics, and placement plays a crucial role in a good merch design. Use the DaFont website to get good and appropriate font styles.

MDC (Minimum Design Criteria):

Make sure that the T-shirt looks like a t-shirt, Remember that only a T-shirt has to be designed. The design must be unique and your own creativity do not copy designs from other t-shirts, though you can take references and ideas for sure. Make sure you place the Aparoksha Logo on the t-shirt. Use your creativity at its best, and for that do intensive research on the web to get amazing ideas.

✨PRO-TIP: First make the entire design that you want to impose on the t-shirt and then impose it don't try pacing each and every element when they are made. First make all the elements and then place them.

Fun Task- Play the Game

OPEN TO ALL

No need to claim this issue.

NO SUBMISSION WILL BE ACCEPTED AFTER 29th December 11:59 PM.

For this task you just have to play the game named ‘Can’t Unsee’. The task is for 20 points. This game will improve your understanding of UI/UX. Submit the screenshot in the FUN Task folder only ALSO kindly attach the screenshot in the PR comment as well under the issue number!.

Link to the game-https://cantunsee.space/

MDC (Minimum Design Criteria):

For other players:

You have to play this game at least up to the medium level. At least complete the entire medium level and bag 4000 points minimum and then upload a screenshot of the same in the PR you make. If you have bagged less than 4000 points then play the game again and then submit the ss as PRs with less than 4000 points won't be merged.

🌟Make sure you upload the screenshot of the whole screen (with your task bar, time, google account etc visible in the ss) !!

🌟If any type of plagiarism is found….50 points of that participant will be deducted from the leaderboard.

Portfolio design

OPEN TO ALL.

NO need to claim this issue.

NO submission will be accepted after 8th January, 11:59 PM.

Your next Task is to design the PORTFOLIO PAGE of the Website TechTerra🧑‍💻. This is a 🌟50 points(MAX) task. Partial points well be awarded according to the work that you have done.

This is a new page of the our website TechTerra and one of the 🚀most important pages. The portfolio page should contain all the necessary information about the user like the profile photo, bio, experience, skills, projects, hackathons, education, important links, contacts, prizes etc etc…you may imagine it like a mini linkedIn for info. You may even add a section where the person can add his resume pdf. 💡THINK ACCORDINGLY BEFORE IMPLEMENTING!!

💡The task needs to be done on Figma. Figma is free to use and doesn't need to download. It is very easy to learn and hardly takes 20 minutes to learn. If you are unclear on how to use it, check the tutorial here: https://www.youtube.com/watch?v=jk1T0CdLxwU&t=784s

Procedure:

  1. Your task is to design the Portfolio page for TechTerra.
  2. Make sure that the theme/color scheme of the website that you have made and the color scheme are maintained.
  3. Finally, create your ideal section on a Figma file and provide its link (in a .txt file). Submit your txt files in the Portfolio design folder only.

✨PRO-TIP: Designing any piece of UI requires the following basic steps: firstly research similar websites’ offer/sale sections (note down the key elements the placement and the arrangement) and get familiar with those sections, secondly the wire-frame (deciding where to place which element and what all has to be placed on the page) of the home page must be done, thirdly the visual design must be given (deciding the color scheme, the font styles, weight and size, the graphics on the page) and implementing the visual design, and finally some basic touch-ups!!

MDC (Minimum Design Criteria):

Besides containing all the important info about the user the portfolio section should be a good piece of UI/UX design as well….you can take inspiration from various portfolio websites designs available on internet and then implement it in your own way…take sure the design is decent but attractive.

✨PRO-TIP: You must search Figma Mirror on google and then select our frame on Figma and you will be able to see how your website would look on the screen. Take references of sizes and spacing from there. Make sure you maintain consistency in your design.

You can always ping us on discord for any doubts related to the task or the submission process. We will be happy to help!!

Short Task-Pen Tool

OPEN TO ALL !

No need to claim this issue NO SUBMISSION WILL BE ACCEPTED AFTER 18st December 10:00 P.M.

Now it’s time to learn the pen tool, one of the most commonly used tools to make vectors.

⭐In this task, you are supposed to copy the given vector in Illustrator or Figma using the pen tool and submit the Illustrator file (.ai file) or a text file with a Figma link.

💡 This task can be done in Adobe Illustrator or Figma.

Submission Guideline:

  • Submit the illustrator file in the "Task-2" Folder only.
  • submit the link of the figma file/ illustrator file in a .txt file only.

This task is for 🏆20 points.

MDC (Minimum Design Criteria):

💡In this task you can only submit one PR once submitted you wont get chance to edit. The vector which you are going to copy should look like the vector given.

For any doubts related to the task or the submission process you can always ping us on discord. We will be happy to help.

photo

FINAL TASK🚀

This task is for 50 points. The deadline is till 12th Jan 10:00 PM

You just have to Assemble the entire website, TechTerra.

The website TechTerra will consists of 5 pages, so the nav bar will have ⭐5 sections- Home, Portfolio, Builder, Blogs, Hackathons.

  1. Page 1-Home page: first place the nav bar with the logo you designed, then the hero section, below that place the login and signup page, then place the testimonials section and finally place the footer.
  2. Page 2-Portfolio: first the nav bar then place the complete portfolio section and finally the footer.
  3. Page 3-Builders: first place the nav bar + the leaderboard you designed + the top projects section + finally the footer.
  4. Page 4-Blogs: nav bar+ complete bog section + footer
  5. Page 5-Hackathons section: nav bar + open hackathons section + upcoming hackathons section + past hackathons section + finally the footer section.

💡If you haven't made any of the sections previously make it now for this task.

🌟You may make some changes in your previously submitted designs in order to make the final look of the website good and attractive.

Submit the properly assembled pages(5 in number) of TechTerra, create your ideal website design on a Figma file and provide its link (in a .txt file). Submit your txt files in the  Final Task folder only.

Talking to Aliens👽

OPEN FOR ALL !

No need to claim. No submission will be considered after 4th Jan 11.59pm.

Imagine aliens👽 have landed on Earth and want to learn about the company - Amul . But since they don’t speak your language, it needs to be explained with five symbols (like icons) or vectors. Each participant makes or gathers five simple vectors to communicate with the aliens.

Procedure:

  1. Design 5 vectors (or use icons) that will help the alien understand about Amul.
  2. Add the 5 vectors or icons on your figma file.
  3. Place the figma link in a .txt folder and submit the file in ‘Talking to Aliens’ folder ONLY.

Minimum Design Criteria (MDC):

No changes will be suggested. Only single submission is allowed that will either be accepted or rejected depending on the accuracy of replication. Final decision resides with the mentors, no claim can be made on their decision.

Leaderboard Design

OPEN TO ALL.

NO need to claim this issue.

NO submission will be accepted after 5th January, 11:59 PM.

Your next Task is to design the Leaderboard Section of the Website TechTerra. This is a 🌟30 points task.

This is a new page for the website TechTerra which will display the Leaderboard. The leaderboard is made to maintain a ranking system between all the students registered on TechTerra. The Leaderboard should also display the number of hackathons, projects and prizes won by a student along its name . The Leaderboard can be sorted by- most hackathons attended, most projects submitted and most prizes won.

After making the Leaderboard section….. make a section which displays the top 5 projects among all the projects submitted by the students on TechTerra.

💡The task needs to be done on Figma. Figma is free to use and doesn't need to download. It is very easy to learn and hardly takes 20 minutes to learn. If you are unclear on how to use it, check the tutorial here: https://www.youtube.com/watch?v=jk1T0CdLxwU&t=784s

Procedure:

  1. Your task is to design the Leaderboard section for TechTerra.
  2. Make sure that the theme/color scheme of the website that you have made and the color scheme are maintained.
  3. Finally, create your ideal section on a Figma file and provide its link (in a .txt file). Submit your txt files in the Leaderboard design folder only.

✨PRO-TIP: Designing any piece of UI requires the following basic steps: firstly research similar websites’ offer/sale sections (note down the key elements the placement and the arrangement) and get familiar with those sections, secondly the wire-frame (deciding where to place which element and what all has to be placed on the page) of the home page must be done, thirdly the visual design must be given (deciding the color scheme, the font styles, weight and size, the graphics on the page) and implementing the visual design, and finally some basic touch-ups!!

MDC (Minimum Design Criteria):

The Leaderboard section should look decent and creative. You can always take inspiration from net and then implement it in your own way. You can go through the Leaderboard sections of various websites and then design one. And follow the color scheme and theme of the website.

✨PRO-TIP: You must search Figma Mirror on google and then select our frame on Figma and you will be able to see how your website would look on the screen. Take references of sizes and spacing from there. Make sure you maintain consistency in your design.

You can always ping us on discord for any doubts related to the task or the submission process. We will be happy to help!!

Testimonials Section Design

This is a COMPETETIVE ISSUE. ⭐ The top 3 PRs will be given points

  1. 1st prize- 30 points
  2. 2nd prize- 20 points
  3. 3rd prize- 10 points

No need to claim this issue.

NO SUBMISSION WILL BE ACCEPTED AFTER 1th January 11:59.

After building the hero section and footer section of the home page now it’s time to add content sections to your website TechTerra, For this task, you have to design the testimonials section for the home page of the website.

TechTerra as the name suggests is a platform designed for the IIITA community, offering a dynamic space for students, faculty, alumni and recruiters alike. At TechTerra, students have the opportunity to showcase their skills, projects, and achievements, creating a comprehensive portfolio that resonates with potential employers and collaborators. Through detailed student profiles, alumni and recruiters can easily connect with individuals whose skills align with their organizational needs, fostering a bridge between academia and industry. Going beyond traditional academic boundaries, TechTerra hosts innovation challenges and hackathons organized by IIITA, providing students with opportunities to apply their skills in real-world scenarios. These events also serve as a platform for companies to discover emerging talent and groundbreaking solutions.

The task needs to be done on Figma. Figma is free to use and doesn't need to download. It is very easy to learn and hardly takes 20 minutes to learn. If you are unclear on how to use it, check the tutorial here: https://www.youtube.com/watch?v=jk1T0CdLxwU&t=784s

Procedure:

  1. Your task is to design the testimonials section for the home page of TechTerra.
  2. Make sure that the theme/color scheme of the website that you have made and the color scheme are maintained.
  3. Finally, create your ideal testimonials section on a Figma file and provide its link (in a .txt file). Submit your txt files in the Testimonials design folder only.

✨PRO-TIP: Designing any piece of UI requires the following basic steps: firstly research similar websites’ offer/sale sections (note down the key elements the placement and the arrangement) and get familiar with those sections, secondly the wire-frame (deciding where to place which element and what all has to be placed on the page) of the home page must be done, thirdly the visual design must be given (deciding the color scheme, the font styles, weight and size, the graphics on the page) and implementing the visual design, and finally some basic touch-ups!!

MDC (Minimum Design Criteria):

The testimonials section must look like a testimonials section…It is nothing but what users, say about the website in double-quotes. You can go through the testimonial sections of various websites and then design one. And follow the color scheme and theme of the website.

✨PRO-TIP: You must search Figma Mirror on google and then select our frame on Figma and you will be able to see how your website would look on the screen. Take references of sizes and spacing from there. Make sure you maintain consistency in your design.

You can always ping us on discord for any doubts related to the task or the submission process. We will be happy to help!!

Task 2-LOGO Design

This is a COMPETETIVE ISSUE. ⭐ The top 3 logos will only be given points

  1. 1st prize- 30 points
  2. 2nd prize- 20 points
  3. 3rd prize- 10 points

No need to claim this issue.

NO SUBMISSION WILL BE ACCEPTED AFTER 19th December 11:59 PM.

After getting your hands on Figma, now its time to enter in the world of graphic design. In this task, you must design a LOGO for the TechTerra Website🧑‍💻.

This task can be done in Adobe Illustrator or Figma.

If you are unclear with how to start, you can check out these articles:

  1. https://www.ebaqdesign.com/blog/logo-design-process
  2. https://99designs.com/blog/tips/logo-design-process-how-professionals-do-it/

or check out this playlist:

https://www.youtube.com/watch?v=NfkQeOSmIMY&list=PLW-zSkCnZ-gDer-VZlBbe1f9-G0zNYdtg

Submission Guidelines:

For Submission, you would have to Upload the illustrator file( if doing in illustrator ) or a .txt file (with figma link in it) and make sure to keep the file in the "Task 2” folder only.

Any plagiarism will not be supported. You can take inspiration, but the idea must be unique.

Name of your illustrator file/ text file should be your GitHub username

MDC (Minimum Design Criteria):

The design must be suitable, constant, and tidy. Keep in mind that the logo ought to be straightforward, versatile, timeless, memorable, and scalable. It should in the simplest and most powerful way describe TechTerra as a whole.

For any doubts related to the task or the submission process you can always ping us on discord. We will be happy to help.

✨PRO-TIP: Make a LOGO that suits the color scheme and theme of your website what you feel you would be designing in the future.

Glass Effect Task

OPEN TO ALL. No need to claim this issue. NO SUBMISSION WILL BE ACCEPTED AFTER 12th January 5:00 PM.

Your task is to replicate this glass effect shown below on Figma. If you would like to use the same picture, I have attached it below.

Untitled (4)

image

Hint

Use the noise plugin on figma to replicate this glass effect. You also have to apply multiple linear gradients on the rectangle.

https://www.figma.com/community/plugin/752558325552095625/Noise

Submission Guideline

Submit the link to figma file containing the screenshot as well as the recreated screen in a .txt file and place the file in ‘Glass Effect’ folder only.

MDC (Minimum Design Criteria)

It should look very similar to the effect shown above. You can ping me on discord for any help.

Short Task- Gradient effect

OPEN TO ALL !

No need to claim this issue NO SUBMISSION WILL BE ACCEPTED AFTER 18st December 10 P.M.

This is an extension of the pen tool task given- you have to exactly copy the gradient effect shown in the figure !!

💡This Task can be done only after you have completed the Pen Tool Task..

⭐In this task, you are supposed to copy the given vector in Illustrator or Figma using the pen tool and exactly copy the gradient effect shown and submit the Illustrator file (.ai file) or a text file with a Figma link.

Make sure that you use the color dropper tool to get the perfect shade of the color

💡 This task can be done in Adobe Illustrator or Figma.

Submission Guideline:

  • Submit the illustrator file in the "Task-2" Folder only.
  • submit the link of the figma file/ illustrator file in a .txt file only.

This task is for 🏆15 points.

MDC (Minimum Design Criteria):

💡In this task you can only submit one PR once submitted you wont get chance to edit. The vector which you are going to copy should look like the vector given.

For any doubts related to the task or the submission process you can always ping us on discord. We will be happy to help.

photo

Short Task 2

OPEN TO ALL No need to claim this issue NO SUBMISSION WILL BE ACCEPTED AFTER 15th December 10 PM

While you are working on the best user flow for the TechTerra website, here is another short task to test your thinking 🤔 as User Experience Designer!.

It is a very basic Task! 😊😊 You just need to write 3 UI/UX Laws with explanation that you feel are important on a google doc.

  • Provide the link of google docs in a .txt file. Make sure that the link is accessible (and not private).
  • Submit your txt files in the 'Short Task 2' folder only.

Happy UXing contributors!

Blogs Section Design

OPEN TO ALL.

NO need to claim this issue.

NO submission will be accepted after 5th January, 11:59 PM.

Your next Task is to design the BLOGS Section of the Website TechTerra. This is a 🌟20 points task.

This is a new page for the website TechTerra which will display all the blogs written by the students of IIIT Allahabad. For example- There are various blogs that are posted on the website ‘Medium’ by Geekhaven, these blogs are written by IIITA students only (You can also check these blogs on the Geekhaven insta page). This page is dedicated to all these blogs and more.

💡The task needs to be done on Figma. Figma is free to use and doesn't need to download. It is very easy to learn and hardly takes 20 minutes to learn. If you are unclear on how to use it, check the tutorial here: https://www.youtube.com/watch?v=jk1T0CdLxwU&t=784s

Procedure:

  1. Your task is to design the blogs section for TechTerra.
  2. Make sure that the theme/color scheme of the website that you have made and the color scheme are maintained.
  3. Finally, create your ideal section on a Figma file and provide its link (in a .txt file). Submit your txt files in the Blogs section design folder only.

✨PRO-TIP: Designing any piece of UI requires the following basic steps: firstly research similar websites’ offer/sale sections (note down the key elements the placement and the arrangement) and get familiar with those sections, secondly the wire-frame (deciding where to place which element and what all has to be placed on the page) of the home page must be done, thirdly the visual design must be given (deciding the color scheme, the font styles, weight and size, the graphics on the page) and implementing the visual design, and finally some basic touch-ups!!

MDC (Minimum Design Criteria):

The Blogs section should look decent and creative. You can always take inspiration from net and then implement it in your own way. You can go through the Blogs sections of various websites and then design one. And follow the color scheme and theme of the website.

✨PRO-TIP: You must search Figma Mirror on google and then select our frame on Figma and you will be able to see how your website would look on the screen. Take references of sizes and spacing from there. Make sure you maintain consistency in your design.

You can always ping us on discord for any doubts related to the task or the submission process. We will be happy to help!!

Hero Section Design

OPEN TO ALL.

NO need to claim this issue.

NO submission will be accepted after 23rd December, 11:59 PM.

Your next Task is to design the Hero Section of the Website TechTerra. This is a 🌟20 points task.

TechTerra as the name suggests is a platform designed for the IIITA community, offering a dynamic space for students, faculty, alumni and recruiters alike. At TechTerra, students have the opportunity to showcase their skills, projects, and achievements, creating a comprehensive portfolio that resonates with potential employers and collaborators. Through detailed student profiles, alumni and recruiters can easily connect with individuals whose skills align with their organizational needs, fostering a bridge between academia and industry. Going beyond traditional academic boundaries, TechTerra hosts innovation challenges and hackathons organized by IIITA, providing students with opportunities to apply their skills in real-world scenarios. These events also serve as a platform for companies to discover emerging talent and groundbreaking solutions.

The task needs to be done on Figma. Figma is free to use and doesn't need to download. It is very easy to learn and hardly takes 20 minutes to learn. If you are unclear on how to use it, check the tutorial here: https://www.youtube.com/watch?v=jk1T0CdLxwU&t=784s

For those who don’t know what hero section of a website is and how should a hero section look like, Pls refer to this video, it will surely give you a brief about it:

link 1: https://www.youtube.com/watch?v=KUgGLJxxghY

link 2: https://www.youtube.com/watch?v=LJbkLdtEW00&t=252s

Procedure:

  1. Your task is to decide on the Hero Section of the website. It is essentially nothing but the landing page of a website. Whenever a user (maybe visited for the first time, maybe keeps on visiting), clicks on the link of the website the first screen that appears is the Home Page.
  2. You have to design the Hero Section of the home page.
  3. Remember, the user has not yet signed in or might not have registered this is just the screen that comes up once the user clicks on the link of the website!
  4. Keep in mind the key functionality of the website as the key functionalities must be fulfilled by the Hero Section itself the user should not feel the need to scroll down for major actions.
  5. Finally, create your ideal Home page on a Figma file and provide its link (in a .txt file). Submit your txt files in the Hero Section Design folder only.

✨PRO-TIP: Designing any piece of UI requires the following basic steps: firstly research similar websites’ hero sections (note down the key elements the placement and the arrangement) and get familiar with hero sections, secondly the wire-frame (deciding where to place which element and what all has to be placed on the page) of the home page must be done, thirdly the visual design must be given (deciding the color scheme, the font styles, weight and size, the graphics on the page) and implementing the visual design, and finally some basic touch-ups!!

MDC (Minimum Design Criteria):

The home page of the website should look like a home page. It must have the logo(which you can select from the net for the time being), the call to action buttons, etc. Make the Hero Section as appealing as possible coz that's when users would want to continue on the website further.

✨PRO-TIP: You must search Figma Mirror on google and then select our frame on Figma and you would be able to see how your website would look on the screen. Take references of sizes and spacing from there. Make sure you maintain consistency in your design.

✨PRO-TIP: Refer to the above 2 links on hero sections! They will give you a hell lot of ideas about Hero Sections and their designs.

For any doubts related to the task or the submission process, you can always ping us on discord. We will be happy to help!!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.