Creating designs for websites

what application should i use to create designs for my website.?

Hi @dariotan321, the industry standard is a layered Photoshop file. Apart from that you have plenty of other options such as Adobe Illustrator or even free software such as Gimp.

is adobe illustrator is like adobe Photoshop?

Nope it is quite different. Main difference is Illuatrator is vector based and Photoshop is pixel based

When you ask about ā€œcreating designsā€, are you talking about creating graphics which are part of the design, or creating a mock-up of the page?

for designing a website

Many people design directly in the browser (my approach), maybe with a few preliminary sketches on paper first.

There are also various ā€œwireframeā€ tools available, which you can find with a quick search. You can get an idea from here: https://www.sitepoint.com/5-free-wireframe-applications/

Remember that websites need to be flexible, to display at different screen sizes and resolutions, and allow for things like users increasing or decreasing font sizes. You can’t create a single, fixed design as you can for print.

2 Likes

From what I’m picking up, there is a bit of a move away from Photoshop these days for doing web design. I’m seeing an awful lot of talk about a product called Sketch, though currently I understand that’s only available for use on a Mac.

Personally, I work much along the lines @technobear outlines above. So long as I’ve an understanding of the desired layout, then you can begin on the site structure and add other details once that’s established.

2 Likes

what is that Sketch you talking about

Are you aware of any college course teaching that? I really, really doubt it.

There are many definitions of web sites. Big experienced companies like Microsoft and IBM call them applications. Some web sites are big enough to be considered a large application, such a General Ledger or Payroll or Order Entry. Big companies use drastically different methodologies. There are thousands of books about software design. Something that many web site developers are unfamiliar with is requirements definitions.

Look in Forums for the Business/Systems Analyst. You can get lost there but you will get a much better idea of what real developers do. My experience with the responses here is that these people are excellent at getting things done but they are not theoretical types.

No college taught me web development. The fact is it is the most wide spread software used for professional web design across the industry. I personally design in the browser like @chrisofarabia or @TechnoBear pointed out, but only when I’m doing stuff for myself. With 10 years of experience in the industry across 5 differently sized companies I can tell you that 99% of the times we got our designs from professional designers in layered Photoshop files. I’m sure any decent modern digital design courses will thoroughly teach Photoshop and all of its useful design techniques.
Only once we recently got a design back in Sketch software, and that is not too convenient for people that do not work with a Mac

1 Like

If you have invisionapp, sketch files can be loaded into your web browser. I’m Windows and I’ve built a site (about to start my second) with Sketch :slight_smile: .

1 Like

Sketch

hi RyanReese. is Sketch application is for MacOs only, is the app can be use in windows?.. because my PC is Windows, my personal editing PC is a Windows OS.

It looks like you have some responses from a wider development community here, which is great! I’d like to add my perspective as a full-time UX Engineer.

Right or not, there’s some bias in the creative world that creative professionals generally use Macs while coding professionals generally use PCs. As such, many of the website design tools out there are geared towards Mac users, though some do have PC versions available.

The most common tools I find in use among my peers are:

  • Adobe Photoshop/Adobe Illustrator - These two programs are related closely to one another, but have some very distinct uses in the world of design and development. Illustrator is generally used to create high-quality vector images for use in web designs (think assets) while Photoshop is more often used in our world to quickly and efficiently mockup an overall site design. Both products have been around for ages, and as such there’s a wealth of knowledge and tutorials available on how to use these products. Lynda.com has an excellent course on Photoshop CC for web design. If you’re new to things, I’d recommend starting there. Both tools are available for both Mac and PC, on a subscription basis.

  • Balsamiq - This is what’s referred to as a low-res mockup creator. Sometimes creating mockups that are very detailed (high-res) early in the design process can lead to unnecessary nitpicking and discussion, which wastes your team’s time and your own. Balsamiq was created as a great way to create basic (low-res) mockups that get the general gist of a design across, while allowing to show some interactivity and process flow along the way. This is another tool that’s relatively easy to learn. My license cost me a 1-time, $80 fee. This tool is available for both Mac and Windows.

  • Sketch - Sketch is quickly becoming the standard for creating high-res, interactive designs and flows. It’s quite powerful, but the team has done a great job of creating an app that is relatively user-friendly despite its expansive capabilities. Available only for Macs.

  • JustInMind - A competitor to Sketch. Not quite as polished as Sketch, JustInMind is available for both PCs and Macs, and is paid for on a subscription basis.

The work that you need to put in from a UX perspective before you begin to do your design work is another conversation entirely, but I’m happy to help if you have any questions.

I hope you’ll find this useful-- let me know if I can give any explanations!

2 Likes

[Off topic]
If your first was CodeFundamentals it is no longer available?
[/off topic]

Nope. All the sketch projects are sites I’ve done ā€˜on the job’ for work.

No. If they have to make it same as PhotoShop then why they need to launch it.
Here are the difference between Photoshop & illustrator. - https://digitalsynopsis.com/design/illustrator-vs-photoshop-differences-minimalist-graphics/

For the last time I try Wix. I like it with its functional. Here is some facts about why it is better to use prototype over mockups. you have to choose which is better for you.
One think which I don’t like in Wix- an automated support service- often, the questions are answered by a bot by keywords, not by a person.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.