Sketch web design resizing help

Tools
,
#1

Hi, I am fairly new to Sketch and I prototyped a re-design for a website. However, after I finished all my artboards I realized all my pictures and text are way too big… Is there a way to resize everything but keep everything more or less “in place”? (it’s the right webpage size for the artboard, but everything is just way bigger than I wanted when in full screen mode)

Also any tips on designing to the right proportion of a Webpage on Sketch? I feel like it is easier to visualize for mobile apps and the preview for this is also better on Sketch; for Webpage previews it doesn’t show the true size unless I zoom in until the screen fits my laptop (which is a bit of a hassle to do constantly).

Thanks in advance!

By the way this is the link to the prototype:
https://invis.io/RMQZVA8EPC9#/352076192_Home_Page

It looks fine when its not full screen but when it is (zoomed in so all the contents fill up the entire page), everything looks too big. Is this something that I should fix, or is it something I can leave if it looks fine when not full screen? I hope this question makes sense lol.

1 Like
#2

hi @belindahui23
welcome onboard :slight_smile:

I am not 100% sure of what you are asking for.

I will try to go point by point:

Which approach did you follow in creating the Sketch art-boards?
Did you create some break-points?

This depends on the way you want to design the UI. You can choose if it will be responsive or adaptive

I never rely on Sketch itself for previewing the UI. I and my team strongly rely on prototyping tools such as InVision

I’m lost here, what do you mean with “zoomed in so all the contents fill up the entire page”. The zoom is a user-agent based interaction, this should not affect your design, you cannot control the user behaviour at this level

I hope it will help
Don’t hesitate to ask for more details :wink:

2 Likes
#3

Select your art board and hit the ‘scale’ button and this will scale it down proportionally

1 Like
#4

Thank you so much for your detailed response, it is very appreciated!

To clarify, what I did was select the web page art board (1024 width), but I expanded the height so that it is scrollable. When I was designing, I unknowingly made everything larger than I expected because I was not visualizing it as if I did as a web page (it was a long artboard, not in webpage view), so now I want to know how to progress from here.

-I just selected the web page size and started creating from there. How do I create breakpoints, and how will this help me with sizing?

-When I preview on invision, it shows the preview like the first attached picture. But this is not the size the website will be right, because there is a lot of white space on both sides? I was imagining it to look more like the second attached picture, which fills up the entire page (excuse the hotspots, didn’t know how to rid them from the screenshot). I also attached a screenshot of my artboards, maybe that will help too. Thank you again so much for all your help!

Photos here:
https://drive.google.com/open?id=1cpcCCW8y5FJRsTwReuSzjznzAG4LQUYc

2 Likes
#5

when you start an art-board on Sketch, on the right panel you can select “responsive web” from the select.
In the list you can choose one of the most common break-points used for responsive projects.

option 1: you can copy-paste the first artobard and modify it manually from its properties
option 2: you can rely on the BPs in the artboard panel (same for the native mobile screens)

How do you upload screens on InVision? Are you using the Craft plugin?
In case you manually upload the screens as PNGs, did you check the presets in the right panel?
Be sure that the size is set to "1X"

By checking your screenshots I cannot really understand how to issue is started

If you want you can share the Sketch file and I can have a look at it

1 Like