Author Topic: How can I use Scribus to create a web site wireframe or mockup?  (Read 1386 times)

ehepperle

  • Newbie
  • *
  • Posts: 2
  • Karma: 0
  • Novice
    • Eric Hepperle: Philosophy of a Polymath
How can I use Scribus to create a web site wireframe or mockup?
« on: January 15, 2019, 12:21:35 am »
First time poster.

Loving Scribus as an alternative to InDesign and have been using it for newsletters, manuals, project proposal, and resumes.

I haven't been able to find any tutorials on how to take a standard landscape 11 x 8.5 letter-size document in Scribus and build a Bootstrap-compatible guide template. I know Scribus is for document design and I've had fun designing various documents with it. I'm just wondering can it be used to create -- for instance -- a 12-column webpage layout, with gutter -- like my wife does in her InDesign files?

Thanks
"Be excellent to each other" -- Abraham Lincoln (Bill & Ted's Excellent Adventure)

RodneyLee

  • Full Member
  • ***
  • Posts: 104
  • Karma: 1
  • Scribus User
Re: How can I use Scribus to create a web site wireframe or mockup?
« Reply #1 on: January 15, 2019, 03:48:18 pm »
Mock up isn't the problem thats easy enough, whats the bootstrap do?, something like exporting CSS/Html?

a.l.e

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 1920
  • Karma: 26
    • the graphics lab
Re: How can I use Scribus to create a web site wireframe or mockup?
« Reply #2 on: January 15, 2019, 04:03:59 pm »
there is no such solution.

but it might be possible to write a python script that exports an html template.

if you can provide a .sla (collected for output) and a matching (hand crafted) html + css, i can see how far i can get with a script...
looks like a funny challenge, but i cannot promise that i will succeed.

ehepperle

  • Newbie
  • *
  • Posts: 2
  • Karma: 0
  • Novice
    • Eric Hepperle: Philosophy of a Polymath
Re: How can I use Scribus to create a web site wireframe or mockup?
« Reply #3 on: January 15, 2019, 07:55:22 pm »
@a.l.e Thanks for the suggestion about using Python. I don't think this should require coding in the solution, at least I hope not. I'm looking for a native solution. The key to this whole project is precise placement of multiple guides. I know it can be done in Gimp -- but I'm just trying to determine if this is beyond the scope of Scribus, or if there is an easy native solution. I'm open to plugins also, but I'm not sure I'm comfortable cut-and-pasting python code from a wiki.

@RodneyLee Bootstrap is Twitter Bootstrap, a grid-based CSS framework for designing websites. When people reference bootstrap and wireframe design, generally what they mean is a 12-column grid-based layout. I'm a mostly self-taught designer, and like my extraordinary musical keyboardist friend who learned to play by ear but can't explain music theory at all, I understand a lot of the design principles, though I may not be using the right jargon.

Here is an image showing one example of what a 12-column "Bootstrap" design layout looks like:



And here is a website demonstrating many different Bootstrap CSS grid templates created for graphic design & layout programs (mostly Photoshop). I have seen these types of templates for many different graphic and document design programs including Photoshop, InDesign, Gimp, InkScape, and MS Word.

So, to sum up and hopefully clarify, I'm asking the following two things:

  • What are the steps needed to create a 12-column bootstrap quide template?
  • How can I create this template with Scribus?

P.S.: I've seen lots of tutorials showing how to design with a template in Photoshop and other programs, but I've never seen how to actually make the template.

Thanks
"Be excellent to each other" -- Abraham Lincoln (Bill & Ted's Excellent Adventure)

a.l.e

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 1920
  • Karma: 26
    • the graphics lab
Re: How can I use Scribus to create a web site wireframe or mockup?
« Reply #4 on: January 16, 2019, 10:56:41 am »
this is what i get if i use "page > manage guides":



as said, if you want more, provide a .sla collected for output and a hand crafted html + css showing the final result.