Advice. What should I learn first for web content design?

#1

Hello!

I have morphed my previous creative direction/ styling experience into website design now that I am a stay at home mom. I have built websites for myself and friends on Wix, Shopify, and Squarespace. I now want to take my skills to a higher level of design, so that I can create beautiful graphics / content for webpages (logos, page banners, hero imagery, etc). I get frustrated with my limitations not being able to create my own custom graphics. I am less concerned with backend coding right now. First I want to hone my graphic design skills. Then editing. Then possibly coding later.

So here is where I am stuck. What program should I start to learn first, and where?
Adobe Creative Suite is overwhelming me. Is that the best way to go? Should I first learn photoshop, illustrator , or something else? Should I take a class or learn online?

Thank you in advance for your advice!

#2

If you are talking about which programs to use, then you are more concerned with graphic production skills than graphic design skills. You should start with learning programs only if you think that your ability to imagine good graphics is on par with most professional graphic designers. Otherwise you should pick up some books on graphic design principles.

Learn the difference between image development (illustration, photography, 3D modeling, animation) and graphic design skills such as page layout, typography, and communication design. Which ever skill you plan to excel at will determine which program you learn. Asking which program to learn is like an aspiring chef asking which kitchen tools to learn before learning about which ingredients taste good together.

1 Like
#3

I suggest you work backward from your end goal by doing some additional research.

If you are planning to become employed, then look at those jobs and the skills and degrees they require.

If you want to freelance, research other freelance web designers and see what they offer.

Learning about the competition should make things very clear for you. :slight_smile:

#4

The applications for building web graphics can be as simple as Photoshop and, to a slightly lesser degree, Illustrator. There are other, more specialized, web graphics development tools out there, but honestly, I get by quite nicely on just the two I mentioned (plus a code editor).

One problem with your prioritization, however, is placing coding last on your list. Without a fundamental understanding of HTML/CSS, your designs will be something of a shot in the dark as far as them being practical or, even, doable. The nature of HTML/CSS imposes considerable restrictions on what’s practical and what isn’t.

What you’re suggesting is a bit like someone saying they want to design buildings without a fundamental understanding of construction techniques and materials or building codes. That person might come up with a nice-looking concept, but be totally unaware that it would be structurally unsound, overly expensive or way too difficult to build.

The online web building sites you mentioned are mostly just drag-and-drop sites designed to hide all the complexities going on behind the scenes. If you really want to up your game with web design, you, first, need to understand the fundamentals around which those designs need to be built.

#5

I agree with Mr-B, you can’t design a website unless you have some familiarity with the technical foundation and limitations.

A few years ago, I took a one year program at a local college for Web Design & Development. The program included both graphics and coding; html, css, database, javascript, photoshop, illustrator, dreamweaver and programming, so it was a broad overview.

I did well in the image and database parts, hit the ceiling at javascript and programming, and have a reasonable grasp of html and css. Not enough to code, but enough to be aware of how they work.

Perhaps you should look at similar programs in your area.

#6

Wow— apologies to those of you I offended my citing my email. I promise I was not advertising — why would I advertise to folks that do the same thing I do? I simply wanted to save some time by having a conversation, the way we used to do it in the olden days. I stand corrected.

#7

I would suggest NOT posting your personal information to unknown persons on an open online forum…
That probably goes without saying but thought I’d mention it.

1 Like
#8

Tulle, logo design is not something to be taken lightly. I’m not sure about the caliber of client you service, but a heck of a lot more goes into a logo than making a pretty picture. Even a blogger might someday want to print that logo in some fashion, not to mention the design theory, color theory, proper production techniques, trademark law, etc. A lot of graphic designers never even take up logo design.

As for web banners and hero imagery, that’s all far easier to learn. Which software you would use would depend on the look you are trying to achieve.
And there is the rub.
First you have to know the look you need to achieve in order to properly promote your clients’ business to THEIR clients, and second you have to know how to use the tools to present it. The tools are secondary to the theory.

#9

No one was offended. I think you were just being offered what was meant to be an unsolicited helpful tip from someone. It’s totally up to you.

1 Like
#10

Thank you for the responses.

