Skip to main content
Home / The Lodge / Building a Mobile-First WordPress-Powered Artists Website / #004 – A Photoshop Canvas

#004 – A Photoshop Canvas

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.

icon-link icon-logo-star icon-search icon-star