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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

Ask HN: Front end designers, where did you start?

25 点作者 fanpuns将近 8 年前
I haven&#x27;t been working in web development for very long, but I have always had a strong preference for working on the back end. Recently after some increasingly frustrating hours of making and then throwing away mockups for a new project I realized that either a) I will simply never be able to design things for the front end because I&#x27;m fundamentally lacking something or b) it&#x27;s a skill that I never bothered to develop and I have to start somewhere at the beginning. I&#x27;m hoping it&#x27;s the second option.<p>Whenever I try to google for front end design I get a lot of hits for JS, HTML, CSS...but it&#x27;s not the coding part with which I am struggling, I feel like I don&#x27;t have a vision of how things should be put together or why. What&#x27;s even more frustrating is that I&#x27;ve been around long enough to know the basic building blocks and so it feels like I have all the parts sitting in front of me, I just can&#x27;t put them together. I have tried decomposing other people&#x27;s designs, but whenever I try to apply the results, it ends up looking like a poor copy.

9 条评论

rndmize将近 8 年前
I can&#x27;t quite tell if you&#x27;re having trouble with front-end architecture (code structure&#x2F;design, separating things effectively across HTML&#x2F;CSS&#x2F;JS) or design (UI, UX, look&#x2F;feel, application layout and navigation structure) or both.<p>If the first is the problem, it&#x27;s probably worth running through some tutorials to build a full application on whatever set of libs&#x2F;framework you&#x27;ve chosen. For example, there&#x27;s a course on Udemy called &quot;Modern React and Redux&quot; that&#x27;ll introduce you to (surprise) react and redux, as well as demonstrating how to structure your application and build some basics. There&#x27;s any number of similar things from other people for other ways to structure an app with jQuery or Angular or whatever.<p>If the design-side stuff is the problem, the first and easiest thing to do is look at examples of good design. Showcases like <a href="https:&#x2F;&#x2F;www.thebestdesigns.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.thebestdesigns.com&#x2F;</a> will have tons of beautiful, well-designed websites you can look through and examine. This is more useful if you put some effort into it (What do I like about this design? Why did they do things this way? If I play with the CSS and adjust these things, how does that change the look&#x2F;feel? How did they get this effect?) Sites like <a href="https:&#x2F;&#x2F;alistapart.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;alistapart.com&#x2F;</a> and Smashing magazine will have some useful articles to read, sites that sell templates can give an idea of current design trends that are popular&#x2F;sell well (themeforest etc.), Dribbble and the like will have detailed design mocks, UI kits and guidelines will have basic layouts for UI elements. It&#x27;s probably worth spending time wire framing with tools like Balsamiq&#x2F;Sketch&#x2F;Photoshop, though if you&#x27;ve never used any of those I&#x27;d go with pen and paper.<p>If you&#x27;re doing both the coding and design parts of the process, its probably best to separate them. If your design isn&#x27;t well defined when you start coding, it&#x27;s easy to discard important aspects of it in favor of code efficiency. Similarly, it&#x27;s usually better to get the look of things right in your design tool instead of spending hours tweaking shadows and colors in CSS.
评论 #14678396 未加载
erik14th将近 8 年前
Copying in front-end design is not exactly a bad thing, software interface isn&#x27;t supposed to be a work of art and as web software have similar patterns, it can be good UX to copy since you&#x27;ll be using conventions your potential users are already used to. I&#x27;d recommend reading this: <a href="http:&#x2F;&#x2F;thehipperelement.com&#x2F;post&#x2F;75476711614&#x2F;ux-crash-course-31-fundamentals" rel="nofollow">http:&#x2F;&#x2F;thehipperelement.com&#x2F;post&#x2F;75476711614&#x2F;ux-crash-course...</a>
评论 #14678462 未加载
heisenbit将近 8 年前
I find the front end space overwhelming and am deliberately saying NO to a lot of stuff. Getting better and being able to do more complex stuff with the tools and frameworks I know seems to help me more than complementing what I learned so far with other stuff on the same competence level. That is not to say I don&#x27;t look around - I do a lot.<p>In communication with others I&#x27;m very explicit about what my tool stack is to the extend my boss told me recently I&#x27;m painting myself in a corner. I realized I got to work on the perception but I will not change my strategy. Being good in one allows me to have the confidence to be good in another quickly if need arises.<p>&gt; I have tried decomposing other people&#x27;s designs, but whenever I try to apply the results, it ends up looking like a poor copy.<p>There is a huge difference between &quot;trying&quot; and &quot;doing&quot;. From POC to something that is launch-able is a long way - at least a factor of 3. Unless you put in the time and effort to really polish something the surface will look dull. Maybe find a project where you are intrinsically motivated or paid to push a solution to a higher level?
评论 #14678419 未加载
KitDuncan将近 8 年前
I probably have a weird way of learning things, but the way I started, was by analyzing the Vue.js Hacker News clone and then just adapting the structure to my own project and it all made sense really quickly after that.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;vuejs&#x2F;vue-hackernews-2.0" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;vuejs&#x2F;vue-hackernews-2.0</a>
soneca将近 8 年前
I am a beginner frontend developer and not a designer, so take my advice at your peril :)<p>I would draw all the screens on paper, with a pencil, trying to get it right. Then I would code it in a by-the-book style using VueJS or EmberJS and Bootstrap or Semantic UI. Don&#x27;t try to customize the design yet, just make it exactly as it come from these tools. Then, when everything is working and looking fairly ok as a modern interface, I would check out more interesting websites out there that has the feeling you want with your own project. And used it as reference to choose colors, fonts, layout, etc.<p>A good place to start looking for references that I found here at HN just now: <a href="https:&#x2F;&#x2F;klart.co&#x2F;pixels" rel="nofollow">https:&#x2F;&#x2F;klart.co&#x2F;pixels</a>
评论 #14678475 未加载
achariam将近 8 年前
Let&#x27;s get this out of the way from the start, you&#x27;re definitely not lacking something. Like most things you can get pretty far with deliberate practice. The front end is usually a combination of usability, design and code. It sounds like you need help with the usability and design part.<p>The first step of awareness means you&#x27;re on the right track. You&#x27;ve also developed a sense of taste because you&#x27;ve recognized something is distinctly better than the other. Ira Glass has a great way of framing this concept [<a href="https:&#x2F;&#x2F;vimeo.com&#x2F;85040589" rel="nofollow">https:&#x2F;&#x2F;vimeo.com&#x2F;85040589</a>]. You can close this gap of ability vs taste by continuing what you&#x27;re doing. If it feels confusing and difficult, you&#x27;re making progress. It will take a while to constantly probe at the &quot;why&quot; something is better. Next you&#x27;ll learn how to apply it.<p>If time is a constraint there&#x27;s a way you can accelerate your learning. You&#x27;ll have to ask someone who is better than you for feedback and advice. This works really well. If you have the resources and don&#x27;t feel the need to learn, you can always pay someone to do it.<p>There&#x27;s a lot more I can go on about but feel free to reach out if you need some help. Here&#x27;s some additional random thoughts:<p>- Don&#x27;t get too caught up in the design and elegance of your front end design. Show it to people, they will help guide what you need to work on.<p>- It&#x27;s okay if things look like a copy of something else. We can learn a lot through imitation.<p>- Pay attention to software you love and really try and understand why you love it. (Sounds like you&#x27;re doing this already)<p>- Check out these books: Steal like and artist, the design of everyday things.<p>- Read through Apples&#x27;s HIG docs, there&#x27;s lot of great stuff there on mobile and app design.<p>- Empathy is a critical tool when making interfaces for others. Really try to understand the problem you&#x27;re trying to solve by getting in the minds of the user. Usually the solution comes pretty naturally.<p>- By exposing yourself to lots of different kinds of software and apps you&#x27;ll start developing a sense of what works where. Like when do I use a slider vs a numerical input.
评论 #14678493 未加载
Hamatti将近 8 年前
I have found HackDesign[0] to be a great source of ideas and resources to learn about design. I&#x27;m a developer myself and just have a guilty pleasure in learning design so I follow along HackDesign every now and then to learn new stuff.<p>[0]: <a href="https:&#x2F;&#x2F;hackdesign.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;hackdesign.org&#x2F;</a>
voidhorse将近 8 年前
It sounds like your question is one of general project structure, organization, application design&#x2F;architecture and more or less &quot;how do I hook components together?&#x2F;what&#x27;s the right way to modularize&#x2F;organize an application or web page?&quot;<p>This is going to sound dumb, but I would suggest reading a bit about backend or systems programming.<p>In my limited experience, code organization and modularity principles, as well as application architecture&#x2F;structure principles, tend to hold regardless of specific domains with perhaps only some minor differences. So, even if you are designing a front end the way you break up components and the degree of modularization&#x2F;your process for determining when something can be separated out, compartmentalized, etc. should be relatively similar to a native&#x2F;systems&#x2F;backend project--even though your materials and purpose are different.<p>In my personal experience, most front-end web development resources are either not geared toward these principles&#x2F;are not always good examples of them. You find a lot of front-end tomes more or less just sugessting you follow the current idioms without teaching you why you should nor questioning whether there&#x27;s a better way. Front-end texts generally are not good resources for learning programming&#x2F;comp sci-fi fundamentals for, I think, two reasons: a. it&#x27;s generally thought that these concepts are less important for front end devs (somewhat true but I guarantee you a front end dev that has some knowledge of the fundamentals of computer systems is going to perfrom better than one who doesn&#x27;t) b. often this material is out of scope in front end resources, which focus on the nitty gritty of frameworks, js, etc. (the proliferation of frameworks is also a massive problem, imo, when it comes to front end development&#x2F;web development which probably would have been avoided had more front end devs been more familiar with the way things are done in the systems programming world&#x2F;unix principles etc.--you still have plenty of libraries in that case, but generally dedication to core libraries and their maintenance is stronger)<p>Contrarily, systems programming texts&#x2F;conceptual texts, since that domain has been around for a long time and since organization and rational decision making are very important in that domain tend to stress these things and communicate them clearly.<p>Once you get the general&#x2F;abstract notions of code organization, modularity, and application&#x2F;architecture design and structure down I think you&#x27;ll find you can easily adapt&#x2F;apply the same principles to web development&#x2F; web apps, and will probably have a better understanding of what&#x27;s going on.<p>I&#x27;m self taught myself and don&#x27;t profess to be a front-end nor systems programming wizard by any stretch of the imagination, so take all that with a grain or two. That approach just happened to, I feel, greatly increase my own understanding and be a big step in my learning. If I had confined myself only to books&#x2F;articles about front end web development I think I&#x27;d actually be worse at it in a lot of general respects, but perhaps a tad better at the particulars of certain frameworks etc.
评论 #14678542 未加载
spurlock将近 8 年前
For a start, don&#x27;t overthink this. There&#x27;s a wealth of tools[1] you can use that have all the functionality you&#x27;re looking for baked in. If you&#x27;re concerned about copying others work, don&#x27;t be. Everyone does it. Why re-invent the wheel? Just be careful copying things like images and copy, as you will have to be original there[2]. There&#x27;s actually not much skill required for this stuff, and this is why basic coding skills should be taught in school, because there&#x27;s little &#x27;grit&#x27; to this. Make something bold, do this: <i>&lt;strong&gt;bold&lt;&#x2F;strong&gt;</i>. Not so hard. The hard part is doing this at scale and this is why you need to simply accept that coding sites is a lot of repetition.<p>So to answer your question - I started by calmly accepting that as a developer, I would be typing out a lot of the same bits of code over and over, often creating &lt;table&gt; soup in the early days, and have since moved onto &lt;div&gt; soup and then styling accordingly with CSS. Sadly there is this trend of designing sites in reverse and people doing all the CSS and JavaScript first, and only when they&#x27;re ready they start adding actual content.<p>[1]: <a href="https:&#x2F;&#x2F;adventurega.me&#x2F;bootstrap&#x2F;" rel="nofollow">https:&#x2F;&#x2F;adventurega.me&#x2F;bootstrap&#x2F;</a><p>[2]: <a href="http:&#x2F;&#x2F;bettermotherfuckingwebsite.com" rel="nofollow">http:&#x2F;&#x2F;bettermotherfuckingwebsite.com</a>
评论 #14678457 未加载