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

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

Thanks! The content model first approach is the way to go. The list of things that it makes better or render easier is long, but the one that really counts is the level of serenity it brings to your design process, to both you and your clients. So when you say “The design thinking is feeling much less stressful because I have such a clear content”, it makes my day :slight_smile:

“I feel I do get a bit bogged in Webflow”… and it’s already better than other methods, and you will only improve from now on, getting better at web concepts and at designing things. It’s not even about being good at Webflow.

2 Likes

SO I literally logged in tonight to see if there were any threads on this and boom. I am super interested in this.

My fickle process of the month: :stuck_out_tongue:

  • Project management - Business / website discovery notes, content planning including creation of CMS items, media and text requirements with notion.so

  • Wireframe - whiteboard or ipad. Paper is good but my 3 year tends to refine them with haste.

  • Creative assets - affinity designer & photo on mac and ipad. AP has batch jobs, but web optimisation not as good as web specific tools. AD on ipad is feeling pretty damned fine for vector and raster even if it goes way beyond my needs at this point.

  • Design including initial style/ feel options: Webflow. CMS items imported directly from notion (no api yet).

Figma is installed but it feels ludicrous to build a prototype that isn’t a live website … I mean isn’t that why we want a visual code, design, deploy builder like Webflow.

Now all we need designer / client commenting in the editor like Google docs / notion and we are away.

1 Like

Pen and paper, Camera, and straight into Webflow, it’s really much better all round and I agree with @Vincent that a content first model and straight into live design and development is absolutely great for me and my clients. It’s also a lot more fun as well as being more efficient!

I dive right into Illustrator, like always for everything I do. Looks like I’ve been sleeping on Affinity Designer - I thought those were Mac only apps (Windows guy) - I’ll have to check that out for a $50 one time payment. Looks pretty slick…

Obviously, to each their own but I have no idea how you guys can jump right into Webflow without putting something down in pixels first.

Even for simple sites I need to see how I’m going to place prominence on their messaging & content/structure through color, layout, graphics, images & typography, then once I have it all finished up, revisions have taken place, everything is making sense as a whole, the final UI is client approved - then I feel like the hard part is done.

I just move into the “technical” part of making it a real functioning thing through html/css/js… winging the interactions & final touches as I move through implementation.

Approved UI from Illustrator:

Coded Site:
kellerasphalt.com

2 Likes

I use Figma since its Beta days. It works directly on the browser or through a desktop app - and it’s free with every feature a freelance designer would need. (There are paid plans for team libraries, etc).

Also it has an open API that connects to several other design/prototype tools.

My dream is to see Webflow connect with Figma layouts. Who knows, maybe someday. And then I could create entire projects with just 2 Chrome tabs. :slight_smile:

Link - figma.com

2 Likes

Not so while ago I was doing a bit of research and found one article about web design process (https://www.cleveroad.com/blog/web-design-process here it is in case someone would want to check it out as well) and there were a few web design tools like InVision, Sketch, Adobe XD etc. I really like that Adobe XD is free and available for both Mac and Windows.