What software do you use to pre-design a website?

Hi there,
I’m interested to know what software do you use to pre-design/mock-up your website?

Sketch, Affinity Designer, Adobe XD, …

What are you using and why?

Thank you :smiley:

I usually use Sketch for all my web design mockups. It works really well for me – I can first play around with the layout, sizing and colours and then get the design approved by the client, before turning it into an actual website with interactivity. I also love how easy it is to export assets with Sketch! Wouldn’t wanna go back to Photoshop for that kind of work ever!

Hi Laura,
thank you for your feedback!

Previously I used Muse, where I don’t need to pre-design/mock-up my website. But in Webflow it’s very useful to do this.

I used Sketch two years ago for a lot of design stuff. Later I switched to Affinity Designer.

But I saw a lot of people prefer Sketch for website mock-ups. Is there a reason why Sketch is so famous over all other like Affinity Designer?

BTW: What are you using for bitmap stuff?

Yes, I also think it’s better to first use a program like Sketch or Affinity Designer (haven’t tried it yet, but heard great things about it) to do your static mockup. You can very easily move objects around on the page without adhering to the rules of html & css.

Why is Sketch so popular? I think there’s several reasons for that. It’s functionality can be easily expanded via free plugins and the software plays well with other services such as InVision (for making interactive prototypes). There’s a large amount of tutorials and additional (free) resources such as UI kits available for Sketch, too. Also, heaps of well known US software companies have switched to Sketch, so Product Designers basically have to learn the software if they wanna be successful there.

For bitmap images I still use Photoshop, as I’ve got the Creative Cloud subscription. Have been considering to switch to Affinity Photo, since I liked the trial version, but somehow I haven’t done it yet. Guess I still use InDesign and AfterEffects every now and then, so I’m a bit hesitant to give up Adobe CC. Curious to see what Affinity Publisher is gonna be like when it’s being released…

Thank you :slight_smile:

Ok, so I really like the look of the Sketch UI itself. It feels much more… I don’t know how to call it. But it feels better than the Affinity Designer UI.

BUT the Affinity tools are really really intuitiv. What makes the workflow very great.

And for the Adobe stuff… I used the subscription before too… But you can replace everything with much better software:

Photoshop → Affinity Photo
Illustrator → Affinity Designer
InDesign → Affinity Publisher (Beta comes soon)
Premiere → Final Cut X
After Effects → Motion

Specially on a Mac this software is soooo much faster and better.

Could you give me some examples what kind of plugins could make a designer live easier?

And why do you use InVision instead of the build in Sketch Cloud for interactive prototypes?

Do you use InVision for your website clients too?


Is someone here who can compare Affinity Designer and Sketch for prototyping?

2 Likes

Hi @DeepShader @lauraniebel

Thanks for the interesting thread :+1:

I’m definitely a fan of Affinity Designer and Photo, and really looking forward to Publisher too - it’s great to be subscription free and support an increasingly viable alternative to the big players!

I have to say though, most of the time, my pre-design tool, is my design tool - Webflow! There’s quite a few other designers here who do the same.

For me, I like having the ability to make it linked, clickable, and interactive at an early stage, and also because a client can feedback after interacting with the design at an early stage too. It also means any complexities in achieving the design are uncovered as I design rather than pre-designing and then hitting an issue during the actual build.

We are in an interesting phase in design tools, with more and more choices becoming available!

4 Likes

So you would prefer to mockup directly in Webflow?

But isn’t it much slower than to do it in something like Sketch, which also allows you to interact with the result through Sketch Cloud?

I think the most people use something like Sketch, Affinity Designer, etc… because you can generate graphical elements at the same time. If you do it directly in Webflow it isn’t possible in this way, I think.

1 Like

I use pencil and paper to sketch out my wire-frames and design, I use brackets to mock up the html.
but my development programs consist of the following.

Programming
Zend Studio & Zend Server
Mysql Workbench

Html & JS
Dreamweaver CC, Brackets, Google Chrome.

Graphics
Zbrush, Cinema 4d, Photoshop CC, Procreate, Marvelous designer, Substance Painter, Illustrator CC, WebGl, Element 3d, After Effects.

Good points @DeepShader - I can totally see the benefit re the graphical elements too.

I guess the flipside is that a mockup in Webflow, then saves the time building from scratch in Webflow…if it’s been structured well and doesn’t need huge changes…

As I say, thanks for starting the thread - always good to hear other’s workflows :slightly_smiling_face:

1 Like

Yes, you’re right, I should probably look a bit more into replacing my most-used Adobe apps with alternative software. Would certainly be great to get away from the Adobe dependency. Really looking forward to see what Affinity Publisher is gonna be like!

When it comes to plugins for Sketch, I’d definitely recommend Craft (Craft Manager | InVision). Also have a look online at reviews of different Sketch plugins to see what might fit your workflow! It’s one of the major strengths of Sketch, that you can expand the software’s functionality however you see fit!

I guess I use InVision for prototyping cos that’s what I used back at uni and I’ve kind of stuck with it. But at the moment I only really use it for concept designs I do and/or little side projects, not client work. Always open to have a look at other options though such as Sketch Cloud.

