3 ms·
I can't quite tell if you're having trouble with front-end architecture (code structure/design, separating things effectively across HTML/CSS/JS) or design (UI,
by rndmize 9y ago
I can't quite tell if you're having trouble with front-end architecture (code structure/design, separating things effectively across HTML/CSS/JS) or design (UI, UX, look/feel, application layout and navigation structure) or both.
If the first is the problem, it's probably worth running through some tutorials to build a full application on whatever set of libs/framework you've chosen. For example, there's a course on Udemy called "Modern React and Redux" that'll introduce you to (surprise) react and redux, as well as demonstrating how to structure your application and build some basics. There's any number of similar things from other people for other ways to structure an app with jQuery or Angular or whatever.
If the design-side stuff is the problem, the first and easiest thing to do is look at examples of good design. Showcases like https://www.thebestdesigns.com/ https://www.thebestdesigns.com/ 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/feel? How did they get this effect?) Sites like https://alistapart.com/ https://alistapart.com/ 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/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's probably worth spending time wire framing with tools like Balsamiq/Sketch/Photoshop, though if you've never used any of those I'd go with pen and paper.
If you're doing both the coding and design parts of the process, its probably best to separate them. If your design isn't well defined when you start coding, it's easy to discard important aspects of it in favor of code efficiency. Similarly, it's usually better to get the look of things right in your design tool instead of spending hours tweaking shadows and colors in CSS.
- fanpuns 9y agoIt's the second for sure. With a design I can recreate it in code without that much issue. The problem for me is very much the blank canvas. I sit down knowing what I need to include, but then I start with the mobile spec (as I've been told you're supposed to) and the the tablet, then the desktop...Somewhere in between I've lost the thread, in fact, I've lost all perspective about what I'm supposed to be making and how things tie together. Thank you for the links, those are good resources. I think I'm going to just have to commit to study and deconstruct what is working for other sites, it's just not something that comes naturally to me. I do wish that there were the kind of declarative tutorials/walkthroughs available for the front end as there are for the back end, a kind of case study in solving a particular design problem.
- rndmize 9y agoIn that case, a few more things. https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ https://www.amazon.com/Dont-Make-Think-Revisited-Usability/d... http://webtypography.net/ http://webtypography.net/ You'll probably want to do some reading on common components of design such as color, spacing/negative space/white space, grids, typography. I feel like even experienced designers can have trouble coming up with something that will work on phones, tables, and various desktop/laptop screen sizes all at once. I'd pick one platform to target initially, get something working there, and then see about the others later; otherwise, you're taking something you already aren't practiced at and multiplying your difficulty several times. Here's another design book I like and which is more in the direction of case studies, but the material (dashboards) is very specific and might not be useful to you - https://www.amazon.com/gp/product/1938377001/ https://www.amazon.com/gp/product/1938377001/