HN Theater @HNTheaterMonth

But that doesn't mean we need to reinvent the wheel every single time. Now look at something like Macaw and tell me that doesn't look like a useful tool: http://macaw.co/peek/

Here's a link to the demo that went around everywhere a few months ago: http://macaw.co/peek/ . I'm, if anything, curious to see some of the code generation in a non-demo setting.

I started programming around a time similar to you, and I also faced many of your challenges. I know this may not be the general opinion, but my opinion is to not worry about starting a web design business. This is a super competitive field, and your age WILL hurt you when it comes to finding clients.

That being said, I started working for a web development firm at age 15. I didn't have a portfolio and I didn't have an impressive interview; I simply knew the right people and was in the right place. I lucked into a great job. I was able to work after school and on weekends, and I'm still employed at this firm. Working for a firm allowed me to mask my age. I wasn't a person; I was a member of a team. I produced the results expected of that team, and clients never once asked my age. I'd continue networking with people and being active in the community. Eventually, you will find the right opportunity -- sometimes it just takes time. Connections will be your biggest asset as this age. See if you have any family friends who own businesses who might need a website.

I never viewed web development as a career, but rather as a job. My passion is computer science, and by working in web development for several years before going to college, I've had the opportunity to gain communication skills and work skills. I am currently studying computer science, and I love what I'm doing. I feel if I was focusing on both computer science and web design, I would be spreading myself too thin. I'd suggest picking a field of focus, and going full throttle.

I'd suggest spending more time learning and less time trying to start a business, especially if you're facing resistance with the business. Running a business is a huge time investment (if you do it right), and this time might better be spent learning at your age. You have the blessing of being at an age with minimal obligations. You should use your free time to learn everything you can. Watch TED talks, read Wikipedia, take online courses, etc. This will broaden your horizons and perhaps open doors for you.

