I'm guessing InVision Studio is what the Macaw acquisition turned into. I don't see any reason for them to need to acquire any other design platforms at the moment other than to boost market share. I'm surprised it took them this long to reform the Macaw product with the likes of Sketch taking over the market. Macaw, at the time, was revolutionary but needed much more work and I'm sure the small team at Macaw didn't have the resources and were happy to be bought up.
I actually had the pleasure of speaking with Cabel Sasser about a year ago, and even then he seemed really concerned with App Store policies - sandboxing, upgrade pricing, etc. Came as no surprise to me that they pulled Coda earlier this year, the amount of compromises they had to make to meet App Store sandboxing requirements was absurd. The nonsense regarding Transmit was just icing on the cake.
As far as Panic's iOS products go, they have a lot of obstacles there. One, yes, I certainly believe iOS users are generally not willing to pay as much for software as Mac users. Two, the biggest problem I have with Diet Coda is that it just doesn't seem very fit for iOS. As a touchscreen platform iOS is generally bad at apps that center around typing, especially coding. That, and the kind of person who needs to do web dev on the go most likely has a laptop, and it's hard to think of a reason why anyone would pick Diet Coda over regular Coda on a MacBook.
Purely spitballing here, but I think the ideal kind of web dev tool for an iPad would be something graphical, a WYSIWG experience. The iPad's UI excels at manipulating things on screen, dragging things around, resizing them, drawing them. Something less Coda and more Macaw (http://macaw.co).
> Is there no software out there with direct access to the code and intuitive design elements?
No, there really isn't. The closest thing was Macaw which is now a dead project since the team was absorbed into InVision a couple of years ago.
You'll be far more versatile if you learn to code on your own, but until they time here are two answers. You're looking for "padding" to bring the text in from the edges.
You might want to check software like Macaw for building your website.
Edit: looks like Macaw works still but is no longer being developed. It'll still do the trick, but you should look at alternatives too.
A third option is to look at a framework like Bootstrap which has a tonne of pre-built CSS that you don't need a lot of knowledge to use. Look for free Bootstrap themes.
You mean the single page, HTML 5 video, Large centered type and clear divisions between content thing?
It's becoming the latest trend in web design in general. It's mainly due to the growing use of mobile and tablets for internet. Oddly enough none of the pages mentioned by the OP are responsive, which is half the reason you make pages this way now anyway
Here is an example of this new style with proper responsiveness. Scale your browser window down to roughly iPhone sized and shaped and you'll see.
Responsive web design forces you to think thoughly about the architecture of your HTML in advance. Transforming a website that was thought without that in mind, into a fluid responsive experience, while it certainly can be done, will be a slow process and most likely will need a couple of hacks (an !important
here and there, some positioning shenanigans, and so on).
That's why many people in the webdesign community think <strong>Mobile first</strong>: that is, start from the simplest layout for mobile and edit as you get more and more space.
Personally, I don't always think mobile-first when RWD, because I use desktop much more than mobile myself; but I get the advantages of this mindset, and, in any case, I always carefully structure my HTML before any styling to account for responsiveness.
Last thing: if you are into visual editors, you might want to check Macaw out. I have never tried it, but the videos look interesting.
> Okay wow, I must be the laziest, least-skilled CSS coder out there because all of these apps require that I type out every style element by hand.
Part of the reason for this is that it's just plain faster to type out border: 1px solid red;
than it is to find the border-width input, click it, type 1px or use the "dial" control, select a stroke type from a dropdown menu, then select (or type) a color from a color picker.
That being said... the upcoming Macaw is likely your best bet.
http://macaw.co/ was bought out by Invision.
The app is free and exports out clean html/css/js for a highly functional prototype.
You can also do responsive sites, and I'm actually using it to build a simple portfolio site for myself.
I don't necessarily think some app that moves an object on the stage and fades it out would necessarily produce crap code. If Adobe made it, probably, but it seems a lot of random small teams and individuals are making apps that produce efficient code these days.
like http://macaw.co/ ...which I have not tried, but just remembered. It's supposed to be great, I guess.
I was not thinking of a program that would produce the whole thing start to finish (that would be ridiculous), I was just thinking along the lines of those CSS generators, for a simple example, that spit out good code in real time while you play with the GUI.
...And then you'd piece it together with your knowledge of javascript.
Just taking the tedium out of it, really.
It would just be efficient (as long as it writes efficient code) because why dick around with trial and error punching in coordinates when you can just slide an object on a timeline in a GUI?
If someone hasn't made this sort of app yet, they should. Would be cool to auto-update grabbing all the latest dependencies for you in various js libraries and then spitting out a "web archive" at the end with all your files and folders and the exported code clearly commented to show which libraries were used and where they end and your specific animation code begins with options to minify, etc.
I really should be going with some framework like BS/Foundation or similar for mockup/prototyping, the speed would be nice. I tend to roll my own components in Sass partials. For new components or UI that combines multiple, I like to work on them in isolation with BrowserSync. Before this I'd normally plan things out on pen/paper, sometimes photoshop for iterating on styles. I've been wondering if something like Macaw would be a useful tool instead, then tidying up the code it generates.
Well, the CSS is created by Macaw, have you heard of it? I'm using it to get my layout done so I can have something to work with (I'm going back in to delete the bloat CSS and add in my jQuery using Sublime Text).
I'll take your advice and get the meat of the site done before I try to make it responsive, just hoping someone could help me understand why these divs had such a strange behavior.
Photoshop is still used (or Sketch is a new alternative which is gaining popularity) but less so for creating full sites. Usually just key screens for client sign off (in my agency anyway)
Responsive can be worked out at wireframing stages usually (Axure can make responsive documents or even an advanced WYSIWYG like Macaw can help with this)
But for personal projects I tend to lean towards StyleTyles (as mentioned by /u/devsm) and in browser design (coding the design with a live preview) after sign off.
960 is out in favour of more robust and customisable pre-processor grids such as my personal favourite (Sass based) Jeet
I've been playing around with Pinegrow lately. You can scaffold sites via drag and drop with Bootstrap, Foundation or neither and then dig into hand coding for content. The interface needs work but it's my pick for something in-between a GUI and text editor (you can also use it with Sublime Text too).
There's also Macaw but I just haven't been able to grasp it yet.
It depends on what you're trying to do, if you want to have a close relationship with the final result, you'll need finer control over the css. I recommend sublime text 3, it's free, and has a lot of extensions that can speed up your workflow, like livereload.
If you want to don't care as much about production quality code, macaw is like photoshop for the web.
Have you checked out sites like Macaw? The reality is that mass consumption is digital, with an increasing number of projects, resources, and budgets for apps/websites/devices.
To be a web designer, you don't need to know how to program. Much the good print designer knows paper and printing, you have to educate yourself if you want to work in that medium. Even if you never have to do it yourself, knowing the limitations, what's possible, what works well and doesn't, is necessary.
Think about what you like to do, if it's vector art, then maybe you focus on illustrations more. If it's typography, layout, typesettings, you need to adapt and learn the new rules for the web.
If you're looking for a WYSIWYG option, and want responsive design, you should check out Macaw ($99 - $179, with a 30 day free trial as well).
If you have no idea where to start with semantic markup, css, javascript (with or without jQuery) for interaction, etc., then you might just want to use a hosted service like SquareSpace.
In fact, you might take a look at Jux, which is designed for photographers and filmmakers.
If you're intent on using a WYSIWYG editor, your two best bets are Macaw or Adobe Muse . Neither is a replacement for knowing what you're doing with raw code, but they're both ahead of the competition. Do avoid Dreamweaver and its design view at all costs, where possible.
If, on the other hand, you're looking for a hosted site builder, then Squarespace, Webflow, etc. are reasonable. They're nowhere near ideal, but they'll get you a reasonable looking site up.
I'm guessing that by open-source you mean free?
And by "webpage designer" you mean something that means you can edit visually but it spits out proper code?
I'm sorry but no such thing exists yet. The macaw project promises this (but paid), but it isn't proven yet. I am highly skeptical that it will succeed, since every WYSIWYG so far has produced sub-par, buggy code.
Codekit, codepen, jsfiddle and the like (including using the devtools in your browser) will be awesome for you if you are willing to learn code, but otherwise you are shit out of luck.
I would suggest skipping photoshop for UI design, and going straight to a modern tool. Photoshop lacks the ability to code up shapes in CSS, design responsively, and have a built-in 12 column grid.
try:
http://macaw.co/ might be worth checking out, if you'll be doing design?
Also, for testing in IE, check out VirtualBox or a similar virtualization software (VMWare Fusion, Parallels) and you can download free versions of Windows for testing: http://modern.ie
I've been toying with it this week and the jury's still out for me. I feel like i'm flying blind and am often wondering whether various half-expected features are either hidden somewhere, missing or broken. There are plenty of little quirks but it does seem to be usable. Definitely not v1 release quality yet.
Saying that, I'm remaining optimistic and trying to prototype a relatively simple design based on a PSD. It looks like I might get 80% of the way in Macaw and will have to hand code from there.
For support, we have how-to videos and forums.
This is 0.7.1, while an upcoming "major update" (0.8?) promises many changes and improvements (apparently).