1 Like

I’ve heard now from quite a few people who are using Webflow as their go-to design tool. And I agree it certainly saves time and provides clients with a clickable prototype straight away. For me personally I just feel, I can design more freely when I use a software such as Sketch first. I don’t limit myself straight away to designing only what I can build, but can design whatever I think best suits the client and his mission. Of course later on I might encounter obstacles and might not be sure how I can build something in Webflow – but then I just have to do my research and find out!

2 Likes

I like to keep it simple, flexible and prioritizing UX over UI, so I use paper and pencil to create the basic structure with a focus in usability and then build it and make it visually pleasing on the go with Webflow :nerd_face:

1 Like

Oh yeah - forgot to mention pen and paper - also useful for planning out CMS data.

Yes, that’s how it all starts for me to – I use pen & paper to draw up rough wireframes. But of course only after I’ve determined the site requirements, features etc.

1 Like

I’m actually faster and feel more free with designing directly in Webflow. I’ll try sometimes to start in Sketch but I’ll just end up in Webflow rather quickly. Theres things like reusable classes, designing with collections, publish to check how it looks in my mobile or iPad. And the feeling that I don’t have to do it twice.

4 Likes

This is interesting. So the most people seem to use Webflow directly to mockup websites instead of using a tool like Sketch or Affinity Designer, where it is much more flexible to get an idea of the “product”.

Hey all :wave:

It seems I’m with a few others here. I go straight into Webflow as soon as possible. Feel like I’m getting to a MVP faster. I’ll gather inspiration, sketch if necessary, and create a Mindnode for larger sites or CMS.

I’ve tried to place Omnigraffle or Affinity Designer in the middle before going to Webflow, but I often feel hindered or held back by not just designing functioning code up front.

But I will admit that I also feel that the freedom provided by Webflow can lead me to second guessing the design and interface since it is so easy to adjust. This can leave me with a lot of styles to clean up and old animation tests. So right now I’m trying to find a way to get a strongly defined design direction prior to jumping into Webflow but want to avoid the time to create mockups.

This is definitely an interesting topic. Everyone wants to streamline their process and manage time wisely, yet we all have different design preferences. I’m definitely open to new workflow tips/ideas.

These are the design related apps I use when I’m not in the Webflow Designer:
Via MacApp Store

  • Pixelmator Pro, MindNode, LittleIpsum, OmniGraffle, xScope, Typeface, Affinity Photo, Affinity Designer, Final Cut Pro, Motion

Via Setapp

  • Capto, Gifox, HazeOver, IconJar, Sip, Squash, Photolemur

Other

  • Luminar, Aurora HDR, DaVinci Resolve

Previously Used

  • Everything Adobe
2 Likes

@vincent - Was it you good sir who takes the approach of designing a site in Webflow fairly fast, and then rebuild it again for the final product?

(or am I thinking someone else?)

1 Like

When I started with Webflow I was still doing 1:1 websites in Balsamiq Mockup and I continued for a bit. I’d design graphic intentions in PS, Xd or Sketch. i’d still do a lot of graphic design in those tools if it wasn’t for Webflow.

Then the CMS came and everything changed. I very rarely use PS, Xd or Sketch anymore. I design vector pieces in AI and export them to IconJar. From Iconjar, it goes into Webflow.

http://vincent.polenordstudio.fr/snap/IconJar_2018-08-08_09-34-17.png
(IconJar with a website project folder)

CMS changed everything because I now design the content model first. It means the actual site, with real content, with the CMS structure, in Webflow, without graphic design at all. When it works there, when all the strucure decisions have been taken, when all the lists, sorting, behaviors have been secured, I switch to graphic design.

http://vincent.polenordstudio.fr/snap/Untitled-4__100_RGBPreview__2018-08-08_09-36-36.png

It’s life changing for designers and clients. Clients get to see their site with content at a very early stage, can start to add new content and use the site. It looks like this:

(That’s a homepage. On this site there’s close to 2000 CMS items already imported)

Weeks later I actually graphic design the site, then hompage looks like this:

Another page looks like this at content model design stage (all the content is CMS):

Then after graphic design:

The live site sits at: http://www.compagnie-vendeenne.com/

So I never go full graphic design in a graphic software anymore. I start designing the content model during the first meeting with clients, on Webflow directly. I project my screen and everybody participate (they love it).

I can’t go back to Sketch or Xd and start deisgning a CMS with fake content… I can’t, it’s too long, it’s cumbersome, it’s… stupid. It’s at the same time difficult to create fake content and easy because you can cheat so much. Since Webflow CMS, I’ve been wishing softwares like Xd, Ai, Indesign had some real, easy, Webflow like CMS.

9 Likes

I must thank you for mentioning this approach a while ago. It really struck a cord with me because I also implement / build workflow apps for clients. I am now in the middle of a project where I have worked through the content model, setup the CMS and now I am designing. The design thinking is feeling much less stressful because I have such a clear content, user driven model to work off.

However because I am still under one webflow year old with not much design background, I feel I do get a bit bogged in Webflow. But how much time would I lose designing in Figma etc… better to nail a rapid webflow design methodology perhaps. Less apps, less stress.

1 Like