Which comes first, the layout or design?

Publishing help General
1

Hi everyone.

I have a general question about work flow.

Let’s say I have an idea of a layout in my head and I start building said layout in Webflow. It has a bunch of sections with containers and columns etc. I’m happy with the layout, now comes the time to add the images. How do I know what sizes to make the assets to fit the elements?

So lets say I have a Div block with a width of 80% and height of 500px. I know the height, obviously, but how do I work out what the 80% is.

I suppose what i’m asking is, can someone give me some advice on workflow and share some best practices for designing optimised assets assets?

Thanks,
Steve

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2
  1. gather your content, images, colors, etc.
  2. Draw wireframes
  3. Build your site in Webflow
  4. Done
3

Hi @stevenworrell85

This thread might be useful: How to determine the sizes of images on a website - mentioned there is a Chrome extension ruler…

In terms of the 80% - it will depend on the width of the parent element. If for example you are using a div in a container - the container is a pre-built Webflow component with 940px.

There is also this tutorial: Size | Webflow University

Hope that helps

2 Likes
4

If you use background images, you can set them to automatically crop to your image placeholders in your design (“cover”).

All you need to know is at least one side of the dimensions, then provide an image with 2x of that (for retina or high DPI displays).

1 Like
5

Thanks StuM.

I am designing outside the grid, so, 80% VW.

What I think i’m struggling with is not knowing what dimensions to make my assets in Photoshop. I have a few assets which either don’t translate well in responsive views or they don’t fit the box i’ve made for it.

Apologies if this isn’t making much sense.

Thanks,
Steve

6

This topic was automatically closed after 60 days. New replies are no longer allowed.