This video demonstrates a design process for laying out a website design. This will not teach you how to code in 20 minutes.
In this Affinity Designer tutorial I show you how to create and utilize a rapid prototyping technique called wireframing to aid in the design process of a single page scrolling website.
Are you looking for premium training then definitely take a look at my online Affinity Designer online training course: http://bit.ly/learnaffinitytoday
For more Affinity Designer tutorials makes sure you subscribe to my channel.
If you want to view the entire layout click this link: http://bit.ly/1wqpZ0f
To see more samples of the photography used in this presentation presentations visit: https://www.flickr.com/people/6234072… and world.werner-kunz.com
If you are interested in seeing what people are doing in Affinity designer, head on over to the Affinity Designer Forum.
source
Thanks for the grid website. You saved me a lot of time.
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.
what format do you use to export for something like this?
Sadly enough it's all rainbows and butterflies while inside the Designer, but if you try to export any of this stuff out, you'll find out that AD doesn't support exporting to HTML and the team is not interested in implementing this feature anytime soon.. Which is quite frustrating given the fact that otherwise the program is good and could beat some Adobe products, but without the real web export it's just meh. Here's a discussion on this on their forums: https://forum.affinity.serif.com/index.php?/topic/18037-how-to-export-to-html/
The title should be — "Affnity Designer Tutorial – Design UX/UI Layout" (Not Website without code)
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.
I like your website. Did you design it using affinity?
very nice video.
A Webpage Is NOT A Website
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.
Great video man. I thought the intro dragged on too much, but once I fast forwarded to the action, it was very helpful.
Can this be ported to Adobe Muse?
How to add custom grid lines, like 12 column grid of bootstrap?
very interesting approach to web-designing! Thank you.
Is there a way to export html/css in affinity designer?
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?
Once you have the design all setup what do you do to make it into a website?
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
Hey, I have a question;
how can I make this design to HTML/CSS?
Thanks
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 🙂 )
Awesome! Would be kinda cool to see you design a website in Google docs tho :D:D