Finally, I'd suggest changing your personal website -- both design and content. I'm not accusing you of copying (and I'm not sure who did it first), but your website looks like a direct copy of Macaw's sneak peek website -- http://macaw.co/peek/sample. While a fraction of the design community might be the only people who recognize this, it still might give people the wrong idea. Considering you want to be a web designer and a website nearly identical to this was made in a matter of minutes as a demo, you might want to show something unique and reflective of your skills (your case study and your personal site do not look like they came from the same person). For your case study, I'd suggest explaining why having a site helped this client. Did he go from 0 traffic to 100 unique daily views? Did he go from 100 unique daily views to 1,000 unique daily views? Businesses and clients want to see results.

If you have any questions on web design/development at a young age, feel free to respond to this comment and I'll do my best to answer.

⬐ daleharvey

This looks great, but it has the same problem I have with every other web based design tool, it aspires to be a WYSIWYG editor.

I agree there is a need, but I think that need is exaggerated, writing html / css is pretty easy, its not fun but its generally nothing compared to the overall work, half the time you still have to do it manually anyway since it has to fit into frameworks etc.

I want something that lets me focus on the design aspect, it should have nice snap to grid features, ability to inspect and edit css, but it should also have a vector drawing tools, image manipulations. The current set of design tools have terrible support for most common web functionality, photoshop doesnt even have rounded borders, illustrator / fireworks / sketch / pixelmator all almost entirely ignore things that are important for designing for the web. However web based editors almost all lack any graphical and vector capabilities whatsoever.

I started on this and gave up a while ago, http://upmock.com/ and wrote about it http://arandomurl.com/2012/10/15/upmock-is-dead.html. Currently the most promising so far has been SVG Edit, however it doesnt seem particularly active nor has there been a focus on producing web designs

⬐ splatcollision

I hear you Dale - part of my original vision for Edit Room included vector shape editing (SVG) and image manipulation (Canvas) but there's only so much time in a day, and I've focused on getting the basics right first.

Any capabilities along those lines in a web app would probably be a bit more limited than desktop apps, but that doesn't mean that useful tools for vector and bitmap manipulation can't be made at all. However the case could be made to use desktop apps for what they're good for, and web layout apps can then reference files created with the desktop apps.

⬐ blankenship

I agree there is a need, but I think that need is exaggerated

Speak for yourself. As a code-savvy designer, who splits everyday designing on paper, in Photoshop/Illustrator and in the browser, I don’t think I can overstate how woefully our professional tools for web design have actually kept up with web design.

photoshop doesnt even have rounded borders

Sure it does—vector shapes + Stroke Layer Styles work great. Do you mean something else?

⬐ crazygringo

I feel like I should write a bot to say this on forums across the Internet.

Every time somebody complains how Photoshop doesn't have rounded corners, they mean it doesn't have dynamic rounded corners. You can't change the roundedness in any remotely easy way after you draw the shape, and changing the dimensions of the shape distorts the corners.

They're just a huge pain to work with, when they need to be trivially easy for doing web design.

⬐ oneplusone

Photoshop CC supports dynamic rounded corners.

⬐ willtheperson

I'm really excited about this.

When tools break away from old ways of "doing things" you can end up with much more exciting stuff. I know that I fall into past behavior when pressed for time (which is every project ever) and if I had an easier way to experiment, I might try something different.

I'm hoping it has some idea of optimization though. He was dragging out individual icons for every social button and logo and whatever. It doesn't seem like sprite sheets are possible here but maybe? I don't imagine sass/less support here but that would be neat.

Finally, I'd love to see how they are building the app itself. Is this a Chrome embedded app?

⬐ az-combinator

having every project pressing for time is a problem with project management and not the tools themselves. A little OT I know but something we usually take for granted.

⬐ leishulang

Can it read existed html code and modify the design on top of it? Or does it uses it's own project metadata for design information?

⬐ duopixel

Went through the whole video, looks superbly promising even at it's beta stage. It is obvious the authors get best front-end development practices as well as design principles. Definitely will follow up.

⬐ pbhjpbhj

In the video how did he manage to leave that M icon at 79px and not change it to 80!!?

Something I did note was that the pre-used class names weren't auto-suggested; eg on the footer buttons. Sure that'll get fixed. Also perhaps value snapping to avoid values like "29.608938547486037%"?

Everything else looked pretty slick though.

Didn't see the GA code being added in the video. Also it seems like Typekit was integrated to get some of the typographical flexibility.

Generally though I really liked it; seems very promising.

⬐ jwarren

I'm sure there's a name for it, but I fight quite hard to not necessarily round values to pleasing numbers. Sometimes that's just the right value.

⬐ pbhjpbhj

The precision being used is far too high. Optional snapping to common values is probably a good idea too (eg 80px is a common button/logo/icon size).

⬐ harrytuttle

This reminds me of Dreamweaver which makes me cautious having had to deal with the output of it for years...

⬐ Posibyte

There's a sample output on their page [1] which is very clean.

[1]: http://macaw.co/peek/sample/

⬐ harrytuttle

Dreamweaver's output was clean in the demos as well. It didn't stop a veritable rats nest of code appearing on anything marginally complicated.

It's not an easy problem to solve without human intelligence.

⬐ az-combinator

It was also the developer's responsibility not to use DW in a way that would make it spit a mess of code. Just because you could embed a table inside a table of another table it mans you should.

⬐ pbhjpbhj

With DW that was the only way to actualise certain designs though.

⬐ flexd

I just watched through bits of the video. The code generated does not look anywhere near as bad as Dreamweaver or Frontpage. It's fairly nice.

⬐ KeyBoardG

Really, really nice job, congrats. All your hard work really shows. Looking forward to this.

⬐ etchalon

These tools always look like they'd be great, and always completely fail for an actual design workflow for anything outside of wireframing.

For a specific example as to why, look no further than the first 4 minutes where the creator "imports all these assets we made". Made where?!

My design team doesn't work like that. No design team does. They don't "make one thing over and then plug it in over here". They make everything together in one program. Because it's impossible to jump between two different apps when you're exploring a creative concept. You don't think to yourself, "OK, I'll need this icon and this icon and maybe a background image with these precise filters applied and it'll have a sidebar so I'll need a texture for that..."

You open Photoshop, or Illustrator, or Pixelmator and you start trying things until something you've tried looks good.

While it'd be great to see design tools that actually took the intricacies of HTML structure and CSS into account, tools like Macaw (and all the others I've seen) all fall down for real work.

⬐ jwarren

Looks brilliant for mockups and simple layouts! I'd love to see the output for a more complicated layout.

I'm definitely excited for this one.

⬐ josh2600

Echoing other comments below, here's my feedback:

Visually it looks awesome, but what it really comes down to is the quality of the code. Most WYSIWYG editors leave a lot to be desired.

Second, I am always wary of amazing tools with unknown pricepoints. I get that you're still early, but some semblance of cost structure would be great. Frankly, I don't know if you're going to charge $1500 or $5 a month or free. I just don't know, there's too many ways you could choose to market this, and that insecurity, that lack of knowledge makes me uncomfortable.

That being said, great job on the concept and I can't wait to see what it looks like when it goes live.

⬐ camwest

