From the last video, we know we have five major points to consider when starting into the design of this site. We'll keep those at the top of our mind as we move forward.

We're starting "mobile first" of course, and we're going to start figuring out the design in Photoshop. We won't linger there, but the creative tools in Photoshop are great for creative thinking at the start of a design project.

We open up the iOS simulator that comes free with XCode on Mac. It's for testing the web and native apps on a desktop/laptop computer. We just want it quick so we can take a screenshot of it to give us a contextual canvas in Photoshop.

For the record, we aren't starting "iPhone" first, it's just a small screen that's convenient for us to design around. We won't be designing anything that is overly specific to the iPhone's size or capabilities.

To give ourselves a taller canvas to work from (no need to confine the site to above the "fold"), we cut the bottom of the phone off and drag it lower. Then we take a thin slice of the edges of the iPhone and drag them down, so essentially we have this super tall (but complete) iPhone.

We leave a guide in place where the original screen ended to remind us how big it was. Yes, everyone scrolls. Especially on mobile. But it's still nice to know what that first screen looks like.

Comments

  1. eric courville
    Permalink to comment#

    new layer via cut (shift + command/control + j)

  2. Dennis Gaebel
    Permalink to comment#

    That screenshot tool is killer. What’s the name of that fancy thing?

    • Chris Coyier
      Permalink to comment#

      It’s just Command-shift-4 on a Mac. Then you press the space bar to activate it’s “window” mode where you just select a window you want to screenshot.

  3. Hans Meireles
    Permalink to comment#

    Hey man, I dont see a next video button. It would be nice if you had one.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.