Phase 3: Design

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.


    As future managers or entrepreneurs working on projects where digital technologies are increasingly present, you will need to be able to communicate these concepts both to investors or customers to convince them of your project, but also to designers, engineers, developers, … to guide them in the choices they will have to make to best implement your idea.

    During this phase, you will have to create 2 web pages to communicate as much information as possible about this project: a landing page and a documentation page.


    Landing Page

    Your landing page should present your project as clearly and simply as possible. This page must answer the questions what? for whom? why? how? in order to incite the customer to use this product or service.

    This is the first element that allows you to seduce your target audience. Therefore, this page needs a real emphasis on its design. You will need to use HTML and CSS to create simple yet intersting ways to display informations (you may need to review "HTML - Structuring the Web" and "CSS - Styling the Web" modules from Part 1). You can also use all the resources from the "Design Resources" module in Part 1, strong or strong to create standout graphics content (both are installed on all makers' lab workstations), as well as Unsplash for high quality free photos and The Noun Project to find icons for everything, …

    Your landing page should integrate different elements of your project definition like the explanation of the service and its target, as well as pictures or videos of simulations of your users using your mockup.

    Read What makes a great landing page? to get a deeper understanding of which informations your landing page should provide.

    examples of landing pages

    Some examples of landing pages:
    RunWay, this example is particularly relevant despite its simplicity, the page presents the different features, who it is intended for, etc… In the same way, products cannot be tested via the web but their pages present all the useful information to the customer (see Zortrax inkspire or Movie Mask )
    Or once again the landing pages of Uber or Airbnb which make it possible to clearly understand what they offer (you can display fake elements in your page that are not interactive but helpful for understanding your service).

    Have a look at Behance and Dribbble for landing pages inspiration.

    In addition to meaning a functional prototype, the term "mockup" also refers to the integration of your product or service into its operating environment. Also, services such as smartmockups or mockup generator allow you to easily generate visuals that integrate your projects. (See here for more.)


    Documentation

    This page serves as a communication tool for potential developers, designers, … it must show the thought process that led you to this concept.

    Your documentation page must integrate the links to your individual explorations, project definitions, user tests, wireframes and mockups.

    In addition, it should include elements allowing the technical implementation of the project if it were to be entrusted to a team, for example:
    - links to references (projects/tutorials/videos) and explain how they are relevant to the project
    - links to the different tools/technologies needed and explain how they are relevant to the project
    - how could the project be developed to grow further.

    examples of documentation pages

    Your documentation does not need to be as appealing as your homepage, yet it needs to be graphically linked to your homepage (same fonts/colors/styles for titles/…) and structured in a meaningful way.


    Resources and going further

    Here are a few great examples from what other students made. Get inspired!

    Remember that there is a lot of resources available to help you shape your pages:

    You have at your disposal a blank Glitch project to remix and share with your group and tutor (see Phase 1 if you need to remember how to share), including 4 files:

    • index.html for the content of your homepage
    • index.css to style your homepage
    • doc.html for the content of your documentation
    • doc.css file to style your documentation

    You have to modify them as you wish, include images, videos, typographies… you may also add other pages if needed.

    Before coding your pages using Glitch, you should start by gathering all the elements you want to put on your pages (texts/images/media/links/…), then quickly organize them on paper or with Figma, and finally switch to HTML and CSS, this process will make it much easier to build your pages.

    Your landing page and documentation have to be on the same Glitch project.

    The minimum technical requirement for this course is that you manipulate HTML and CSS languages, therefore you cannot use templates and it is strictly forbidden to use services such as Wix or Spark to generate your HTML pages. Projects created with this type of service will not be validated.


    Evaluation criteria

    Homepage: 9 points

    • Context, target & service definition
    • Relevance of product illustrations
    • Made for the target
    • UI - visual hierarchy
    • UI - graphic design
    • UX - structure & navigation
    • Quality of HTML
    • Quality of CSS
    • Use of resources

    Documentation page: 9 points

    • Clear presentation
    • Made for collaborators
    • Reusing week 1 and 2 elements
    • UI - visual hierarchy
    • UI - graphic design
    • UX - structure & navigation
    • Quality of HTML
    • Quality of CSS
    • Use of resources

    Communication: 2 points

    • Spelling and writing
    • Communication with the tutor
    • Preparation of the meeting

    Submissions

    Submit the links to your landing page and documentation page at least 24 hours before your next meeting, 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

    Before submitting, make sure you check all of the criteria below.

    Documentation

    Before submitting, make sure you check all of the criteria below.

    The due date has expired. You can no longer submit your work.