DOTW: Web Design! What is your designing process? (Participation = 3+ Hero Points)

The first DOTW posted straight to the new DOTW subforum :slight_smile: exciting. If you haven’t already, make sure you subscribe to this subforum in your community subscription options, so you get notified of future discussions.

This week’s topic is web design! More specifically, the actual “design” part of it.

1. What is your process for coming up with the design for your websites? ie. spec out requirements then start wireframes, get ideas from existing themes, loadup a theme and just wing it etc.
2. Do you use any software for your designing? ie. InVision, Balsamiq, etc.
3. What design tips would you give to someone new to designing websites? (Bonus +3 Hero Points)

------------------------------

-At least one comment = 3 Hero Points
-Share at least one design tip for #3 = +3 Hero Points
-Must participate within 7 days of original posting date to earn Hero Points
-DOTW = Discussion of the Week
-Last DOTW: REVIEWS! WHAT SITES AND DO YOU ENCOURAGE CLIENTS?

  • Helen

    Hi, I'll have a go :slight_smile:

    1. What is your process for coming up with the design for your websites? ie. spec out requirements then start wireframes, get ideas from existing themes, loadup a theme and just wing it etc.

    This is my basic process, but it can change based on the client and size/scope of the project:

    - Work out the basic components required, such as will it need a blog, portfolios or galleries, testimonials, contact, maps etc

    - Get as much of the content as early as possible. If the content is not ready, you can talk to your client about what they want to have and also help guide them on what will work. No point designing a cool site if the client wants a different style of content or their content doesn't fit into what you have designed.

    - Sometimes I do wireframing, but it's normally just rough sketches in a notebook to decide on the order and flow of the page. I tend to not spend too much time on wireframming unless it is for a massive and complex site that has a lot of UX required.

    - Look for inspiration - I am starting to use Pinterest a lot for this now, start collecting ideas for colours, fonts, logos, imagery etc

    - Check out websites and themes for inspiration for layouts - do not copy someone else's work, but get ideas for how to design certain parts of the website, such as a testimonials or portfolio section

    - Jump into Photoshop or the theme

    2. Do you use any software for your designing? ie. InVision, Balsamiq, etc.

    I use Photoshop. But if it is a simple quick site I sometimes just go straight into the theme if it is a page builder.

    3. What design tips would you give to someone new to designing websites?

    I am loving Pinterest at the moment as a great way to kick start the design process for inspiration. Sometimes it can be hard to be creative all of the time and we need some help to be inspired.

    Negative space! Don't be afraid to let things breathe a bit.

    Sometimes less is more. Don't get hung up on trying to use every on-trend design style. You want the content and purpose of the website to be the star, not how many gradients or drop shadows you have used.

  • Chris

    My process starts by creating a site map. Just a chart of boxes and arrows that I present to a client and gain their approval and feedback. Boxes represent pages, arrows are paths and triangles are actions. Once I gain approval on the site map, then I create a wireframe and a proposal. To create the wireframe I clone from a starting template using Flywheel Local. My go to theme these days is OceanWP. I have the unlimited sites pro license with a yearly sub that gives me access to all of Nic’s add ins. Since I prefer elementor to any other page building tool, I have found for me that ocean pro is perfect with elementor free, I suppose you could go the other way as well and do elementor pro with ocean free but the licensing is more affordable the other way if you have many clients. I love using flywheel local, I built simple templates that cover a few of the main starting points that I use for various types of projects, very simple black and white wireframes. In these templates I have all my go to plugins and sample pages and media etc. I then pick a template, clone it to a local site and make a few edits to fit the client. I then present the wireframe, sitemap, and my proposal to the client and get them to sign off on it. Then I go to work adding styling and content.

    I love this process of wire framing... it eliminates the constant change this, no change it back but change that back and forth.

    I let the clients content determine the design for the most part, so it is very important to gather as much content as you can, early as possible.

  • Matthew

    1. What is your process for coming up with the design for your websites? ie. spec out requirements then start wireframes, get ideas from existing themes, loadup a theme and just wing it etc.

    I get inspiration from existing clean websites I like, install templates from pager builders and wing it from there based on the goal of the website.

    2. Do you use any software for your designing? ie. InVision, Balsamiq, etc.

    No - wordpresss theme templates.

    3. What design tips would you give to someone new to designing websites? (Bonus +3 Hero Points)

    In my opinion, less is more when it comes to my taste in design. Think, apple, and other company's using minimalistic design. But this comes to everyone's personal taste and the target audience.

  • Greg

    1. What is your process for coming up with the design for your websites? ie. spec out requirements then start wireframes, get ideas from existing themes, loadup a theme and just wing it etc.

    I only use custom themes. I usually work with a designer, so I just list every content item required by the client and build some kind of very very limited wireframe, then the designer makes the magic happen and I build the site based on that.

    2. Do you use any software for your designing? ie. InVision, Balsamiq, etc.

    Not really. I receive my designer's mockups built on photoshop and head straight to notepad++ !

    3. What design tips would you give to someone new to designing websites?

    Keep it lightweight and simple at first, master CSS before you head to JS (and more specifically the differences between table-cell and inline-block) and never forget the wp_is_mobile() function !

  • Eric Johnson

    1. What is your process for coming up with the design for your websites? ie. spec out requirements then start wireframes, get ideas from existing themes, loadup a theme and just wing it etc.

    Right now I get my ideas from the layouts of other websites that seem like they have a nice flow to it. Then I'll find a theme that closely matches my idea. Map out the pages and start building. I'd like to get a more structured approach like others seem to do here. But I enjoy seeing what designs are out and seem to be geared towards converting.

    2. Do you use any software for your designing? ie. InVision, Balsamiq, etc.

    No, I just go straight to the site, in my new staging area that I set up from the other DOTW and some articles on WPMU and get busy.

    3. What design tips would you give to someone new to designing websites?

    Well, I'm still a newbie myself. But, knowing a bit about marketing it's all about your target market. So finding out as much as you can about their psychographics and how technical they are can help you approach how to create a UX suitable for them and help convert for whatever the goal may be.

  • Danny

    1. What is your process for coming up with the design for your websites? ie. spec out requirements then start wireframes, get ideas from existing themes, load up a theme and just wing it etc.

    I tend to find inspiration daily from browsing the web, Behance and Awwwawards, any-time I come across a nice UX / Design feature I save a snapshot into Evernote and so have a library of options for most website elements.

    2. Do you use any software for your designing? ie. InVision, Balsamiq, etc.

    My tools of choice are Sketch app for wireframing and design, and Invision for presenting to clients.

    3. What design tips would you give to someone new to designing websites?

    Get a proper brief from the client so design iterations are kept to a minimum
    Manage expectation with good project management
    Don't overthink it, go with your gut

  • ROIverhogen

    1. What is your process for coming up with the design for your websites? ie. spec out requirements then start wireframes, get ideas from existing themes, loadup a theme and just wing it etc.
    When we have a client for a new website I usually get a corporate identity with it, containing the logo, colors used, branche and such. Most of the times I make the design on the fly. If I don't have a clue on what it's supposed to look like I'll take a look at sites from businesses in the same sector. The danger of this is that I see alot of cool elements and designs and try to combine these which has a huge risk of giving the counter effect because the site won't look like a whole.

    2. Do you use any software for your designing? ie. InVision, Balsamiq, etc.
    I'm winging it. I tried some times using Photoshop but as it turns out, I'm as quick in just designing a functional prototype as creating a Photoshop page design.

    3. What design tips would you give to someone new to designing websites?
    The internet is huge. Try finding businesses in the same branch as you need, but as I stated above; be aware that it's not getting a fiesta of gathered different elements. Stick with 1 style and stretch that over the complete layout.
    Also a lot of WordPress themes come with demo pages/sites which may be just what you're looking for.

  • Clay Hess

    1. What is your process for coming up with the design for your websites? ie. spec out requirements then start wireframes, get ideas from existing themes, loadup a theme and just wing it etc.
    My first step begins with a conversation with the client. This allows me to learn about their organization, passion, etc. We then begin mapping out the steps to get their project going. I utilize Agile methodologies (Trello) to work on a project with the client.

    As far as the design itself, I start with low fidelity wireframes to concentrate on layout. I have done this on a napkin at the local coffeehouse, in Illustrator, inVision, Draw.io, etc.

    We then discuss their marketing message. This includes font families, colors (color.adobe.com), etc.

    I then build a prototype using Adobe XD.

    Each step of the way gets customer approval and we then move forward to the actual product build.

    2. Do you use any software for your designing? ie. InVision, Balsamiq, etc.

    Adobe products (XD, DW, Illustrator, PS, etc.)
    Invision
    Draw.io
    VS Code
    Brackets
    Chrome (plugins)
    Trello

    3. What design tips would you give to someone new to designing websites?

    Start with low fidelity and get documented approval all the way through. There is nothing worse than jumping right in and building only to have the client "poo-poo" your beloved design.

    Also, utilize a snippet library to make development faster.

    Research is also a good thing. I always research my client and their competitors.

    *Don't forget about accessibility*

  • Artemis360

    1. What is your process for coming up with the design for your websites? ie. spec out requirements then start wireframes, get ideas from existing themes, loadup a theme and just wing it etc.

    When onboarding a client I ask them to select about 3-5 websites that they like and what specific features they want on their "wish list". The wish list is separate from their requirements.

    2. Do you use any software for your designing? ie. InVision, Balsamiq, etc.

    I mainly use Adobe Fireworks for creating/editing graphics and logos.

    3. What design tips would you give to someone new to designing websites? (Bonus +3 Hero Points)

    Leverage sites like Fiverr for things you don't have the time or skills for.

  • mbitcon

    I usually start by asking the client for existing material in terms of logo, flyers, brochures, anything corporate identity related. I hate it if there is a break in the general company communication material and the website.
    Nowadays I very often use the Divi theme because of its great flexibility. I create a color palette with tools like the new https://www.colorbox.io and with that I customise one of the many preexisting Divi layouts.

  • Jaxom

    1. What is your process for coming up with the design for your websites?
    I ask the client for pictures or drawings of the website idea they have in mind (and generally get pictures of other websites they like.) or I send them to a Graphic Artist Friend who will draw up the visual site.

    2. Do you use any software for your designing?
    Photoshop and Draw which allows us to confirm the visual aspect of the site is what the client wants.

    3. What design tips would you give to someone new to designing websites?
    Always Listen to the client, you might hate the website (Have a couple of those) but as long as the client is happy it's there website after all.
    The other tip is have a folder with your basic website set of plugins so it's a really simple install to start you off. (Page Builder is whatever your comfortable with as everyone has an opinion on which is the best :yum: )

  • Tony G

    Great thread. My contribution here is trivial compared to what we've already seen. It might not be what you were looking for, but here we go...

    My clients aren't looking for WP sites. They're looking for a GUI for their business applications and I happen to use WP for some purposes. But the design process is similar. I ask the client high level strategic questions about what they want to accomplish, then focus on each concept with lower-level tactical initiatives toward achieving those goals. I ask what they are strong about and what they don't care about. I ask Why a lot ... because clients often express a preference based on misinformation, old thinking, or words they've read on a website.

    I ask about who is going to be using the site. I believe in "role-based development" where we design for the consumer, not to the preferences of the business owner. Management often has one view of how things should be done, but actual users (visitors, clients, staff) have a much different perspective. People on the shop floor have different UI/UX requirements from management who is just looking for reports. I try to talk with those consumers, treat them as partners, and involve them in design, development, and QA. It's really tough to sell that concept to clients who think they know everything (when most of the people I talk to have never designed a system previously). But I have 40 years of development experience and I try to ensure the client is aware that this is what stands behind my recommendations. If the post-production experience isn't positive, no one wants to hear "I told ya so" when a project is done and it immediately doesn't serve the needs of the intended audience. And I don't want a client who is immediately faced with angry users and other stakeholder . That leads to me losing a referral for bringing the client to a happy ending. It means I have a disgruntled client because of the added post-production expense. And as poop :poop: rolls downhill it means my client's senior management is going to look down poorly on my offering because of where they are. When we involve end-users in design and development, we never find ourselves going production with something that's unsatisfactory to the consumer -- they took part in the entire process. So to summarize on that, my "design process" is really trying to involve others in that process so that I don't need to do it alone.

    WPMU DEV, please take note of that above process. You've tried independently to develop at least three products recently without getting full buy-in from the audience, and you've had to pay the price for that with subsequent releases that strongly re-work away your initial conceptions. Maybe I'm confusing intentional agile MVP development and reiteration with lack of forethought?

    About site design itself, I've said before, I have no design talent, so I tend to use the same few, free templates for anything I do. I get frustrated working with new templates that aren't versatile, and since that just wastes time I keep coming back to what's comfortable. My sites are usually ugly and I'll quote a client recently saying "it looks liked it was built by a 17 year old". Perhaps this should be memorized as an anti-pattern. I have many strengths, I'm very good at UX in terms of features, but designing specific page content is a definite weakness.

    As to tools:
    - I do use Balsamiq mockups extensively and I highly recommend that fine software.
    - I am fond of mind mapping to brainstorm out concepts, flow, linkages, etc. There are many tools for this - I've come to appreciate the free Chrome app at MindMakerApp.org for basic mapping that's suitable for snapshots for a client.
    - As I design and build I use MantisBT (bug tracker) to log issues for clients. But I've been using ToDoList for many years for monitoring everything from the high level task down to specific sub-sub-sub-tasks and linked concepts.
    - I have a hidden subdomain with a WP blog installed so that I can create notes for myself about specific concepts and issues. It's like a huge notepad, timestamped, revisioned, familiar.
    - Along with the blog I keep a lot of notes in Microsoft OneNote (like Evernote) to keep track of plugin usage, config details, etc.

    I think the pattern described here is that where others here use Adobe products and others to graphically design a site, I write it all down as concepts and then implement from that.

  • Edwin

    1-
    I used to just load a theme and customize in collaboration with the customer, but it's a lengthy process and there are just too many back and forths involved because customers cannot always visualize the idea, and then get disappointed when they see the result of their idea.

    2- Then I started using my favorite drawing program (Drawplus from Serif software (cheap but damn good) ) to draw mockups, which has proven to be an improvement to the above workflow. It is hard to be disappointed if you have actually seen the layout up front.

    3- As to get content out of my customers (let's send another reminder. (ring a bell anyone? :slight_smile: ) i am now using Content Snare.
    I would say, to any web designers that work with customers (some design solely for their own business(es) as I used to do): Spend a few bucks on Content Snare and get that chip off your shoulders. With the templated content request and automated reminders being sent to your customers, you will feel like you got a full-time assistant dedicated to the "just send me that bloody content please!" chore!

    Yes, there is life when work stops! LOL

    Cheers everyone. I wish you peace and sunny days!

    Edwin

  • DigiBlueArc

    Hi Tyler,

    I've created a standard format that gives me my start. The first section I call "Base Camp" which is my security, optimization of code and so on. This is mostly made up of WPMUDev plugins with a few additions for further protection. Secondly, I install a pre-designed system for building pages that includes different page builders (Beaver Builder, Elementor & WP Bakery) including Gutenberg. In this section, I create the static pages like Home, Contact, About, Mission, Technology and so on. I use holders for content, images, logos and media until I have the data from my client. This has worked well with me because my client may play in the sandbox themselves or give me the changes to upload. This is also usually a standard theme, I like to work in WP Ocean but any theme my client likes is fine with me to get an initial layout. In the creative aspect of building the pages, I rely on my client's USP, highlight the difference & benefits and make sure it all tells an interesting story. "Facts Tell... Stories Sell". Next, I create what I call CAMS section, which is a custom design aimed at attracting attention, keeping a visitors attention, giving them a reason to come back and key tools to engage. A strong call to action is then created around the story and targeted vertical markets. At this point, I am continuously searching for new vertical markets and solving issues in those markets that provide my doorway to share what I really have to share. I'm always looking to solve issues that others can't seem to do which gives me an opening to engage with prospects.

    I've been away from my membership here for a while building my own blockchain. It's nice to be back in the flow with this blog.

    Best regards,
    --rick

  • lance aligiannis

    no need for an essay... my process is simple as this...
    very artistic.. n i run with inspiration... either photoshop long pic or a quick page branded for the customer...
    eg... turning this 90's shocker... http://www.metropolis-ent.com
    into this this current century... http://shireguys.site/proposals/web/metro-home/

    as i develop on the fly... im constantly thinking how things will look n function from a user point of view... most to the time i get it right first go... sometimes i let things stew for a bit.. my sites r great to look at n use.. i dont do boring.

    my brain usually explodes with ideas.. n i run with them. customers more often than not really like my approach n ideas! :slight_smile:

  • Manuel

    2. Do you use any software for your designing? ie. InVision, Balsamiq, etc.
    Answer as above

    3. What design tips would you give to someone new to designing websites?

    Stick to what you know and enjoy doing best; create your 'niche' area; and if new to the business and a would -like -to be Web/digital designer, publish some of your work(s) to Social Media chanels, be patient and never give up! Oh yes; here is some advice and pride from someone I know that has just done that and he says. :smirk: Best of luck.

    Earlier this month I created the New York Knicks 2018-19 Season Schedule Creative. Still blows my mind I'm able to work for and am trusted by some of the largest properties in the world, all from my home office in a city which none of my clients have heard of, Adelaide.

    See the project here: https://lnkd.in/eWVVYVC
    Digital Artist & Designer at National Basketball Association (NBA)
    Manuel

  • Julian

    I actually use a page builder to quickly make prototypes of elements, sections and whole pages. These can be shared with clients so they can experience an interactive demo pretty early on in their projects. You can iterate very quickly that way. Feedback from clients has been very positive and it helps to get them more involved and provide better feedback, most of the time.

    I've never been big on Photoshop and the like, spending hours creating pixel perfect designs, just to have to redo it for real with code and stuff. Not to mention accounting for the mobile responsiveness.

    Maybe a little controversial, but it works :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.