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.
- Bootstrap - If you haven't already, take some time to browse the Bootstrap website and the documentation.
[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