Join Sue Jenkins for an in-depth discussion in this video Rough out a digital sketch, part of Web Design: Efficient Workflow.
- A rough digital sketch is my first step…in designing a digital web mockup,…and it sure takes the sting…out of staring at a blank canvas.…The main goal here is to block out regions…for the page content, based on the wireframe…and/or paper sketch.…In my own workflow, I use Photoshop…and nearly always begin with a homepage mockup…because it sets the tone for the rest of the site…and contains persistent regions like the header,…navigation, footer, and calls to action.…That's what I'll do here for the Nadia's Garden project.…
Since I'll be building the site with Bootstrap,…my Photoshop file will need to be 1170 pixels wide…by 2580 pixels tall.…The height can be adjusted as needed…later on in the design process.…I also like to place a copy of the wireframe into the file…and use it as a reference for adding the various regions.…To place the file, I'll go up to File…and choose Place Embedded.…
Then, navigate to the file that I'm looking for,…click Place, and then, hit enter or return…on my keyboard to accept the placement of that file.…
This course is designed to help boost the abilities of web designers and graphic designers, improving productivity and creativity. Sue shows you how to broaden your workflow while keeping the process efficient and focused. The tips she provides are applicable whether you are starting from nothing, redesigning layout ideas received from a client, or creating a mockup from a wireframe in coordination with UX teams.
- UX and wireframing
- Capturing the essence of a business
- Designing the mockup
- Fine-tuning the layout
- Making final revisions