Wireframes
- Started
- Last post
- 21 Responses
- ohhhhhsnap
Will be creating wireframes for an upcoming project-- might be a really silly question, but:
OmniGraffle? What else is out there?
- Maaku0
- axure is so fucking good. Makes my life cake.nthkl
- Yes to axure.riskunlogic
- ohhhhhsnap0
I've been tinkering with uxpin this week, I really like it! Almost about to shell out my coins ... but what do you think of OmniGraffle @maaku?
Incredible info here thank you!
I would die creating a Wireframe in AI.
- hyperbole! i use illustrator for wireframes.doesnotexist
- ended up doing the same.ohhhhhsnap
- Maaku0
Sorry for. the late reply.
To be honest I've never used Omnigraffle, lolI would go with Macaw just because it can give you the basic code as soon as you're done with the wireframing.
- see_thru0
Fireworks
- mg330
i really like UXPin but don't use it all the time. For larger scale stuff, in the past year I've used Omnigraffle 95% of the time, and on a current project I'm doing for a client I'm using Visio 2007 on the laptop they issued me, and Visio 2010 on the laptop issued by the agency I'm working for. VISIO SUCKS.
- nthkl0
Axure is so fucking good.
- utopian0
I have been using "Prototyper" FREE version. It is great, it even creates mobile versions with the phone skin!
- whatthefunk0
Question: Can you publish a project with custom fonts to AxShare? I can't seem to get it to work and most outdated posts confirm but nothing since 6 months ago. Easy to do if you generate files and host but unclear with AxShare - any thoughts?
- _niko0
google drawings is free and good
- turnerworks0
@ whatthefunk
Yes, with Axure 7. The fonts have to be hosted on a web server. Then use the names and urls to put in the @fontface CSS declarations in Axure found in the Publish settings.
Doesn't work in IE of course, and I've seen some weights not render in Firefox while others do.
- It can be a little tricky, but I've done it myself.turnerworks
- monkeyshine0
Bringing this back to life. Curious about other ux/interaction designers workflows.
Right now we use Illustrator to create wireframes and flows but I'm not a fan of the artboards. I used to use Fireworks and though it was buggy I loved the pages. I sometimes revert to Photoshop and layer comps (not to mention smart objects) but that's a little cumbersome as well. Some on my team are recommending InDesign but InDesign was no more built for interaction design than Illustrator.
So, what do you use? My team shares many components so a shared library is important. Illustrator's symbols are pretty terrible and why doesn't Illy have smart objects (didn't it used to or am I making that up?).
- I'm still using Fireworks. Have never had any bug problems with it, though.Josev
- Unfortunately it will probably disappear due to system upgrade and Adobe no longer working on it. So it's not a long-term solution.Josev
- term solution.Josev
- I did use InDesign recently (and created IA components in another Indesign doc and placed them into my file. That worked but was slow process.Josev
- but was a slow process.Josev
- mg330
Try something that's really meant for wireframing if you and your team will be collaborating, and doing this work for a while. Illustrator is simply not an industry-standard for robust work like this. Yes, you can make one off wireframes, but it's not the workhorse that Axure and Omnigraffle can be.
You will not find teams doing large-scale wires and UX work using anything but the tried-and-true software meant for this kind of work.
And if that doesn't convince you, think about it this way: by adopting an industry standard that adds new tools to your tool belt, you make yourself more relevant if and when you look for your next job.
- benfal990
Silly question maybe, but can someone explain me what's website wireframe?
im really interested to know
- mg330
Benfal, I found a page in French that explains what different wireframe tools do - http://www.radu.com.ro/programe-…
But basically, wireframes are diagrams of a website. Think of architectural blueprints for a building - same thing pretty much. They illustrate functionality and positioning of elements on web pages, and often include detailed annotations about the interactivity for all the elements on a page.
Like this:
- they don't really dictate positioning, only functionality.doesnotexist
- doesnotexist - see below.mg33
- THANKS mg33! :)
that page was in spanish or something btw ;Pbenfal99 - but i've found info on Wiki. Now I get it.benfal99
- mg330
Doesnotexist,
That wireframes shouldn't dictate positioning is a common opinion, I've found. I worked with a visual designer at an agency earlier this year who would have been happy if I'd just placed shapes at random within a wireframe, and he'd figure out where they should go. I couldn't stand it. He was a good guy and really talented, but his ego - like that of many creatives I saw there - prevented him from relying on the UX team for the job they were meant to do.
Problem was, he wasn't as involved as I was in the initial conversations with clients, and how the layout was conceptualized. The wireframes reflected those things, so they indeed were meant to illustrate positioning. Yeah, I know that stuff will shift a little bit when the visual design is done, but wireframes IMO are definitely meant to show close-to-accurate positioning of page elements.
That's extremely important when it comes to responsive projects. If UX architects/designers are involved in decision making that impacts responsive layouts - it should be clear to the visual designer that page elements are positioned that way because that's how the site will function - especially if they're not that knowledgeable about responsive design.
I mean, look at that wire example above. By dictating positioning, I'm saying you wouldn't expect a designer to come along and move the Recommended section below Vouchers, Local Deals, and Spend ePoints. It's where it is for a reason.
- its a case of juggling the wireframe (business case) with the creative (aesthetic case) to get an effective (for all parties) resultfadein11
- resultfadein11
- you're both not doing your job right then.doesnotexist
- monkeyshine0
@mg33 "You will not find teams doing large-scale wires and UX work using anything but the tried-and-true software meant for this kind of work."
I worked at both Microsoft and Amazon and in both places teams did not use Axure or Omnigraffle. They used Fireworks, Photoshop, AfterEffects (for nailing down transitions).
No doubt Axure and Omnigraffle are powerful tools but for product design they seem too exclusive. We often share files with UI designers which is why Adobe Suite is compelling.
- studderine0
Wireframes, wireframes, wireframes, wireframes.
- mg330
Thought I'd post and say that UX Pin recently came out with a great feature that lets you import Photoshop files into UXPin, with layers intact, to create interactive prototypes. For some people this is probably a really great workflow.