Is price really that much of an issue if this revolutionizes the way that we build websites? I just watched the demo and got the same feeling like when I saw Firebug for the first time.

Let's see if it really works before we worry too much about price.

⬐ kenster07

Price is ALWAYS an issue.

⬐ iambateman

Deciding if this is the right tool for you is the first issue.

I personally spend $50/month on Adobe creative tools, and would gladly pay for better tools.

⬐ hrjet

> Second, I am always wary of amazing tools with unknown pricepoints. I get that you're still early, but some semblance of cost structure would be great. Frankly, I don't know if you're going to charge $1500 or $5 a month or free.

If you say it is amazing, he will probably charge $1500.

I guess the idea of a demo is to gauge interest, which will ultimately help in deciding price, among other things.

⬐ timdorr

> Visually it looks awesome, but what it really comes down to is the quality of the code. Most WYSIWYG editors leave a lot to be desired.

Did you see the code output at the end? It looked like pretty solid HTML and CSS to me. What was particularly interesting was the adhereance to OOCSS principles in the styles, but that could just be the result of good practices with the user.

⬐ pan69

It was a pretty simple "design", so yes, the markup should be reasonably clean.

For a real demonstration why not try something more "real-world"[1] and see how that turns out.

[1] http://cnn.com

⬐ umsm

I don't think most people will design a cnn.com on a regular basis or from the ground up.

⬐ prawn

I have fairly standard clients and what I usually work on is closer to a CNN page than the page Macaw demoed. And more often than not, it's from scratch.

⬐ GoNB

How do I use Macaw with Bootstrap/Foundation? Would I design the static website, then go in with my text editor and implement my front end framework of choice, or does Macaw have built-in support for front end frameworks?

⬐ dclowd9901

This is more a css/html replacement tool, and should probably be thought of as such. Framework implementation is about code design and engineering, something you should take up on your own.

Regardless, it'd be nice to not have to write markup and css, to me a boring process; a product like this is long overdue. My question is how it fits in with workflow. Who owns this in a group setting; the designer? The front end dev? Do I have to design a page in photoshop before I try to build it in this (in the presentation, the graphics were all ready to go and layout, but it's never like that in real life). It just seems weird to have to go through the process of designing a page, and then designing it again.

⬐ az-combinator

I would think it would be owned by the designer and would be used as a prototype tool (as others mentioned before). I would not use PS for anything else other than to create elements to support the design (crop images, special graphics) but other than that a tool like this would be great to get the project started on the right direction and test the functionality on different browsers without having to involved a dedicated dev into the mix.

⬐ rhokstar

Would be nice to load frameworks like bootstrap to generate bootstrap code.

⬐ marcamillion

Wow....this looks awesome. This could definitely challenge the ubiquity of something like Bootstrap.

If you have something like this....why use Bootstrap?

Can't wait for you to release it.

⬐ mcrider

I'm personally a little disappointed it doesn't use Bootstrap or Foundation. A lot of developers are already skilled with those frameworks, and as I'm sure modifications will have to be made to the code of any of the new responsive design tools, using a familiar framework would be a big help.

I also hope these new tools allow us to output templated html and css -- there's nothing clunkier than dropping html into a rails project (I know that webflow will be able to output jade templates).

⬐ davej

Watched the video. This looks amazing! I don't say that often.

Wow, fantastic job, the smart and pretty CSS/HTML output is the icing on the cake.

⬐ nilliams

Best attempt at this I've seen, looking forward to getting my hands on it.

It states in the video this is a native app, but written with HTML/CSS. Would be interested to know if this was written in node-webkit (like Light Table), or if not, what?

[1] https://github.com/rogerwang/node-webkit

⬐ iambateman

On price point, I'm guessing $79 basic, and $129 pro.

It's desktop, so unlikely to have a monthly model.

⬐ anotherbadlogin

subscription = no sale

Renting software is bullshit.

⬐ publicfig

Seems a bit low for the price, but I think you're right about no monthly model. I could be wrong, but I don't believe it's possible to have subscription based software at this point in the Mac App Store, which is where they mentioned they'll be selling it.

⬐ ridersofnorth

This looks really promising. Can't wait to try it out. This will be just available on Mac?

⬐ michaelbuddy

I saw on a post on twitter that the app is based on html css and javascript and can be ported over to other platforms and possibly be a web app. hope to see it on my gasp non-mac platform.

⬐ BHSPitMonkey

I hope not; It should be an easy task for them to port this to Linux and Windows (and even to publish on the various first-party software stores they come with), given that the app is evidently built using web technologies. Perhaps even something common like node-webkit.

