Phase 4: Share
Designing with Web
Group
Subject
Your subject is "".
Teammates
Tutor
Your tutor is .
Your appointment is on .
Part 3 Rules Reminder
Click here to review rules
Before the meetings:
-
Know the subject of your appointment.
You must have read the course modules and prepared the questions you wish to discuss with the tutor. -
Know how to locate the progress of your team.
Take the time to formulate the difficulties encountered and the positive points. Don't wait several weeks before reporting problems. -
Organize a meeting.
Except in exceptional cases, find yourself in the same place. A suitable place (quiet) with a good internet connection, for the smooth running of your interview.
During meetings:
-
Your presence is mandatory at all meetings.
Any absence must be justified to your tutor before the meeting in the Slack channel of your group. -
Your camera must be on.
The tutor is there to accompany you synchronously, not to talk to an avatar. -
Behave like a professional.
Adopt an employee posture in a company in all circumstances: holding in front of the camera, appropriate language, listening skills, correct clothing. -
Lead this project in good spirit.
Your participation in the meetings is mandatory and is part of the course. You are not a cruise passenger. Remember to react to the comments made to your group but also to interact with the other groups present.
When the tutor gives the speech, everyone must speak! -
Take advantage of your appointments collectively.
You must divide up the roles: designate as many "scribes" as necessary for each meeting. It is mandatory to write a group interview report and post it in the group channel at the end of the meeting.
Outside of meetings:
-
Collaborate with the tools at your disposal:
-
Slack:
The group communication must be done on Slack in your group channel.
→ If you discuss elsewhere, your tutor cannot accompany you, it is a waste of time, resources and especially advice.
→ Make reports and post them on Slack to get feedback from your tutor.
→ Individual maluses will weight your final score according to your participation.Any student who is not on Slack at the beginning of Part 3 will be graded 0 for Part 3.
Any student who does not participate in the Slack channel of their group will be graded 0 for Part 3.
-
Zoom:
You can use Zoom in group at any time to chat in video and share your screens: type/zoom
in your Slack group channel, a button will appear in the channel to join a Zoom room.When launching a Zoom room for the first time, you will have to validate your account by clicking on the "Authorize Zoom" link, then connect with SSO ("Sign in with SSO").
→ In the field "Your company domain", enter "em-lyon".
→ Finally, authenticate on the emlyon portal.
-
-
Be there for others.
Reactivity towards your tutor and your collaborators on Slack is essential. Put yourself in the shoes of a professional who leads a project as a team. -
Document
You must constantly document what you are doing. Keep as much record as possible of the exchanges and work done so that you can analyze what worked in the project and what didn't.
For next week, you won't have a new assignment. Instead, you're going to finalize your project: take into account all the feedback from your tutors during your last appointment.
Remember that this is the final exercise in this course to show off your communication skills as a future manager or entrepreneur able to convince supervisors, investors and customers, as well as teams of designers, engineers, developers implementing the project.
Your landing page and documentation have to be on the same Glitch project.
They will be evaluated by your Jury in the final step.
Design Tips
In addition to the Part 1/Design Resources module that you should consult again, here is a list of tips for your layouts with Skeleton:
-
Nearly all your elements should be in
div
elements with thecontainer
class, especially your paragraphs of text: Noone reads full width paragraphs. -
Create separations with a few full width elements (not inside
.container
) like images. And remember that you can use a.container
inside a full width element to center a block of text for example (see Part 1/Design Resources). -
Use the
u-full-width
class on all your images to make them fit the width of their parent element. - If you need more Skeleton tutorials, you can consult Building HTML Page Structure With Skeleton or Getting Started with Skeleton. Or if you'd rather watch videos, there are Youtube playlists available like Skeleton CSS Tutorial or Skeleton CSS Boilerplate Tutorial.
-
Use CSS to set nice background image (here elements with the
bg-image
class):.bg-image { background: url(https://images.unsplash.com/photo-1521729839347-131a32f9abcb) no-repeat center center fixed; background-size: cover; }
- Use CSS margin property to add spaces around an element, and padding property to add space inside an element.
- Use FontJoy to generate nice combinations of google fonts for your pages.
- Go easy on colors: mastering colors is hard. Start with black, white and a third color that you can use in small touches.
- Pick inspiration from real websites: Look at Uber's landing page. The styles and layouts are simple and really efficient. This is just an exercise, do not hesitate to reproduce parts of their layout and learn from it.
-
For menus or summaries, it can be useful to create links to a section or a paragraph of the page. We can create a link to an element by using its id: if we want a link to an element with
id="footer"
, we can create a link to this element in our menu with<a href="#footer">Footer</a>
You may also use some of the following resources to improve your designs:
- Emojis - Emojicopy
- Icons - HTML Entities List by TopTal
- Icons - TheNounProject
- Illustrations - Manypixels
- Illustrations - Undraw
- Product Shots - Screely
- Stock Photos - Pexels
- Stock Photos - Unsplash
Evaluation criteria
Homepage /7
- The context, target and service are clear
- The proposal is relevant
- The homepage targets users and/or investors
- Presentation of the mockups is appealing
Documentation /7
- It shows the evolution of the proposal
- The technologies involved are carefully explained
- Directions for the continuation of the project are given
- It targets potential collaborators
UI/UX design /6
- Information structure is clear and easy to follow
- Visual hierarchy helps reading the content
- Navigation is clear and easy to understand
- The graphic design of the website is appealing and modern
- The visual identity of the project is visible and coherent
- Illustrations are relevant and appealing
Submissions
Submit the links to your finalized landing page and documentation page before the final deadline, which is on .
These submissions are shared: your teammates and your tutor will also see what you submit, and you can find them in your Progress Overview.
Sharing a Glitch project
When sharing your Glitch projects, copy the link for the result (not the editor view). Then, simply paste that link in the submission box down below. 👇
Landing Page
Documentation
The due date has expired. You can no longer submit your work.