How to Design a Website Without coding. (Video)

[ronniemcbride]

 

In this video I show you how I would design a website using Affinity Designer. I explain importance of using the rapid-prototyping technique called wire-framing and use the 960 grid system to layout the structure of a site before diving in to the last design stage of a project.

 

If you would like  to view the entire layout click this link.

 

click the link to view the video here http://youtu.be/vp2Aq_imf00

 

[ronnyb]

Nice Ronnie... saw you juggling multiple windows near the end... Have you ever tried using Moom for slick and intuitive window management on OS X? I think you're gonna dig it... ;)

[ronniemcbride]

Thanks Ronny!  Ohhh man this is great! I definitely could have used this! hahahah! Only 10 bucks too! Thank You! 

[ronnyb]

Wow, that was a monumental post number, Ronnie ;) Yes, $10 well spent... my other go to productivity booster is LaunchBar... good stuff if you like your keyboard...

[ronniemcbride]

hahahahahahahahaha! So true!

[ronnyb]

(turning on my bob marley)

[ronniemcbride]

I am literally laughing out Loud right now!  Buffalo Soldier I mean Ronny lol

[ronnyb]

I'm recuperating from fractured and dislocated shoulder... trying to avoid harm-a-ceuticals as much as possible for general pain (although unavoidable before physical therapy)... Bob keeps me company and the constant pain at bay... AD also keeps my mind happily busy and off being crippled, lol... 

[ronniemcbride]

Right.......hahahahahaha!

[Kathrin]

Cool Ronnie - really cool!

[ronniemcbride]

Thank you kathrin. Good to hear from you again.

 

Cheers

[halcyon]

Informative Video. Maybe it's just me, because I am not a native english speaker, but for some parts I had to raise the volume a bit to understand all the words.

 

For the content: I would have loved to see your layout process. For example just one section, where you use the 960 grid, place some objects, how you align them vertically and horizontally. Good spacing is also important and often corresponds to other areas of the website where you have used the same spacing. So I would have loved to see how you do that (i.e. ruler/guides)

 

I've used Sketch and I use AD, but I think currently Sketch is easier to layout a website - maybe I've just not discovered the right way to do it.

[ronniemcbride]

Right now, I partially agree with your statement about Sketch. I would not say easier, but Sketch has more tools purely focused on people doing web development. As far as "easy" I feel Affinity Designer has "easier "interface  and workflow to work in. That is merely my own opinion. The demonstration I provide is just to give a high-level view to people who are just getting into designing a website and how they can incorporate the tool they have to achieve the result.  There are some details I have to leave out to keep the video reasonable for the limited youtube attention span. As  for the understanding my videos, I sorry. I'' try to be a bit more clear in my delivery. I do have a voice that sits in the deeper part of the vocal register so, I  apologize for that. I do realize not everyone a native English speaker! I am sorry about that.  :)

[halcyon]

No need to be sorry. It was just feedback, that I hope in the end give you some idea where to watch, if you're looking at your production process. Indeed, Sketch is more focused to create Web or App Development Assets.

[ronniemcbride]

Well, thanks for the feedback! I will definitely work on it. Getting better at it everyday.

[Markus Dierolf]

Interesting video, good to understand the creation process - but it would be nice to see how the prototype comes alive in the web -> which software is used for coding, howto from AD to X ... :)

[ronniemcbride]

Thank you, Markus! That is a good idea. That is a topic that might be a good topic to cover in a paid premium course. It is definitely too in-depth for a "short" tutorial. There multiple option available for Building & Coding a website and there are tools to fit a wide range of skills, strengths, and weaknesses. Some people are strong at hand-coding HTML and CSS, but to really have a good functional website that fits within the realm of strong Web 2.0 practices you have to know much more. There are tools and content management systems like Wordpress, Squarespace, etc that aid in helping people develop very large sites and maintain them without much knowledge of the code behind it. Still a solid knowledge of the basics of HTML/CSS, Javascript, and a coding language is still required if you need to customize something you can't find in the  template provided or you might want to consider paying for an expert to help you while you focus on the things you're better at.

 

Building a website is definitely not something you can teach in a 13 minute video. The main focus of this video was solely focused on the creative web design process of one type of website and how AD fits can help in the that process, but to your point the only thing I did not cover is how slice, cut out images to be used in the development of a mobile applications and websites. I try to keep most of video squarely focused on the strength of the tools I am demonstrating and not sway too far outside that focus.

 

Thank you for your comment it definite has helped me to think about what content people want and how I could do more help people be more informed and skilled. That was a very good comment!

 

Thank you!

 

 

 

 

[Markus Dierolf]

Dear Ronnie,

you showed very clearly how to plan an begin to realize the website-project. I meant not to go in to deep, more of a shortcut video about what software/platform you used and how the forms beeing realized to finish this "simple" website - just to give an idea of what can be used to bring it online. It feels like a small piece is missing :)

 

And I like that you set the focus to the creative process, I think that's the basic for all projects (print or online).

 

A premium course, specialized on realizing web (template) development (for example from AD to Wordpress, ...) would be very interesting. But as you allready wrote, it is very difficult to find a good start (which software should be used, Wordpress, any other, and people are so different: some are better in coding, some don't know a HTML command and and some lucky others are a "mixed media salad" and have at last (basic) knowledge of web development. And as the Master Salad you will be predestinated to do such a course  ;) 

[ronniemcbride]

Dear Ronnie,

you showed very clearly how to plan an begin to realize the website-project. I meant not to go in to deep, more of a shortcut video about what software/platform you used and how the forms beeing realized to finish this "simple" website - just to give an idea of what can be used to bring it online. It feels like a small piece is missing :)

 

And I like that you set the focus to the creative process, I think that's the basic for all projects (print or online).

 

A premium course, specialized on realizing web (template) development (for example from AD to Wordpress, ...) would be very interesting. But as you allready wrote, it is very difficult to find a good start (which software should be used, Wordpress, any other, and people are so different: some are better in coding, some don't know a HTML command and and some lucky others are a "mixed media salad" and have at last (basic) knowledge of web development. And as the Master Salad you will be predestinated to do such a course  ;)

 

Haha! Thanks for all those kind words. You offer some very good ideas. I am definitely considering the notion of creating such a course. If I do you be first to know.  ;) AD to Wordpress template. I like that idea. Ugh, there are just so many hours in a day. I am working on a client project at the moment. Its 15second  logo animation. Guess what? I am using AD for the graphics and animating in Apple Motion. Hmm, might have to do a course using AD to Motion too haha! Producing professional paid work with 100 dollars worth of application! How is that for a concept? Thanks, Markus you are really inspiring some ideas in this head. Keep talking haha! No, but seriously thank you for sharing your thoughts! This is very inspiring.