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. User Avatar
    eric courville
    Permalink to comment#

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

  2. User Avatar
    Dennis Gaebel
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Hans Meireles
    Permalink to comment#

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

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag