TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Ask HN: How do you write concepts? (Structure / Tools / Howto)

63 点作者 ladino大约 9 年前
You have an idea and would love to get a designer + developer to get that on track! :)<p>How do you scribble your mockup? Do you have a structure or question-list to make a detailed concept (in my case for a web project) What are your experiences? What are your tools? Could you recommend books or experiences from big companies? How to start?

13 条评论

plainOldText大约 9 年前
* Design Mockup Tools<p>In the past I used Keynote for its simplicity, now I prefer Sketch. It&#x27;s nice to be able to preview your designs on your mobile devices. These apps are for Mac only though.<p>* Books<p>One book I would recommend on design is &quot;The Design of Everyday Things&quot;. You&#x27;ll learn a few useful things about design in general.<p>Another book I&#x27;m reading right now is &quot;The Process of Creating Life&quot;. I cannot recommend it yet as I haven&#x27;t finished it, so I&#x27;m just mentioning it. This book might seem like an odd choice at first since it&#x27;s from the architecture shelf, but it has some interesting ideas nonetheless.<p>One thing to mention is that the topic for both of these books is not digital design, yet I would argue that the knowledge learned from them is transferable to the digital realm.
评论 #11595613 未加载
tmaly大约 9 年前
I sometimes work with remote designers, so I needed something that is flexible and fast to create.<p>Rather than trying to spend hours using Gimp or Photoshop ( I have been down that road), this is what I do as its much faster to translate whats in my mind to something a designer can use.<p>Get a sketch pad ( blank pages no lines ), I bought mine at a local pharmacy.<p>Get a good mechanical pencil, they sell good ones for drafting, also get a good erasure that is different from the pencil.<p>Get yourself a good ruler, it you want to draw to scale get an architectural ruler not an engineering ruler ( scale is for land etc so its too big ) if you do not need to draw to scale, get a metal ruler with the cork underside to prevent slipping on the paper.<p>Get yourself a plastic stencil of different shapes. Many of these are used for flow charts or electric circuits, but find one that has the shapes you want.<p>Draw out your proof of concepts on paper using your rulers and stencils.<p>Label your drawing.<p>Finally just take a picture with your phone and send it to the designer.<p>It you have to make a change, its super simple to erase something and make an adjustment.
datahipster大约 9 年前
Take a look at the recent book Sprint: <a href="http:&#x2F;&#x2F;www.goodreads.com&#x2F;book&#x2F;show&#x2F;25814544-sprint?from_search=true&amp;search_version=service" rel="nofollow">http:&#x2F;&#x2F;www.goodreads.com&#x2F;book&#x2F;show&#x2F;25814544-sprint?from_sear...</a><p>It details a creative process for developing concepts and testing them. Given that the book outlines a 5-day process that is tailored for product development teams, you might get a lot out of it for personal projects.
gkya大约 9 年前
I&#x27;ll say pen and paper for sketching too, for it is the fastest tool to use, no need to chase the object you&#x27;ll draw, or search for where to modify the font. You think and you draw, the quickest possible. But then I&#x27;d move it to a digital platform because there it&#x27;s easier to manipulate a schema that you already have. Though up until this day I haven&#x27;t done that. However for emacs users there is the builtin artist mode and for others who don&#x27;t want to use emacs there&#x27;s a program that is capable of sketches and flow charts via a script input, but I don&#x27;t recall the name, sorry.<p>In general I usually jot down whatever comes to my mind and try to structure it all later, or on the way witg intervals. It&#x27;s hard to think in a schematic way. So I&#x27;ll have my notebook and pen, and write whatever comes to my mind <i>asynchronously</i>, that is I won&#x27;t wait for the next thought. If I&#x27;ll present my idea to someone else, I ll try to have at hand a schema and some notes both as brief and as clear as possible and I&#x27;ll skip details for not making premature commitments.
kevindeasis大约 9 年前
For UI&#x2F;UX draw it on paper. Then get inspiration from an expert&#x27;s work who&#x27;s design is similar to your drawing on a sites like behance, dribbble, etc.<p>I use my blog post for my go-to list for prototyping.<p>[Prototyping](<a href="https:&#x2F;&#x2F;medium.com&#x2F;free-stuff&#x2F;the-entrepreneurs-list-b53ff53388c0#.aq2bst3pg" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;free-stuff&#x2F;the-entrepreneurs-list-b53ff53...</a>)<p>[Look at design resources section](<a href="https:&#x2F;&#x2F;medium.com&#x2F;free-stuff&#x2F;500-free-things-on-the-internet-to-start-your-new-year-11ae72266b66#.koffgodvt" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;free-stuff&#x2F;500-free-things-on-the-interne...</a>)<p>For data structures, database schema, software dev; MOOCs are your best friend. (MIT,Coursera, etc.)
评论 #11595438 未加载
rayalez大约 9 年前
I&#x27;m using draw.io to draw mockups, it&#x27;s incredibly useful, it helps me to figure out how the interface looks like.<p>Also I use emacs org-mode to write down my notes. Usually it&#x27;s just some thoughts on the project and list of features that I want.<p>Then I start putting it together in browser, usually almost immediately, without much preparation. I just create a django project, add a test view, and start writing some html&#x2F;css. It really helps me to think, as I do that I get all sorts of ideas about the design, features that I want, and how the whole project will be structured.<p>Meanwhile, on my notes, I have a list of &quot;big&quot;, &quot;medium&quot;, and &quot;small&quot; features, ranked by importance(or in order I want to build them in). Also bugs, questions, and whatever other ideas I have.<p>But all that is just for personal projects, I haven&#x27;t yet worked in teams on anything big.
sharemywin大约 9 年前
<a href="http:&#x2F;&#x2F;creately.com&#x2F;plans" rel="nofollow">http:&#x2F;&#x2F;creately.com&#x2F;plans</a> only costs $50 for a year for an individual<p>It allows you to create use cases. I wouldn&#x27;t get too much into the details. It&#x27;s a designer and developers job to design and develop. If they are good they will have plenty of insights on &quot;how&quot; to do stuff. If you give them too much detail they will just use your design. Let them use the other tools to create the design and flow for you. And let them justify why they made those decisions.<p>I would design the initial on boarding flow first and test if you can get users for it. don&#x27;t spend a bunch of money on a project that can&#x27;t get bunch of users.
cweagans大约 9 年前
I&#x27;ve had a lot of luck throwing something together in Bootstrap or similar, and then when a designer gets involved with the project, they approach it as more of a redesign: they can get familiar with the app, understand what it&#x27;s trying to do, and then go from there. Paper, in my experience, doesn&#x27;t adequately communicate some things (for instance, more complicated UI interactions are somewhat hard to model in a reasonable way on paper).
aidos大约 9 年前
Personally, for code stuff I&#x27;ve always found that boxes with arrows between them are really good at relaying information (pen and paper &#x2F; whiteboard).<p>In my experience, it&#x27;s not the final result that matters though, it&#x27;s the process. As you add each bit to the puzzle and scribble paths on that helps build the understanding. The end result usually looks like a big mess, but the process of getting there is what matters.
评论 #11595430 未加载
ChemicalWarfare大约 9 年前
Whiteboard + draw.io for component, flow and class diagrams (if it comes to that level). Whiteboard for UI. If I have a dedicated UI dev, they can take a pic of my whiteboard sketch and build a static prototype faster than me attempting to draw it in some legit fashion :)<p>Quick static&#x2F;stubbed out prototype app in some cases with whatever tech is appropriate (for mobile been digging ionic quite a bit lately for prototyping).
mattbee大约 9 年前
I&#x27;m a customer &amp; fan of balsamiq.com for sketching user interfaces - it does the job really well.
donjaber大约 9 年前
webpagestickynotes.com has a diagram menu powered by js-sequence-diagrams, mermaid.js, flowchart.js &amp; d3.js that allows frictionless text-to-SVG diagram rendering paired with a quick snapshot capability.<p>Additionally, draw.io can produce SVGs with embedded serialized draw.io state. Those SVGs can be added in a document or a sticky note and re-imported back to draw.io for later editing.
mseeber大约 9 年前
If I <i>make</i> a concept or design and in the process of thinking, I only use pencil and paper, lots of paper.<p>Everything else is just too distracting. The available software tools just don&#x27;t cut it for me as a software developer. They are bound to a device and have complicated user interfaces, they are distracting or at least run on a device that has potential to distract me. Even if they are the perfect software, the fact that they run on a PC&#x2F;Laptop&#x2F;tablet&#x2F;Phone is just enough to distract me. Except maybe a whiteboard, but these are quite expensive compared to pencil and paper and a maintenance nightmare. Their use case is justified if this is an interactive Meeting.<p>And the best thing about pencil and paper: It works offline, will not install updates and display no ads.<p>If I am <i>done</i> thinking&#x2F;tinkering&#x2F;planning&#x2F;designing&#x2F;modeling whatevering, I either redraw it cleanly and scan it or use one of the tools, others will mention in their comments to be able to archive it digitally and share it with others.<p>Some notes:<p>No, the time you will need to redraw it when changing your concept it not wasted time. No, the fact, that there is limited space and resolution when working with pencil and paper is a feature, not a bug.<p>Now for the process:<p>use cases DO NOT SKIP THIS, never ever. Some may call them user stories but hey, that&#x27;s just marketing. use cases can be put in diagrams and they even have a standard: UML They are the highest level abstraction of what you want to build and the help you and others to keep on track. Maybe read about them here: <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Use_case" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Use_case</a> TL;DR The important part is to know, <i>who</i> will do <i>what</i> with the <i>system</i> you want to build, to <i>achieve what</i>? When creating diagrams, create them in a way, so that they fit on maximum half a page each. Everything else can&#x27;t be grasped reasonably and is &quot;just to smart™&quot;. Divide and conquer if necessary. As a result, it should be clear on a high level abstraction what the purpose of that thing you want to build is. A tip: You may sit for an hour on a diagram that has four bubbles and a stick man, that may feel awkward but is just the right thing!<p>If you have use cases, you can go on with how you imagine to fulfill these. That&#x27;s usually the exciting part and the part people jump to forst, not realizing that they don&#x27;t even know what they want to do because they skipped creating usecases... Depending on the project use anything that seems appropriate: mockups, architecture diagrams or some kind of sitemap in case of a web site.<p>If you think you have a rough draft you can explain, talk to your developer&#x2F;designer, the rest will come naturally if they are professional. If they are professional, the should be able to offer you good communication as part of their job.
评论 #11596826 未加载