⬐ michaelbuddy

yup that seems to be their plan.

⬐ nodefortytwo

quite interested to see if it can really be used in production rather than just mock-ups. For example can you use the stylesheets from one page across a range of screens and still get the same level of clever optimisation.

⬐ GoNB

I'm wondering the same too. At the moment this looks like a great static website design tool. It may allow me to provide rapid design for clients who want a simple blog.

⬐ teyc

I'm astounded. Is this really a web-app. Did you roll your own client-side framework? My mind is blown. And there are rulers as well?! Where did you learn to code like this?

⬐ None

None

⬐ michaelmior

I believe it's a native app for Mac OS, not a web app.

⬐ knes

Looks really interesting for doing mockups that can be easily tweaks in the browser or add low level features by editing the code.

⬐ matt__ring

I like it! Easily build a pretty page, drop in a 'lil angularJs app & go. Too bad I'm not a mac guy...

⬐ marmarmar

seems like a good tool for prototyping

⬐ dmarusic16

Yup! This looks like a great product for that.

⬐ culshaw

I thought the same thing, looks way better than Edge ever did.

⬐ kyle_martin1

Awesome! What's the price point?

⬐ az-combinator

Would it be wrong to use his video to create a web based competitor? Looks like it is possible.

⬐ michaelmior

Imitation is the sincerest form of flattery ;)

⬐ tortilla

This one might actually be a tool I can use in my workflow. Can't wait to try it out.

⬐ sakal

I was impressed by video of Macaw, but it not released yet and I need it under Linux. OMG

⬐ deepak-iiitb

Looks great for mock-ups. Feel would be a great tool for Product Managers too.

⬐ Fando

Simply stunning! Great work. Looking forward to trying it out.

⬐ od2m

This looks perfect the next time I need a static webpage...

⬐ jwarren

This could definitely be a first step towards building a CMS template.

⬐ hcarvalhoalves

Looks good, it seems to get the markup right.

⬐ jdmitch

Looks great - when is it out?

⬐ splatcollision

Looks pretty good - I'm happy to see more web layout tools coming to market, since I'm responsible for Edit Room [1], my own vision of a flexible and responsive web design tool. Also curious about the pricing (obviously).

It's a big enough market that the more variety of tools that exist, the better, as designers can find the tool that they like the best, instead of the bad old days where it was Photoshop or Fireworks, and they both were crap for web design.

What's interesting is to compare and contrast the difference between a tool like this on the desktop, and tools like mine that are web-based (see easel, divshot, webflow, probably 1 or 2 more that I'm forgetting, etc...)

Being on the desktop gives them a bit more power and control over the user interface, as well as super-easy importing of external assets.

Being web-based allows me to do neat things like have live-updating preview links, so you can immediately see how the design works or breaks on a bunch of screens at once. Also importing HTML content from any URL, for doing quick responsive redesigns. I still have some work to do on the output CSS being more optimized, but for prototyping and being wildly creative in a flexible web canvas, you can't beat it.

[1] http://edit-room.com

⬐ csomar

instead of the bad old days where it was Photoshop or Fireworks

Can you elaborate more on this? Photoshop looks much more advanced than this app (there is no way we can compare them)

It's not meant or designed to produce HTML/CSS web designed and never claimed that.

⬐ splatcollision

It's a little hyperbolic language for sure, thanks for asking.

I'm referring to the fact that Photoshop was created as a photo/bitmap editor, and has of course grown to be very advanced and full of features. That is in fact sometimes a defect, depending on your task. Of course photoshop doesn't produce HTML and CSS, but that hasn't stopped it from becoming the standard for designing things that are intended to be HTML and CSS in the end.

I've designed Edit Room to be very specific towards designing with words and content for the web. Therefore, the focus is on typography & layout, color & style, and flexible/responsive layout. Using the native formats of the web for your designs ensures you're building with real bricks, so to speak.

⬐ toyg

It look absolutely gorgeous, but when I get to the designer it simply won't let me create any layer, dragging doesn't seem to do anything.

Safari 6.0.5 (8536.30.1) on OSX 10.8.4. With Chrome I only get a "sorry there was an error" message.

⬐ az-combinator

same here, cant use on Chrome or Safari.

⬐ splatcollision

Thanks very much! I'm sorry to hear you found a bug. I'll investigate and see if I can get a fix up.

⬐ az-combinator

Interesting edit-room tool. How do you see the user base in regards to your tool and competitors? Do you see more people signing up and requesting more features or do you see them coming back to their "old" tools once they tried yours (or others)?