I am not a novice- maybe I came across thy way in my post. I have over 10 years of creative direction experience and have worked with graphic designers to execute branding, traditional and ecommerce marketing collateral, in addition to product and editorial photography. I also have experience with typography and page layouts. I just want to be able to do this myself instead of relying on another designer to execute.

So… I that’s why I asked… which program should I learn first to take my concept and put it on a page. I will be working with fonts, photography, and illustrations to create content for web pages. I want to start there before I jump ahead to video creation/ editing. I am very clear with what I need to do.

Is photoshop what I should focus on first?

I currently have a successful small business and drag and drop sites work just fine for what I need.

I will not be providing personal information and I am not interested in any solicitation or conversations outside of this forum so please do not respond unless you have specific program recommendation.

Thanks.

#11

Very helpful.

#12

Sure, if you know you are going to rely mostly on raster graphics.

#13

You’re sort of giving mixed signals, which might be part of the problem of people not knowing how to approach answering your question.

Glossing over the details, web graphics basically take two forms: raster (.jpeg, .png, .gif) and vector (svg). Photoshop has a built in routine for saving and optimizing raster images for web use. Illustrator is perfectly suited for saving to .svg.

There are, however, newer UI/UX (User Interface and User Experience) applications that provides some more specialized and focused environments for producing graphics for electronic interfaces, like websites. Strictly speaking, though, they’re not really necessary — they just provide a combination of tools that can be time-savers for more advanced UI/UX designers and developers.

Despite your considerable experience in more traditional graphic design and creative direction, you really do sound like a novice with website development, so going back to my first reply (I’ve been building website for about 25 years now), I would strongly recommend learning a bit more about the fundamentals of web development.

You don’t need to become an HTML and CSS guru, but without at least a basic conceptual understanding of these things, you’ll find yourself greatly handicapped and running into obstacles. Just one example of many: you’ll absolutely need to understand the concepts underlying responsive layouts in order to create the optimized graphics to best accommodate those layouts. A few quick course on Lynda.com or another high-quality online tutorial site, will be well worth your time in gaining that basic understanding of how things fit together into a bigger picture.

Now, if all you ever intend on doing is picking colors, choosing options and dropping in graphics on a templated online website building application, well, that’s an awfully modest and self-limiting outlook. Even there, though, a little understanding of what’s going on at a deeper level will answer a whole lot of those kinds of questions that, otherwise, will leave you a bit puzzled.

So to more directly answer your specific question about programs, for now, yeah, I’d recommend, at least for the time being, sticking to Photoshop and, perhaps, Illustrator for creating those graphics. If you want to grab a copy of Sketch or InVision or something similar, that’s an option, too, but you’ll find yourself running up against features that will be totally baffling without that more fundamental understanding that I keep coming back to.

1 Like
#14

Now that you’ve clarified your goal, I still think you should focus on learning design principles and Adobe Creative Suite.

I’d go even farther and suggest a degree program, because at some point, you will be competing against other designers. With degrees that prove that they already know these skills. You will be at a disadvantage unless you’re on the same playing field.

Taking a couple of online classes is not going to get you there. I know, because I had to learn the same lesson. :wink:

#15

The basics you need are html and css. To create the graphics photoshop or illustrator. That’s it. Color is RGB.

Personally I don’t code I don’t have a desire to do that. I design and let someone else code it.

Ever here of a programmer designing. Nope. Only a graphic designer.

1 Like
#16

Back in the day, I would agree with you, Harris.

But these days - and I don’t agree with this - there are many job postings for designer/developers. They want designers who can code, which I think is silly. Two opposite types of wiring, but shrug I guess they can try…

The result, and I see it often, is poorly designed websites, because developers don’t think much about the end user. They’re into the code itself. And the managers don’t know the difference. They just want as many skills in one person as possible. :stuck_out_tongue:

2 Likes
#17

As I mentioned earlier, there are many things in HTML/CSS/JS that are easy to do and many things that are difficult, time-consuming and expensive. A designer who doesn’t know the ins and outs of the relevant languages might very well design a site that can’t be easily built without laborious hacks, workarounds and slow, bloated code.

