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

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.