Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Prototyping in the Browser

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Why Prototype in a Browser?

2:59 with Nick Pettit

When you work with real HTML and CSS, and you're able to see your site on a real screens, you're able to see a more accurate representation of the final result. In this course, we're going to start with a wireframe for a profile page on a new social network for designers. We'll create a HTML and CSS prototype using the Bootstrap web framework. That way, we'll have an actual web page we can preview and interact with in a web browser.

Resources

  • Bootstrap - If you haven't already, take some time to browse the Bootstrap website and the documentation.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [SOUND] Before you design a website, 0:00
    it's important to have some kind of a plan or 0:03
    a wire frame to guide your efforts. 0:08
    Depending on the size of the team, 0:12
    creating the backend of a website can involve other team members, developers, 0:13
    database engineers, system administrators, and more. 0:18
    And, if you're doing it by yourself, it can be a lot of your time. 0:21
    Changing things later in the process is more expensive, but plans, 0:26
    and prototypes, are easy to change. 0:30
    But, sometimes, when you go from a simple sketch to digital pixels, 0:33
    the results aren't exactly what you expect. 0:38
    Elements that you created on paper, or in a wire framing app might not be properly 0:41
    proportioned, or they may not quite look right at different responsive sizes. 0:46
    To solve this problem, I like to carry the design and 0:52
    prototyping process beyond a wire frame. 0:55
    And continue to make design decisions in a web browser. 0:58
    When you work with real HTML and CSS, and you're able to see your site on a real 1:02
    screen, you're able to see a more accurate representation of the final result. 1:07
    In this course, we're going to start with a wire frame for 1:14
    a profile page on a new social network for designers. 1:17
    We'll create an HTML and CSS prototype using the Bootstrap web framework. 1:22
    That way we'll have an actual web page within preview and 1:28
    interact with a web browser. 1:31
    If you are not familiar with bootstrap, be sure to check the prerequisites for 1:34
    this course and the notes associated with this video so that you can get started. 1:38
    Let's take a look at the wire frame. 1:44
    In the desktop and mobile versions, 1:47
    there's a featured image followed by a profile image, 1:49
    the person's name and location, a bio, a button that says send message. 1:55
    And there's also a gallery of images. 2:01
    There's also a header at the top and a footer down at the bottom. 2:05
    This might look good in a wire frame, but we'll most likely improve on this design 2:10
    after we see a working prototype in a web browser. 2:15
    Once the design is in a web browser, we're at a big advantage, 2:19
    because we've already created lots of the HTML and CSS. 2:23
    Much of that may be reusable when creating the final version 2:28
    of the website using templates and views of a backend. 2:31
    You could incorporate that code into something like a WordPress theme, 2:35
    a Ruby on Rails app. 2:39
    A PHP website, or 2:41
    one of the many other languages used to create websites and web applications. 2:43
    It won't translate perfectly in every case. 2:49
    Often the prototyping work done here is useful later on. 2:51
    Let's turn this wire frame into code. 2:56

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up