Affinity Designer Tutorial - How to "Design" a Website.

[@cutlermain]

hey big guy thanks for the tips..... just wondering if you could demo how to cut out pieces and load them up on the html and CSS.. maybe not the whole thing, just how to cut out stuff on the export part of affinity.. like do we need to rasterize it.... or change any settings as we export it?

[@evolutionsolutionmarketing]

what format do you use to export for something like this?

[@firefang1343]

Once you have the design all setup what do you do to make it into a website?

[@brucef5430]

A great video. Thanks for taking the time to share your work! 😊🙌🏻

[@Mixmediasalad]

Thank You Bruce!

[@DavidMiller-to1hd]

I'm a few years late to your site, but thanks for the video. Once you have a Full layout after the wire framing; do you slice an of the images up and use them in your website build, or do you build the site from scratch; perhaps in Elementor , Divi etc; thanks.

[@bobbradleybell]

Thanks for the grid website. You saved me a lot of time.

[@paolo-1283]

How to add custom grid lines, like 12 column grid of bootstrap?

[@drillcream]

Go and look at the grid dimensions at getbootstrap.com and you can create it yourself, it's easy :)

[@TerenceKearns]

Great video man. I thought the intro dragged on too much, but once I fast forwarded to the action, it was very helpful.

[@Mixmediasalad]

Thank you for not scolding me and using the fast forward button to get to the good stuff.

[@TerenceKearns]

Mixmediasalad Thanks for sharing your time and the video

[@Mixmediasalad]

Thank you too for watching and thank you for your kind words of appreciation. :)

[@MrsJanii]

okey fine, aaand how do i put the stuff online, with all functions and so on. i want to have more than one side on my webside, so if i click on something, there has to be a function. i'm completely overwhelmed with that.

[@Mixmediasalad]

are you on a PC or Mac?

[@dennisle5743]

Good Question and Answer, Well, I'm on a Mac.

Of course this question would pop up with a video title like this. Afaik designing a web site is an important step, but "without code" here simply means that Mixmediasalad does not cover the issue of coding. It does not mean that you get a fully working web site without coding. You will need to either learn to code, use a cms properly or ask a professional coder to get your web site running - designing is just about the start…

[@Mixmediasalad]

Thanks for the response. You obviously understood the point Peter,Far to many people jump in the design and build at once without a plan or an approach. Anyway I edited the title and further explain in the description to kern some of the confusion. I get nothing from the videos and just wanted share 1 approach.

[@NoProCraft]

Is there a way to export html/css in affinity designer?

[@Mixmediasalad]

+NoProCraft No, this is purely a graphics application there is no HTML/CSScode generated from this application.

[@hasabilcevic9443]

NoProCraft p

[@arthurprather6720]

The title should be -- "Affnity Designer Tutorial - Design UX/UI Layout" (Not Website without code)

[@LuisGarcia-ze9nw]

Can this be ported to Adobe Muse?

[@Mixmediasalad]

I assume Adobe Muse will import a Layered PSD? if so I think exporting a layered PSD from Affinity would be your course of action.

[@bitchrekt]

Hey, I have a question; how can I make this design to HTML/CSS? Thanks

[@Mixmediasalad]

Jacob Phillips Do you know these scripting languages already? If not I suggest you take a course on it. Affinity designer is a graphic illustration program and does not have any ability to code. I sure if you search youtube on the topic someone will demonstrate how to utilize code to layout a design for web interactivity.

[@bitchrekt]

Of course I do know these languages already. What I don't know is how to make the layout a web page, making the CSS for it would take more than just knowing the language.

[@drillcream]

...you just...code it up...

[@karoalphashots]

very interesting approach to web-designing! Thank you.

[@elvis.vinicius]

Very Nice. I don't like Photoshop for designing a site layout. I like vector programs to do this. Is more precise and productive. Was doing in Inkscape. But now with Affinity Designer, it is more cool, precise and creative. ( sorry my english :) )

[@Mixmediasalad]

I agree totally and your English is fine to me ;)

[@ezzi487]

I like your website. Did you design it using affinity?

[@Mixmediasalad]

No my website was developed with Wordpress.

[@builderspluscustomhomesand2146]

It's a UI DESIGN not a "website" but love the concept!!!! Would make a great portrait style pamphlet or even a brochure showing off portfolio work and/or about the business.

[@adro2503]

Awesome! Would be kinda cool to see you design a website in Google docs tho :D:D

[@Mixmediasalad]

haha! maybe I will accept that challenge hahaha!

[@conyersfamily]

This is really interesting. I have a few questions that I hope you can help with. I love how you have complete control of the design. Can the coder do whatever you want with the file that you give them? What file type would you give? Can I ask what you charged for this? What did your coder charge? I'm new at this obviously. I was going to go the template route with my web designs but this looks way more fun but I know a developer can be extremely expensive. I'm trying to find the best solution for my clients. Thank you. p.s. I love Affinity Designer

[@Mixmediasalad]

Suzanne Conyers Wow, lots of questions here. Ok, the control that I have over the design comes from understanding how and what technology will be used it may be built. That comes from experience and also communication with my developer and knowing his strengths. This actually, a pretty simple design based off what I know will be used to develop it. These days we need to turn around sites pretty quickly with minimal fuss, but full of functionality.Clients expectations are higher and just knowing a little HTML and CSS not enough.Also, once you build a website is half the battle and it will need to be managed by you or your client. I would consider spending some time learning Wordpress and check out the Divi plugin from elegant themes. You can use Affinity as I have in this video to rapidly design your site but then you have to slice the image elements and build the site by hand or with the use of Wordpress and the plugin I suggested. you still need to learn a little HTML and CSS at times for some custom code you might need I hope that answers your questions.

[@conyersfamily]

Thank you!! Very helpful.

[@ericstrickland6015]

@suzanne Conyers- if you use Affinity Designer to design your site then you can Export it as a psd, then get the code editor called Brackets it has a why to use the psd you can code it . The psd file inside of brackets will show the html code on each element in the psd. hope this helps

[@alikesserwani9393]

I downloaded brackets, how can I extract the PSD file?

[@ericstrickland6015]

Do you have a creative cloud account with Adobe? In brackets there is a plugin you can use . I think it's called preview

[@dsulvadarius]

very nice video.

[@rosshi]

A Webpage Is NOT A Website

[@Mixmediasalad]

web·site ˈwebsīt/ nounCOMPUTING a location connected to the Internet that maintains one or more pages on the World Wide Web. www.google.com/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=define%3Awebsite&oq=define%3Awebsite&rlz=1C5CHFA_enUS724US724&aqs=chrome..69i57j69i58.11927j0j4

[@rosshi]

A wee bit anal