I suppose it depends on how picky the designer is about letting the developer do what’s needed to, more or less, reproduce the design, but most designers tend to be very picky. For me, a code editor is more essential to designing a website that Photoshop. Not coding a site by oneself, seems a bit like an author jotting down the outline of a novel, then hiring a paragraph developer to come in and write the book.

I know my approach has come to be the exception, but I don’t think that it’s because it’s not the best and most efficient approach. Instead, I think it’s more because so many designers just have no interest in coding.

1 Like
#18

It also depends on how creative the developer/engineer is in figuring out how to make the seemingly impossible and impractical both possible and practical. In that regard, the best ideas come from those who aren’t so immersed in the technology that they can’t think outside the box of what’s seemingly possible. I agree with DocPixel that it’s two opposite types of wiring. I’d rather have a separate designer and engineer working half the time than a full-timer in both roles. The designer’s creativity is not constrained by thoughts of technical limitations, while the engineer knows how to reel in the design just enough to make it possible and practical.

In my experience, most engineers lack patience and diplomacy skills in working with designers. Sometimes it’s because the designers are too picky. But sometimes it’s because the engineers are too lazy. And sometimes it’s a combination of both. Ideally you can get an engineer that’s as patient as the designer is picky. If the design is impossible or impractical, the ideal engineer can gently educate and persuade the designer towards accepting something more optimal. Better yet, the ideal engineer will enhance the design by giving the designer more options and exceeding the designer’s expectations in the execution.

I’ve always been frustrated with the way the web development industry pits designers and engineers in competition with each other. The product suffers the most as a result. I imagine that the web would be 10 times more effective than it is now had project managers made more of an effort to foster collaboration earlier instead of allowing the free-for-all competition to happen like it did. Now we have developers spread too thin, and web sites that have either great functions or great content, but rarely both.

/rant

1 Like
#19

I agree that’s often the case, but not always. Some designers aren’t wired for coding in the same sense that some designers aren’t wired for writing coherent sentences. These designers probably shouldn’t be expected to code their own web designs.

On the other hand, I’ve been writing HTML and CSS since the early '90s, and it’s as natural and as non-technical for me as writing the alphabet and punctuation code that makes up this sentence. I’m reasonably certain that any designer who can write standard English (or any other language) can become equally proficient with most any mark-up language, like HTML or CSS or XML. The real problem is that most just don’t want to because it’s tedious and time-consuming to learn.

Scripting and programming languages, however, are another matter. I’m not particularly adept at them because they do require a different kind of mindset than writing, and besides, I have only a passing interest in the behind-the scenes, server-side stuff that has little to do with the front-end design.

Mark-up languages aren’t behind-the-scenes languages, though — they’re the page description languages that directly describe what the viewer sees. They’re like words are to a writer or like paint is to an artist. I strongly resist having to turn that critical part of the creative process over to someone else.

I dislike using myself as an example, but my ideas aren’t constrained by thoughts of technical limitations any more than my print designs are constrained by my knowledge of layout applications and printing presses. Instead, they’re tempered by the reality of what’s practical, efficient and economical for the task at hand and what isn’t. My abilities are also enhanced by my knowledge of what’s possible and what can be done with that knowledge to achieve the results I’m after.

Because I can do both equally well, I don’t need to waste time (and money) on back-and-forth corrections, negotiations and the frustrations that come with having to hand over my work to be completed by someone else and hoping that he or she can implement them.

I remember back in the '80s when desktop publishing made paste-up obsolete. And I distinctly remember many designers at the time saying that it was unreasonable for them to become computer operators because they were creatives and not geeky computer technicians.

I was working at a newspaper at the time, and we literally had over 50 artists and production employees take early retirement or get laid off rather than trade in their paste-up, typesetting and film stripping technical skills to learn new skills. Today, those same geeky computer technical skills are regarded as no more difficult than paste-up was 35 years ago — they’re just the skills and tools of the trade that every beginner is expected to know.

#20

I agree that html and css are learnable by designers. They make sense after one is familiar with the syntax. But that’s as far as I could go. My programming loops never ended!

I also learned SQL, and worked well with it. But again, I reached a point where I couldn’t go any higher, and had to yell for help above a certain level of complexity.

And like you, M-B, I’m not interested in coding. I’m glad to know how it works, but would far rather do the front end and leave the coding to those who eat it for lunch.