: Web Design to Tablet Design Me and my colleague have just completed designing a very complex web interface. However, we need to move on to design the tablet interface. Is there a way for us

@Welton168

What you are trying to achieve is referred to as Responsive Web Design. Usually the developer you will hire to build the app will know how to scale down the design for smaller screen sizes.

Do not scale down the entire design (this will scale down the font-sizes too). First create a new artboard with the same size of the screen you are going to target. Then work with each module (chunks/boxes). If you have worked with a simple 12/16 column grid in the original design this should be very easy to do. You need to have a similar grid for the new artboard and scale down each module to fit the new grid sizes.

For the sake of example.
Say the original design is a 12 column grid.
And you have a feature module which is 3 columns wide.
And you have 4 such features. So you occupy an entire row (3x4)
Now for your table size artboard resize the module to fit 4 columns of it.
Adjust the font-size and padding in this module in case the text doesn't wrap properly. (Make sure that if you are resizing the font-size for something like a heading style then you should replicate it on the entire artboard).
Is the module looking too cramped for space?
Then make it 6 columns wide and occupy two rows (6x2 each)

This is how the decision making process for responsive design works.
It's not exactly redesigning the whole thing because some parts of your design might not need to be reworked completely, you just need to decrease, say, the background. You need to also look into resizing components if needed - like padding for the buttons, margin below the paragraphs. So if the value for the padding around the text in a button is 30px for desktop screens, for tablets you can reduce it to 20-24px.

It's not exactly possible to explain the whole process. There are plenty of resources online which will give you tips and insights. There's a related video here on Lynda.com You can search for similar ones on YouTube. Best of luck.

Vote Up Vote Down